TS
引言
TypeScript 是 JavaScript 的超集，通过添加静态类型系统和面向对象编程特性，旨在解决 JavaScript 在大型项目中存在的类型松散、代码维护困难等问题。
其核心优势包括:
静态类型检查:
编译时捕捉类型错误，减少运行时崩溃风险。
代码可读性:
类型注解可以明确变量、函数参数和返回值的用途，有助于开发者理解代码的意图，提升团队协作效率，并让代码更易于维护。
生态兼容性:
完全兼容 JavaScript，支持渐进式迁移，，降低了学习和转换成本
面向对象编程特性:
TypeScript 提供了类、接口、继承、泛型等面向对象编程（OOP）的特性，使得开发者能够编写更符合现代开发范式的代码。
原始类型
boolean: 布尔值，true或false。number: 数字，包括整数与浮点数。string: 字符串。tuple: 元组，固定长度和类型的数组，例如:[number, string]。enum: 枚举，定义一组命名的常量。any: 任何类型，可以赋值给任何变量。尽量避免使用，因为使用它会失去类型检查的优势。void: 没有返回值，通常用于函数。null: 空值。undefined: 未定义的值。never: 永不存在的值的类型，例如抛出异常的函数。object: 非原始类型，例如对象、数组和函数。unkown: unknown 是一种类型，它表示任何值的类型，但与 any 类型不同，它要求在使用之前进行类型检查。
联合类型与字面量
1 | const name: 'typescript' | 'javascript' = 'typescript'; |
枚举
定义命名常量集合，增强代码可读性
1 | enum Language { ZH, EN }; |
函数类型与接口 - 规范代码的 “契约”
函数类型
指定参数和返回值类型，避免意外行为。
1
2
3function add(x: number, y: number): number {
return x + y
}接口
定义对象结构，强制实现一致性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23interface User {
/* 只读属性 */
readonly id: number
name: string
username: string
password: string
/* 可选属性 */
age?: number
/* 广泛定义 */
[key: string]: unknown
}
const user: User = {
id: 802,
name: '花楹一间',
username: 'huaying',
password: '123456789',
age: 18,
skill: 'code'
};
类与面向对象编程 - 代码的 “组织艺术”
类与继承
支持
public、private、protected访问修饰符。1
2
3
4
5
6
7
8
9
10
11
12
13
14class Animal {
constructor(public name: string) {
}
move() {
console.log('name:', this.name);
}
}
class Dog extends Animal {
bark() {
console.log('woof!');
}
}实现接口
通过接口约束类行为。
1 | interface Loggable { |
高级类型与工具 - 解锁高阶玩法
泛型
泛型（Generics）是一种用于创建可重用组件的强大工具。它使得能够在定义函数、类、接口等时，提供一种方式来指定类型，而不需要预先指定具体的类型。
基本语法: 泛型使用尖括号 <> 来定义。
典型场景:
集合操作：例如数组、链表等的操作，可以使用泛型来定义通用的集合处理函数。
表单处理：在表单处理中，可能需要处理不同类型的字段和验证逻辑，泛型能够帮助保持类型安全并且避免重复代码。
API 请求响应：对于不同的 API 请求，响应可能是不同的类型，泛型可以帮助处理不同类型的请求和响应。
泛型函数
在函数中，泛型允许在函数的参数和返回值中使用类型占位符
1
2
3
4function identity<T>(id: T): T {
return id
}
const id = identity(802); // 调用时，自动推断为 number 类型泛型接口
泛型接口允许定义可以接受不同类型的函数签名或方法。
1
2
3
4
5interface GenericIdentityFn<T> {
(arg: T): T;
}
const identityFn: GenericIdentityFn<number> = (arg) => arg;泛型类
类也可以使用泛型，这使得可以创建针对不同类型的实例化对象。
1 | class GenericBox<T> { |
泛型约束
使用
extends关键字来实现泛型约束，对泛型添加一些限制，确保符合特定的结构。1
2
3
4
5
6
7
8
9
10
11interface Person {
name: string
}
// 泛型约束：T 必须是一个包含 name 属性的对象
function greet<T extends Person>(person: T): string {
return `Hello, ${person.name}`;
}
const person = { name: "John", age: 30 };
console.log(greet(person));默认泛型类型
可以为泛型提供一个默认类型，如果调用时没有提供类型参数，则使用默认类型。
1
2
3
4function wrap<T = string>(value: T): T {
return value;
}
console.log(typeof wrap(123));泛型的多个类型参数
可以为泛型函数、接口或类指定多个类型参数。
1
2
3
4
5
6function merge<T, U>(object1: T, object2: U): T & U {
return { ...object1, ...object2 };
}
const merged = merge({ name: "John" }, { age: 30 });
console.log(merged); // 输出 { name: 'John', age: 30 }使用
keyof和in限制泛型1
2
3
4
5
6
7// keyof 限制：T 必须是一个对象类型，并且 key 需要是对象的键
function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const person = { name: "John", age: 30 };
console.log(getValue(person, "name")); // 输出 "John"
类型别名与交叉类型
1 | type Person = { name: string }; |
类型断言
可以通过类型断言强制将一个值转换为特定的类型，而 TypeScript 不会对其进行进一步的类型检查。
尖括号语法（只在 TSX 中不可用）
1
2let someValue: unknown = "Hello, world!";
const len: number = (<string>input).length;as语法（推荐）1
2const input: unknown = 'hello world!';
const len: number = (input as string).length;
类型守卫
类型守卫是 TypeScript 提供的一种方式，用于细化类型检查，并确保某个变量的类型符合预期。
类型守卫通常会使用 typeof、instanceof 或自定义的类型保护函数来做类型判断。
typeof类型守卫typeof运算符用于判断原始类型（如 string、number、boolean、symbol、undefined）。1
2
3
4
5
6
7function printLength(value: string | number) {
if (typeof value === "string") {
console.log(value.length); // `value` 在这里被推断为 `string` 类型
} else {
console.log(value.toFixed(2)); // `value` 在这里被推断为 `number` 类型
}
}instanceof类型守卫instanceof运算符用于检查某个对象是否是某个类的实例，通常用来检查类的实例。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20class Dog {
bark() {
console.log("Woof!");
}
}
class Cat {
meow() {
console.log("Meow!");
}
}
function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark(); // `animal` 被推断为 `Dog` 类型
} else {
animal.meow(); // `animal` 被推断为 `Cat` 类型
}
}
TS 项目配置文件
1 | /* |