📝 第十六章:TypeScript 入门

2026 年几乎必选的 JavaScript 超集

16.1 为什么需要类型系统?

TypeScript 为 JavaScript 添加了静态类型,提供了更好的代码提示、类型检查和代码组织能力。

类型系统的优势

16.2 基础类型注解与接口

基础类型

// 基本类型
let name: string = 'John';
let age: number = 30;
let isActive: boolean = true;
let nullable: string | null = null;
let optional: string | undefined = undefined;

// 数组
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c'];

// 元组
let person: [string, number] = ['John', 30];

// 枚举
enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

let dir: Direction = Direction.Up;

// any 类型
let anything: any = 'hello';
anything = 123;

// void 类型
function log(): void {
    console.log('Hello');
}

// never 类型
function throwError(): never {
    throw new Error('Error');
}

接口

// 接口定义
interface Person {
    name: string;
    age: number;
    email?: string; // 可选属性
    readonly id: number; // 只读属性
}

// 使用接口
const person: Person = {
    id: 1,
    name: 'John',
    age: 30
    // email 是可选的
};

// 函数接口
interface AddFunction {
    (a: number, b: number): number;
}

const add: AddFunction = (a, b) => a + b;

// 类实现接口
class Employee implements Person {
    id: number;
    name: string;
    age: number;
    
    constructor(id: number, name: string, age: number) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

16.3 泛型基础

// 泛型函数
function identity<T>(value: T): T {
    return value;
}

const str = identity('hello'); // 类型为 string
const num = identity(123); // 类型为 number

// 泛型接口
interface Container<T> {
    value: T;
    get(): T;
}

// 泛型类
class Box<T> implements Container<T> {
    value: T;
    
    constructor(value: T) {
        this.value = value;
    }
    
    get(): T {
        return this.value;
    }
}

const stringBox = new Box('hello');
const numberBox = new Box(123);

16.4 在 VS Code 中享受智能提示

TypeScript 配置

// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    },
    "include": [
        "src/**/*"
    ]
}

智能提示的优势

动手练习

练习 1:基础类型

  1. 定义不同类型的变量
  2. 使用联合类型和可选类型
  3. 测试类型注解的效果

练习 2:接口

  1. 创建一个接口
  2. 使用接口定义对象
  3. 实现一个类来实现接口

练习 3:泛型

  1. 创建一个泛型函数
  2. 创建一个泛型接口
  3. 创建一个泛型类

练习 4:VS Code 智能提示

  1. 配置 TypeScript 项目
  2. 体验代码补全
  3. 测试类型错误提示