下面是一份详细的 TypeScript 教程，涵盖了从基础语法到进阶概念的主要内容，适用于刚入门或想要系统学习 TypeScript 的开发者。
目录
1. 什么是 TypeScript？
TypeScript 是由微软开发的开源编程语言，它是 JavaScript 的超集，添加了静态类型和基于类的面向对象编程。TypeScript 代码最终会被编译成纯 JavaScript，从而可以在任何支持 JavaScript 的环境中运行。
主要优点：
- 类型系统：帮助捕获潜在错误，提供更好的开发时提示。
- 面向对象编程支持：类、接口、继承等语法更加清晰。
- 工具集成：提供更好的编辑器支持、自动补全和重构工具。
2. 安装和配置
2.1 全局安装 TypeScript 编译器
你可以通过 npm 全局安装 TypeScript：
npm install -g typescript
2.2 创建项目并初始化配置
在项目根目录下运行以下命令，生成 tsconfig.json 配置文件：
tsc --init
tsconfig.json 文件可以配置编译选项，例如目标 ECMAScript 版本、模块系统等。
3. 基础语法
类型注解
TypeScript 允许你为变量、函数参数和返回值添加类型注解：
let message: string = "Hello, TypeScript!";
let count: number = 42;
let isActive: boolean = true;
基本数据类型
3.1.1 字符串
let name: string = "Alice";
3.1.2 数字
let age: number = 25;
3.1.3 布尔值
let isStudent: boolean = false;
3.1.4 数组
有两种数组类型的定义方法：
let numbers: number[] = [1, 2, 3];
let fruits: Array<string> = ["apple", "banana"];
3.1.5 元组
元组用于定义固定长度和固定类型的数组：
let person: [string, number] = ["Alice", 25];
3.1.6 枚举类型
枚举允许定义一组命名的常量：
enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
3.1.7 Any 和 Unknown
- any：禁用类型检查，适用于逐步迁移 JavaScript 项目。
let notSure: any = 4;
notSure = "maybe a string instead";
- unknown：类似于 any，但更安全，需要类型断言才能使用。
let value: unknown = 30;
if (typeof value === "number") {
let num: number = value;
}
4. 函数
4.1 函数类型
为函数的参数和返回值指定类型：
function add(a: number, b: number): number {
return a + b;
}
4.2 可选参数和默认参数
参数后面加上 ? 表示可选：
function greet(name: string, greeting?: string): string {
return greeting ? `${greeting} ${name}` : `Hello, ${name}`;
}
默认参数可以为参数赋默认值：
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting} ${name}`;
}
4.3 Rest 参数
用来处理不定数量的参数：
function sum(...numbers: number[]): number {
return numbers.reduce((prev, curr) => prev + curr, 0);
}
5. 对象与接口
5.1 接口（Interface）
接口定义对象的结构，确保对象符合特定的形状：
interface Person {
name: string;
age: number;
sayHello(): void;
}
const user: Person = {
name: "Alice",
age: 25,
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
};
5.2 类型别名（Type Aliases）
使用 type 关键字为类型创建别名：
type ID = number | string;
let userId: ID = 123;
userId = "ABC123";
6. 类与继承
6.1 类的定义
类支持构造函数、属性、方法、继承等：
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0): void {
console.log(`${this.name} moved ${distance}m.`);
}
}
const cat = new Animal("Cat");
cat.move(10);
6.2 继承与修饰符
使用 extends 实现继承，public、private、protected 修饰符控制成员的可见性：
class Dog extends Animal {
bark(): void {
console.log("Woof! Woof!");
}
}
const dog = new Dog("Dog");
dog.bark();
dog.move(20);
7. 泛型
泛型提供了在保持类型信息的同时构建灵活的组件或函数的能力：
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("Hello");
let output2 = identity<number>(100);
- 泛型约束可以限制泛型类型：
interface Lengthwise {
length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length);
return arg;
}
8. 模块化
TypeScript 支持 ES6 模块，通过 export 和 import 导出和导入模块：
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// main.ts
import { add } from "./math";
console.log(add(2, 3));
9. TypeScript 配置文件
tsconfig.json 是 TypeScript 项目的配置文件，用于指定编译选项、包括文件范围、模块化系统等。
示例 tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"]
}
10. 工具与社区资源
- 编辑器支持：VS Code 拥有丰富的 TypeScript 插件和内置支持。
- 类型定义文件：DefinitelyTyped 项目提供大量第三方库的类型定义，通过
@types/包安装。 - 在线 playground：TypeScript Playground（https://www.typescriptlang.org/play）可在线编写和测试 TypeScript 代码。
11. 参考资料
出站链接
站内链接
通过本教程，你可以掌握 TypeScript 的基础语法、面向对象编程、泛型以及模块化等关键概念，为开发大型、可维护的 JavaScript 应用打下坚实基础。Happy Coding!
发表回复