TypeScript 知识点速查（附代码示例）

关于TypeScript 的知识点有很多，我将它们分类整理，并附上含义和代码示例，方便大家查阅。

附上在线运行ts网站: www.typescriptlang.org/play/

1. 基础类型

TypeScript 提供了静态类型检查，以下是常见的基础类型。

1.1 原始类型

类型	含义	示例
number	数字类型（整数和浮点数）	let age: number = 25;
string	字符串类型	let name: string = "Tom";
boolean	布尔类型	let isDone: boolean = false;
null	空值，只能赋值 null	let n: null = null;
undefined	未定义，只能赋值 undefined	let u: undefined = undefined;

let num: number = 42;
let str: string = "Hello TypeScript";
let isValid: boolean = true;
let empty: null = null;
let notDefined: undefined = undefined;

---

1.2 数组

两种定义方式：

• T[] 语法
• Array<T> 泛型语法

let arr1: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b", "c"];

---

1.3 元组（Tuple）

固定长度、不同类型的数组。

let person: [string, number] = ["Tom", 30];
// person[0] = 42; // ❌ 报错，因为第一个元素必须是字符串

---

1.4 枚举（Enum）

给一组值赋予友好的名字。

enum Color {
  Red,   // 0
  Green, // 1
  Blue   // 2
}
let c: Color = Color.Green;
console.log(c); // 输出 1

也可以指定值：

enum Status {
  Success = 200,
  NotFound = 404,
  Error = 500
}
console.log(Status.NotFound); // 404

---

1.5 any（任意类型）

绕过类型检查，不推荐使用。

let value: any = 42;
value = "hello"; // ✅ 允许
value = true;    // ✅ 允许

---

1.6 unknown（未知类型）

更安全的 any，不能随意赋值其他类型，必须先做类型检查。

let value: unknown = "hello";
if (typeof value === "string") {
  console.log(value.length); // ✅ 类型检查后才能访问
}

---

1.7 void（无返回值）

用于函数没有返回值的情况。

function logMessage(): void {
  console.log("Hello, TypeScript");
}

---

1.8 never（不会发生的值）

表示不会有返回结果的情况，比如抛异常或死循环。

function throwError(message: string): never {
  throw new Error(message);
}

---

2. 变量声明

TypeScript 支持 let、const、var。

let age: number = 25;
const PI: number = 3.14;
// PI = 3.15; // ❌ 报错

---

3. 函数

3.1 函数定义

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

---

3.2 可选参数

使用 ? 号标记可选参数。

function greet(name: string, age?: number): void {
  console.log(`Hello, ${name}`);
}

---

3.3 默认参数

function greet(name: string = "Guest"): void {
  console.log(`Hello, ${name}`);
}

---

3.4 剩余参数

function sum(...numbers: number[]): number {
  return numbers.reduce((acc, num) => acc + num, 0);
}

---

4. 接口（Interface）

定义对象的结构。

interface Person {
  name: string;
  age: number;
}

let user: Person = { name: "Tom", age: 25 };

可选属性：

interface Person {
  name: string;
  age?: number;
}

---

5. 类（Class）

5.1 类的定义

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const p = new Person("Tom");
p.greet();

---

5.2 访问修饰符

• public：默认，任何地方都可以访问。
• private：只能在类内部访问。
• protected：只能在类及其子类访问。

class Animal {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
}

let a = new Animal("Dog");
// console.log(a.name); // ❌ 报错，name 是私有的

---

6. 泛型（Generics）

泛型用于编写可复用的代码。

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

let output = identity<string>("Hello");

泛型类：

class Box<T> {
  value: T;
  constructor(value: T) {
    this.value = value;
  }
}

let box = new Box<number>(10);
console.log(box.value);

---

7. 类型断言

告诉 TypeScript 变量的具体类型。

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

或使用 <T> 语法：

let strLength2: number = (<string>someValue).length;

---

8. 类型守卫

8.1 typeof

function printId(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}

8.2 instanceof

class Dog {
  bark() { console.log("Woof!"); }
}
let pet: Dog = new Dog();
if (pet instanceof Dog) {
  pet.bark();
}

---

9. 模块（Modules）

9.1 导出

export function greet() {
  console.log("Hello");
}

9.2 导入

import { greet } from "./module";
greet();

---

10. 交叉类型和联合类型

10.1 交叉类型（Intersection）

interface A { a: string; }
interface B { b: number; }
let obj: A & B = { a: "Hello", b: 42 };

10.2 联合类型（Union）

function print(value: string | number) {
  console.log(value);
}

