TypeScript 核心类型系统

更新: 9/4/2025字数: 0 字 时长: 0 分钟

一、基础原始类型

1. JavaScript 原始类型

let num: number = 42; // 数字
let str: string = "hello"; // 字符串
let bool: boolean = true; // 布尔值
let sym: symbol = Symbol(); // Symbol
let nul: null = null; // null
let undef: undefined = undefined; // undefined
let big: bigint = 100n; // BigInt (ES2020)

2. TypeScript 特有原始类型

let anything: any; // 任意类型（禁用类型检查）
let unknownValue: unknown; // 类型安全的any
let neverValue: never; // 永不存在的值
function noReturn(): void {} // 无返回值

二、对象与集合类型

1. 数组与元组

let arr1: number[] = [1, 2, 3]; // 简单数组
let arr2: Array<number> = [1, 2, 3]; // 泛型数组
let tuple: [string, number] = ["a", 1]; // 元组

2. 对象类型

let obj: object = {}; // 基础对象
let user: { name: string; age?: number }; // 对象字面量类型

三、DOM 相关类型

1. 基础节点类型

let div: HTMLDivElement = document.createElement("div");
let input: HTMLInputElement = document.querySelector("input")!;
let img: HTMLImageElement = new Image();

2. 事件类型

element.addEventListener("click", (e: MouseEvent) => {});
element.addEventListener("keydown", (e: KeyboardEvent) => {});

四、浏览器 API 类型

1. Web Storage

let storage: Storage = localStorage;
storage.setItem("key", "value");
let value: string | null = storage.getItem("key");

2. Fetch API

fetch(url)
  .then((response: Response) => response.json())
  .then((data: unknown) => {});

3. 定时器

let timer: number = setTimeout(() => {}, 1000);
clearTimeout(timer);

五、函数与类类型

1. 函数类型

type AddFunc = (a: number, b: number) => number;
const add: AddFunc = (a, b) => a + b;

2. 类类型

class Person {
  constructor(public name: string, private age: number) {}

  greet(): string {
    return `Hello, ${this.name}`;
  }
}

六、工具类型（Utility Types）

1. 常用工具类型

type PartialUser = Partial<{ name: string; age: number }>; // 所有属性可选
type ReadonlyUser = Readonly<{ name: string }>; // 只读属性
type UserKeys = keyof { name: string; age: number }; // "name" | "age"

2. 映射类型

type Stringify<T> = { [P in keyof T]: string };
type RecordType = Record<"a" | "b", number>; // { a: number, b: number }

七、高级类型

1. 联合与交叉类型

type ID = string | number; // 联合类型
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged; // 交叉类型

2. 类型守卫

function isString(val: unknown): val is string {
  return typeof val === "string";
}

八、类型操作

1. 类型断言

let value: unknown = "hello";
let str1: string = value as string;
let str2: string = <string>value;

2. 非空断言

let maybeString: string | undefined = "hi";
let sureString: string = maybeString!;