技术分享主题：TypeScript 实践教程
TypeScript 是一种由 Microsoft 开发并维护的开源编程语言，它是 JavaScript 的超集，在 JavaScript 基础上增加了静态类型检查、面向对象编程、模块化等特性。TypeScript 是一项将加速您开发高质量 JavaScript 应用程序和库的工具。
在本篇文章中，我将介绍 TypeScript 的基本类型、常用操作符、泛型、类型工具和类型维护，并分享一些开发落地相关的建议。
一、基本类型介绍
TypeScript 支持 JavaScript 的所有基本数据类型，包括：布尔值、数字、字符串、数组、对象和 null/undefined。
- 布尔值
布尔值只有 true 和 false 两种值。
let isDone: boolean = false;
- 数字
和 JavaScript 一样，TypeScript 中的所有数字都是浮点数。支持十进制、十六进制和二进制字面量。
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
- 字符串
字符串表示文本数据，支持单引号和双引号。
let name: string = "TypeScript";
- 数组
数组表示多个相同类型的值的集合。
let list: number[] = [1, 2, 3];
let names: string[] = ["Tom", "Jerry"];
//联合类型，可以申明多种类型，中间用|隔开
let strArr: String | Number = '张飞'
strArr = 24
//数组也可以使用联合类型
let arr: String[] = ['张三', '李四']
let brr: Array<String> = ['王五', '赵六']
let nArr: String[] | number[] = ['张三', '李四']
nArr = [1, 2]
let nBrr: Array<String | Number> = ['王五', '赵六']
nBrr = [3, 4]
let crr: [String, Number, Boolean] = ['关羽', 28, true] //元组 指定类型和数组长度
- 对象
对象表示非基本类型的值，包括所有 JavaScript 对象格式。
let person: { name: string; age: number } = {
name: "Tom",
age: 18,
};
- null/undefined
null 和 undefined 是与 JavaScript 的类型相同，并被认为是其他所有类型的子类型。这意味着您可以将 null 和 undefined 分配给任何类型的变量。
let u: undefined = undefined;
let n: null = null;
function fn(): void {
console.log('可以没有返回')
}
function fn1(): String {
return '必须返回指定类型'
}```
二、any、unknown、never
1. any 类型
any 类型表示可以赋值给任意类型的变量。
```typescript
let value: any = "hello";
value = 123;
value = true;
- unknown 类型
unknown 类型表示变量的类型是未知的。
let value: unknown = "hello";
value = 123;
value = true;
与 any 类型不同，您不能将 unknown 类型的变量直接赋给其他变量，必须显式地进行类型检查。
- never 类型
never 类型表示函数永远不会正常返回。它通常用于抛出错误或无限循环等场景。
function error(message: string): never {
throw new Error(message);
}
function infiniteLoop(): never {
while (true) {}
}
三、常用操作符
TypeScript 支持所有 JavaScript 的基本操作符，如：算术运算符、比较运算符、逻辑运算符、位运算符等。此处略过。
四、泛型
泛型是 TypeScript 中的重要特性之一，它可以用于定义可以适用于多种类型的（参数、方法、类）的代码模板。使用泛型可以让代码更加具有通用性和可重用性。
- 泛型函数
泛型函数使用类型变量 T 来代表输入参数和返回值类型。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // 类型为 string
- 泛型接口
泛型接口使用类型变量 T 来代表泛型类型。
interface GenericIdentityFn<T> {
(arg: T): T;
}
function identity<T>(arg: T): T {
return arg;
}
let myIdentity: GenericIdentityFn<number> = identity;
- 泛型类
泛型类使用类型变量 T 来代表泛型类型。
class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
return x + y;
};
五、类型工具
TypeScript 中提供了一些有用的类型工具，用于对类型进行操作和转换。
- Partial
Partial 可以将所有属性设置为可选属性。
interface User {
name: string;
age?: number;
}
type PartialUser = Partial<User>;
const partialUser: PartialUser = {
name: "Tom",
age: 20,
};
console.log(partialUser); // { name: 'Tom', age: 20 }
- Pick
Pick 可以从一个类型中选取部分属性。
interface User {
name: string;
age: number;
email: string;
}
type PartialUser = Pick<User, "name" | "age">;
const partialUser: PartialUser = {
name: "Tom",
age: 20,
};
console.log(partialUser); // { name: 'Tom', age: 20 }
- Exclude
Exclude 可以从一个类型中排除给定的类型。
type NameOrAge = string | number;
type OnlyName = Exclude<NameOrAge, number>;
const name: OnlyName = "Tom";
console.log(name); // Tom
- Omit
Omit 可以从一个类型中排除指定的属性。
interface User {
name: string;
age: number;
email: string;
}
type WithoutEmail = Omit<User, "email">;
const withoutEmail: WithoutEmail = {
name: "Tom",
age: 20,
};
console.log(withoutEmail); // { name: 'Tom', age: 20 }
六、类型维护
在编写大型代码库时，正确地维护类型变得至关重要。以下是一些维护类型的技巧：
- 限制函数的输入和输出类型。
function greet(name: string): string {
return `Hello, ${name}`;
}
- 使用类型断言明确类型。但尽量避免使用类型断言。
let value: unknown = "hello";
let length1: number = (value as string).length; // 类型断言
let length2: number = (<string>value).length; // 类型断言
- 使用类型别名和接口。
type User = {
name: string;
age?: number;
};
interface Order {
id: number;
user: User;
items: Item[];
total: number;
}
type Item = {
id: number;
name: string;
price: number;
};
七、开发落地相关建议
使用严格模式，启用 noImplicitAny 和 strictNullChecks 选项，规定不允许使用 any 类型或空值。
使用 ESLint、Prettier 工具进行代码风格的规范。
尽可能使用类型别名或接口，给变量、函数、方法、类等添加类型检查。
将类型检查集成到 CI/CD 环境，确保每次代码提交都能通过类型检查。
在接口定义时考虑未来的扩展性，以便在未来进行扩展。
将可能重构的代码段集中在一个文件夹中，以便进行快速的解耦。
开发时使用语言服务器（如 VS Code 的 TypeScript 插件）帮助您在编辑器中更好地利用 TypeScript。