---

好的，我们继续深入 TypeScript 的其他重要知识点，包括 高级类型、装饰器、命名空间、条件类型、类型推导 等内容，并继续提供示例代码。

---

11. 类型别名（Type Alias）

类型别名用于给复杂的类型起一个新的名字，便于复用。

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

function printPoint(p: Point) {
  console.log(`X: ${p.x}, Y: ${p.y}`);
}

let p: Point = { x: 10, y: 20 };
printPoint(p);

联合类型 + 类型别名

type ID = string | number;
let userId: ID = "abc123";
let orderId: ID = 456;

---

12. 交叉类型（Intersection Types）

用于组合多个类型。

type Person = { name: string };
type Employee = { jobTitle: string };

type Staff = Person & Employee;

let staff: Staff = { name: "Alice", jobTitle: "Engineer" };

---

13. 类型推导（Type Inference）

TypeScript 可以自动推导变量的类型。

let age = 25; // 自动推导为 number
let message = "Hello"; // 自动推导为 string

如果不希望推导类型，可以使用 any：

let something: any;
something = 42; // ✅
something = "Hello"; // ✅

---

14. 类型守卫（Type Guards）

14.1 typeof 类型守卫

function process(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

14.2 instanceof 类型守卫

class Dog {
  bark() { console.log("Woof!"); }
}

class Cat {
  meow() { console.log("Meow!"); }
}

function makeSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

14.3 自定义类型守卫

interface Fish {
  swim: () => void;
}

interface Bird {
  fly: () => void;
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

let pet: Fish | Bird = { swim: () => console.log("Swimming") };

if (isFish(pet)) {
  pet.swim();
} else {
  pet.fly();
}

---

15. 条件类型（Conditional Types）

根据条件判断类型。

type IsString<T> = T extends string ? "YES" : "NO";

type Test1 = IsString<string>; // "YES"
type Test2 = IsString<number>; // "NO"

示例：提取数组的元素类型

type ElementType<T> = T extends (infer U)[] ? U : T;

type T1 = ElementType<number[]>; // number
type T2 = ElementType<string[]>; // string

---

16. 映射类型（Mapped Types）

用于批量修改类型的属性。

type Person = { name: string; age: number };

type ReadonlyPerson = { readonly [K in keyof Person]: Person[K] };

let person: ReadonlyPerson = { name: "Tom", age: 30 };
// person.age = 31; // ❌ 报错，age 变成了只读

示例：将所有属性变为可选

type PartialPerson = { [K in keyof Person]?: Person[K] };

---

17. 模板字面量类型（Template Literal Types）

type Size = "small" | "medium" | "large";
type ShirtSize = `T-${Size}`; // "T-small" | "T-medium" | "T-large"

---

18. 装饰器（Decorators）

装饰器用于 修改类、方法、属性的行为。

⚠ 需要启用 experimentalDecorators

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

18.1 类装饰器

function Logger(target: Function) {
  console.log("Logging class:", target.name);
}

@Logger
class Person {
  constructor() {
    console.log("Person created");
  }
}

18.2 方法装饰器

function Log(target: any, methodName: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${methodName} with arguments:`, args);
    return original.apply(this, args);
  };
}

class MathUtil {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const math = new MathUtil();
console.log(math.add(2, 3));

---

19. 命名空间（Namespace）

命名空间用于组织代码，避免变量冲突。

namespace Utils {
  export function log(message: string) {
    console.log("Log:", message);
  }
}

Utils.log("Hello");

---

20. TypeScript 与 JavaScript 交互

20.1 declare 关键字

当 TypeScript 代码中使用 JavaScript 库时，可以用 declare 声明。

declare let $: any;
$("#app").hide();

使用 .d.ts 类型声明文件

declare module "my-library" {
  export function greet(name: string): void;
}

---

21. TypeScript 配置（tsconfig.json）

TypeScript 项目需要 tsconfig.json 文件，它定义了编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "experimentalDecorators": true
  }
}

---

总结

到这里，我们已经覆盖了 TypeScript 的 几乎所有核心知识点，包括： ✅ 基础类型
✅ 函数（可选参数、默认参数、剩余参数）
✅ 类与接口（访问修饰符、继承、抽象类）
✅ 泛型（泛型函数、泛型类、泛型约束）
✅ 类型系统（联合类型、交叉类型、映射类型）
✅ 高级类型（条件类型、类型守卫、模板字面量类型）
✅ 装饰器（类装饰器、方法装饰器）
✅ 模块化与命名空间
✅ TypeScript 与 JavaScript 交互