Menu
CoddyTech
开始学习

TypeScript 速查表

最后更新

在 TypeScript 在线编辑器中实时试试免费学习 TypeScript

基础类型

原始类型，以及如何给变量加类型注解。

操作语法
字符串let name: string = "Ada";
数字let age: number = 25;
布尔值let ok: boolean = true;
T 类型的数组let xs: number[] = [1, 2, 3];
泛型数组let xs: Array<string> = [];
元组let pair: [string, number] = ["a", 1];
any（关闭类型检查）let x: any = 1;
unknown（更安全的 any）let x: unknown = JSON.parse(s);
void（无返回值）function log(): void { … }
never（永不返回）function fail(): never { throw … }
Null / undefinedlet n: null = null;

类型推断与类型注解

什么时候让 TS 自动推断，什么时候手动注解。

操作语法
根据值推断let count = 0; // number
显式注解let count: number = 0;
函数参数function add(a: number, b: number) { … }
返回值类型function add(a: number, b: number): number { … }
箭头函数const sq = (x: number): number => x * x;
类型断言const el = input as HTMLInputElement;
const 断言（字面量）const dirs = ["up", "down"] as const;
非空断言el!.focus();

接口

描述对象的结构。

操作语法
声明interface User { id: number; name: string; }
可选属性interface User { age?: number; }
只读属性interface User { readonly id: number; }
方法签名interface Logger { log(msg: string): void; }
继承另一个接口interface Admin extends User { role: string; }
索引签名interface Map { [key: string]: number; }
在类中实现接口class Db implements Logger { … }

类型别名与联合类型

给类型起名字，并用 | 和 & 组合类型。

操作语法
类型别名type ID = string | number;
对象类型别名type User = { id: number; name: string };
联合类型type Status = "idle" | "loading" | "done";
交叉类型type Admin = User & { role: string };
字面量类型type Yes = "yes";
Nullabletype Maybe<T> = T | null | undefined;
函数类型别名type Handler = (e: Event) => void;

函数

带类型的参数、返回值和重载。

操作语法
可选参数function greet(name?: string) { … }
默认参数function greet(name = "friend") { … }
剩余参数function sum(...ns: number[]): number { … }
函数类型let fn: (a: number) => number;
可调用接口interface Fn { (x: number): number; }
重载签名function f(x: string): string; function f(x: number): number; function f(x: any) { return x; }
void 返回值会被忽略const cb: () => void = () => 42; // ok

类

带访问修饰符和参数属性的类。

操作语法
声明类class User { name: string; }
构造函数constructor(name: string) { this.name = name; }
参数属性constructor(public name: string) {}
public / private / protectedprivate id: number;
只读字段readonly id: number;
静态成员static count = 0;
getter / setterget name() { return this._name; }
继承class Admin extends User { … }
抽象类abstract class Shape { abstract area(): number; }

泛型

以其他类型为参数、可复用的类型。

操作语法
泛型函数function id<T>(x: T): T { return x; }
显式指定类型调用id<string>("hi");
泛型接口interface Box<T> { value: T; }
泛型类型别名type Pair<A, B> = [A, B];
泛型类class Stack<T> { items: T[] = []; }
用 extends 约束function len<T extends { length: number }>(x: T) { return x.length; }
默认类型参数interface Box<T = string> { value: T; }
keyof 运算符type K = keyof User; // "id" | "name"
索引访问类型type Name = User["name"];

类型收窄

在运行时把联合类型细化为单一类型。

操作语法
typeof 检查if (typeof x === "string") { … }
instanceof 检查if (e instanceof Error) { … }
in 运算符if ("name" in obj) { … }
相等性收窄if (status === "done") { … }
真值判断if (value) { … }
自定义类型守卫function isUser(x: any): x is User { return "id" in x; }
可辨识联合type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number };
用 never 做穷尽检查const _: never = shape;

枚举

一组具名常量。

操作语法
数字枚举enum Direction { Up, Down, Left, Right }
字符串枚举enum Status { Idle = "IDLE", Done = "DONE" }
使用某个值let d: Direction = Direction.Up;
const 枚举（编译时内联）const enum Color { Red, Green, Blue }
字面量联合类型（现代写法）type Status = "idle" | "done";

