TypeScript 速查表

基础类型

let name: string = "小明";
let age: number = 25;
let isActive: boolean = true;
let nothing: null = null;
let undef: undefined = undefined;
let anyValue: any = "anything";   // 尽量不用
let unknown: unknown = 42;        // 比 any 安全
let never: never;                 // 永不返回值（抛错/无限循环）
let big: bigint = 100n;

// 数组
let nums: number[] = [1, 2, 3];
let strs: Array<string> = ["a", "b"];

// 元组
let pair: [string, number] = ["小明", 25];

// 枚举
enum Color { Red, Green, Blue }
enum Status { Active = "ACTIVE", Inactive = "INACTIVE" }

函数

function add(a: number, b: number): number {
    return a + b;
}

const greet = (name: string): string => `Hello, ${name}`;

// 可选参数
function greet(name: string, title?: string): string { }

// 默认参数
function greet(name: string = "世界"): string { }

// rest 参数
function sum(...nums: number[]): number { }

// 函数类型
type Calc = (a: number, b: number) => number;
const multiply: Calc = (a, b) => a * b;

接口与类型别名

interface User {
    name: string;
    age: number;
    email?: string;          // 可选
    readonly id: number;     // 只读
    [key: string]: any;      // 索引签名
}

type Point = {
    x: number;
    y: number;
};

// 联合类型
type Status = "pending" | "success" | "error";

// 交叉类型
type AdminUser = User & { role: "admin" };

泛型

function identity<T>(arg: T): T { return arg; }

interface Box<T> {
    value: T;
}

// 约束
function longest<T extends { length: number }>(a: T, b: T): T {
    return a.length > b.length ? a : b;
}

// keyof
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

工具类型

Partial<User>           // 所有属性可选
Required<User>          // 所有属性必填
Readonly<User>          // 所有属性只读
Pick<User, "name" | "age">  // 选几个属性
Omit<User, "id">        // 排除几个属性
Record<string, User>    // { [key: string]: User }
Exclude<A | B, B>       // 排除联合类型中的成员
Extract<A | B, B>       // 提取联合类型中的成员
NonNullable<T | null>   // 排除 null 和 undefined
ReturnType<typeof fn>   // 函数返回类型
Parameters<typeof fn>   // 函数参数类型
Awaited<Promise<T>>     // Promise 解包类型

类型守卫

// typeof
if (typeof value === "string") { }

// instanceof
if (value instanceof Date) { }

// in
if ("name" in obj) { }

// 自定义类型守卫
function isString(value: unknown): value is string {
    return typeof value === "string";
}

// 断言
const el = document.querySelector("#app") as HTMLDivElement;
const el2 = <HTMLDivElement>document.querySelector("#app"); // JSX 中不用