工具类型

用来转换已有类型的内置辅助类型。

操作语法
所有属性变为可选Partial<User>
所有属性变为必填Required<User>
所有属性变为只读Readonly<User>
选取部分键Pick<User, "id" | "name">
排除一个或多个键Omit<User, "password">
由指定键构成的对象Record<string, number>
从联合类型中排除Exclude<"a" | "b" | "c", "a">
从联合类型中只保留Extract<"a" | "b", "a" | "c">
去掉 null / undefinedNonNullable<string | null>
函数的返回值类型ReturnType<typeof fn>
函数参数组成的元组Parameters<typeof fn>
Promise 解析后的类型Awaited<Promise<string>>

模块

在文件之间导入和导出。

操作语法
命名导出export function add(a: number, b: number) { … }
默认导出export default class User { … }
重新导出export { User } from "./user";
命名导入import { add } from "./math";
默认导入import User from "./user";
只导入类型import type { User } from "./user";
导入全部内容import * as math from "./math";
三斜线指令/// <reference types="node" />

tsconfig 常用配置

值得了解的编译器选项。

选项作用
"strict": true开启所有严格模式检查（推荐）。
"target": "ES2022"tsc 输出的 JavaScript 版本。
"module": "ESNext"输出代码使用的模块系统。
"moduleResolution": "bundler"按现代打包工具的方式解析模块。
"jsx": "react-jsx"为 React 17+ 启用 JSX。
"esModuleInterop": true从 CommonJS 模块默认导入时更简洁。
"skipLibCheck": true跳过 node_modules 的类型检查（构建更快）。
"noEmit": true只做类型检查，输出交给打包工具。

最常用的 TypeScript 语法，全都在这一页。这份 TypeScript 速查表是日常 TS 开发的快速参考：基础类型、接口、类型别名、泛型、联合类型、类型收窄，以及内置的工具类型。TypeScript 建立在 JavaScript 之上，所以底层语法可以随时翻看 JavaScript 速查表。

这里的内容都是标准 TypeScript，可以用 tsc 编译，并在任何支持现代 JavaScript 的环境中运行。需要什么就复制什么，也可以在 TypeScript 在线编辑器里直接运行任意代码片段，无需安装。刚接触类型？Coddy 的免费交互式 TypeScript 课程会从 JavaScript 出发，一步步带你掌握类型。

TypeScript 速查表常见问题

这份 TypeScript 速查表免费吗？

免费。这份 TypeScript 速查表完全免费，无需注册。收藏起来，需要查某个类型、接口或工具类型时随时回来看。

接口和类型别名有什么区别？
两者都能描述对象的结构，在大多数日常场景中可以互换。接口可以重新打开，并在多个文件中扩展（声明合并），这对库的类型很有用。类型别名可以命名联合类型、交叉类型、元组和映射类型，这些都是 interface 表达不了的。常见的做法是：公开的对象结构用 interface，联合类型、元组和计算出来的类型用 type。
any 和 unknown 有什么区别？
any 完全关闭类型检查，编译器允许你对它做任何操作。unknown 是类型安全的：使用之前必须先收窄它（用 typeof、instanceof 或类型守卫）。对于来自外部的值，比如 JSON.parse 或 fetch 的结果，优先使用 unknown，它会强制你先校验再使用。
学 TypeScript 之前需要先学 JavaScript 吗？

需要。TypeScript 就是在 JavaScript 之上加了一层类型系统，所以你掌握的每项 JavaScript 技能都能直接用上。如果你还在打 JS 基础（数组、对象、async/await），JavaScript 速查表是不错的起点，Coddy 的免费 JavaScript 课程也会以交互的方式讲解同样的内容。

可以在线练习 TypeScript 吗？

可以。打开 TypeScript 在线编辑器，就能在浏览器里运行这份速查表中的任何代码片段，无需安装。想要系统学习的话，可以先从 JavaScript 课程学起，再在此基础上用上本页的类型知识。

相关资源

更多速查表

Coddy 编程语言插图

在 Coddy 学习 TypeScript

开始