TypeScript 编程语言学习指南

TypeScript 是 JavaScript 的超集，添加了静态类型检查和面向对象编程特性。

基础类型

基本数据类型


// 数字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
 
// 字符串
let color: string = "blue";
let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.`;
 
// 布尔值
let isDone: boolean = false;
 
// 数组
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];
 
// 元组
let tuple: [string, number] = ["hello", 10];
 
// 枚举
enum Color {
    Red,
    Green,
    Blue,
}
let c: Color = Color.Green;
 
// 字符串枚举
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
 
// Any 类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
 
// Unknown 类型（更安全的 any）
let uncertain: unknown = 4;
uncertain = "hello";
uncertain = false;
 
// Void 类型
function warnUser(): void {
    console.log("This is my warning message");
}
 
// Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
 
// Never 类型
function error(message: string): never {
    throw new Error(message);
}
 
function infiniteLoop(): never {
    while (true) {}
}
 
// Object 类型
let obj: object = { name: "张三" };

类型断言


// 类型断言
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;
 
// 另一种语法
let strLength2: number = (<string>someValue).length;
 
// 非空断言
function liveDangerously(x?: number | null) {
    console.log(x!.toFixed()); // 断言 x 不为 null 或 undefined
}

联合类型和交叉类型


// 联合类型
let value: string | number = "hello";
value = 42;
 
// 联合类型函数
function formatValue(value: string | number): string {
    if (typeof value === "string") {
        return value.toUpperCase();
    } else {
        return value.toFixed(2);
    }
}
 
// 交叉类型
interface Person {
    name: string;
    age: number;
}
 
interface Employee {
    id: number;
    department: string;
}
 
type EmployeePerson = Person & Employee;
 
let employee: EmployeePerson = {
    name: "张三",
    age: 30,
    id: 12345,
    department: "技术部"
};

接口

基本接口


interface User {
    readonly id: number;
    name: string;
    age?: number; // 可选属性
    email: string;
}
 
// 实现接口
const user: User = {
    id: 1,
    name: "张三",
    email: "zhangsan@example.com"
};
 
// 函数接口
interface SearchFunc {
    (source: string, subString: string): boolean;
}
 
let mySearch: SearchFunc = function(source: string, subString: string) {
    let result = source.search(subString);
    return result > -1;
};

可索引接口


// 数组接口
interface StringArray {
    [index: number]: string;
}
 
let myArray: StringArray = ["Bob", "Fred"];
 
// 对象接口
interface Dictionary {
    [key: string]: string;
}
 
let myDict: Dictionary = {
    "name": "张三",
    "city": "北京"
};

接口继承


interface Shape {
    color: string;
}
 
interface Square extends Shape {
    sideLength: number;
}
 
interface Circle extends Shape {
    radius: number;
}
 
// 多重继承
interface ColoredSquare extends Square, Circle {
    borderWidth: number;
}
 
let square = <ColoredSquare>{};
square.color = "blue";
square.sideLength = 10;
square.radius = 5;
square.borderWidth = 2;

类

基本类


class Animal {
    private name: string;
    protected species: string;
    
    constructor(name: string, species: string) {
        this.name = name;
        this.species = species;
    }
    
    public makeSound(): void {
        console.log("Some sound");
    }
    
    protected getInfo(): string {
        return `${this.name} is a ${this.species}`;
    }
}
 
class Dog extends Animal {
    constructor(name: string) {
        super(name, "Canis");
    }
    
    public makeSound(): void {
        console.log("Woof!");
    }
    
    public getDogInfo(): string {
        return this.getInfo(); // 可以访问 protected 方法
    }
}

抽象类


abstract class Vehicle {
    abstract startEngine(): void;
    
    public stopEngine(): void {
        console.log("Engine stopped");
    }
}
 
class Car extends Vehicle {
    startEngine(): void {
        console.log("Car engine started");
    }
}
 
class Motorcycle extends Vehicle {
    startEngine(): void {
        console.log("Motorcycle engine started");
    }
}

访问修饰符


class Example {
    public publicField: string = "public"; // 公共
    private privateField: string = "private"; // 私有
    protected protectedField: string = "protected"; // 受保护
    readonly readonlyField: string = "readonly"; // 只读
    
    constructor(
        public param1: string, // 参数属性
        private param2: number
    ) {}
}

泛型

基本泛型


// 泛型函数
function identity<T>(arg: T): T {
    return arg;
}
 
let output1 = identity<string>("myString");
let output2 = identity("myString"); // 类型推断
 
// 泛型接口
interface GenericIdentityFn<T> {
    (arg: T): T;
}
 
let myIdentity: GenericIdentityFn<number> = identity;
 
// 泛型类
class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}
 
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束


// 接口约束
interface Lengthwise {
    length: number;
}
 
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
 
// 类约束
class BeeKeeper {
    hasMask: boolean = true;
}
 
class ZooKeeper {
    nametag: string = "Mikle";
}
 
class Animal {
    numLegs: number = 4;
}
 
class Bee extends Animal {
    keeper: BeeKeeper = new BeeKeeper();
}
 
class Lion extends Animal {
    keeper: ZooKeeper = new ZooKeeper();
}
 
function createInstance<A extends Animal>(c: new () => A): A {
    return new c();
}
 
createInstance(Lion).keeper.nametag;
createInstance(Bee).keeper.hasMask;

高级泛型


// 条件类型
type NonNullable<T> = T extends null | undefined ? never : T;
 
// 映射类型
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
 
type Partial<T> = {
    [P in keyof T]?: T[P];
};
 
// 实用工具类型
interface Person {
    name: string;
    age: number;
    address: string;
}
 
type PersonReadonly = Readonly<Person>;
type PersonPartial = Partial<Person>;
type PersonKeys = keyof Person; // "name" | "age" | "address"

高级类型

条件类型


// 基本条件类型
type TypeName<T> = T extends string ? "string" :
                   T extends number ? "number" :
                   T extends boolean ? "boolean" :
                   T extends undefined ? "undefined" :
                   T extends Function ? "function" : "object";
 
// 分布式条件类型
type ToArray<T> = T extends any ? T[] : never;
type StrNumOrBool = ToArray<string | number | boolean>; // string[] | number[] | boolean[]
 
// 条件类型中的推断
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
 
// 多个条件分支
type Unpacked<T> = T extends (infer U)[] ? U :
                   T extends (...args: any[]) => infer U ? U :
                   T extends Promise<infer U> ? U : T;

映射类型


// 基本映射类型
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
 
type Mutable<T> = {
    -readonly [P in keyof T]: T[P];
};
 
type Optional<T> = {
    [P in keyof T]?: T[P];
};
 
type Required<T> = {
    [P in keyof T]-?: T[P];
};
 
// 键的重新映射
type Getters<T> = {
    [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
};
 
interface Person {
    name: string;
    age: number;
}
 
type PersonGetters = Getters<Person>; // { getName: () => string; getAge: () => number; }

模板字面量类型


type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
 
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
 
// 字符串操作类型
type Uppercase<S extends string> = S extends string ? Uppercase<S> : never;
type Lowercase<S extends string> = S extends string ? Lowercase<S> : never;
type Capitalize<S extends string> = S extends string ? Capitalize<S> : never;
type Uncapitalize<S extends string> = S extends string ? Uncapitalize<S> : never;
 
// 字符串模板类型
type EventName<T extends string> = `${T}Changed`;
type Concat<S1 extends string, S2 extends string> = `${S1}${S2}`;

模块和命名空间

模块


// math.ts
export interface Calculator {
    add(a: number, b: number): number;
    subtract(a: number, b: number): number;
}
 
export class BasicCalculator implements Calculator {
    add(a: number, b: number): number {
        return a + b;
    }
    
    subtract(a: number, b: number): number {
        return a - b;
    }
}
 
export default class AdvancedCalculator extends BasicCalculator {
    multiply(a: number, b: number): number {
        return a * b;
    }
}
 
// main.ts
import AdvancedCalculator, { Calculator, BasicCalculator } from './math';
 
const calc: Calculator = new AdvancedCalculator();
console.log(calc.add(5, 3));

命名空间


namespace Validation {
    export interface StringValidator {
        isValid(s: string): boolean;
    }
    
    const lettersRegexp = /^[A-Za-z]+$/;
    const numberRegexp = /^[0-9]+$/;
    
    export class LettersOnlyValidator implements StringValidator {
        isValid(s: string) {
            return lettersRegexp.test(s);
        }
    }
    
    export class ZipCodeValidator implements StringValidator {
        isValid(s: string) {
            return s.length === 5 && numberRegexp.test(s);
        }
    }
}
 
// 使用
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

装饰器

类装饰器


// 类装饰器
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}
 
@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
 
// 装饰器工厂
function color(value: string) {
    return function (target: Function) {
        // 做一些元数据相关的操作
    };
}
 
@color("red")
class Car {}

方法装饰器


// 方法装饰器
function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const method = descriptor.value;
    
    descriptor.value = function (...args: any[]) {
        console.log(`调用方法: ${propertyKey}`);
        const result = method.apply(this, args);
        console.log(`方法 ${propertyKey} 执行完成`);
        return result;
    };
}
 
class Calculator {
    @log
    add(a: number, b: number): number {
        return a + b;
    }
}

属性装饰器


// 属性装饰器
function format(formatString: string) {
    return function (target: any, propertyKey: string) {
        let value = target[propertyKey];
        
        const getter = function() {
            return value;
        };
        
        const setter = function(newVal: string) {
            value = formatString.replace('{0}', newVal);
        };
        
        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true
        });
    };
}
 
class Greeter {
    @format("Hello, {0}!")
    greeting: string;
}

最佳实践

类型安全


// 避免使用 any
// 不好的做法
function processData(data: any): any {
    return data.someProperty;
}
 
// 好的做法
interface Data {
    someProperty: string;
}
 
function processData(data: Data): string {
    return data.someProperty;
}
 
// 使用类型守卫
function isString(value: unknown): value is string {
    return typeof value === 'string';
}
 
function processValue(value: unknown): string {
    if (isString(value)) {
        return value.toUpperCase(); // TypeScript 知道这里是 string
    }
    throw new Error('Value is not a string');
}

错误处理


// 自定义错误类型
class ValidationError extends Error {
    constructor(
        message: string,
        public field: string,
        public value: any
    ) {
        super(message);
        this.name = 'ValidationError';
    }
}
 
// 使用 Result 类型
type Result<T, E = Error> = 
    | { success: true; data: T }
    | { success: false; error: E };
 
function divide(a: number, b: number): Result<number, string> {
    if (b === 0) {
        return { success: false, error: "除数不能为零" };
    }
    return { success: true, data: a / b };
}

性能优化


// 使用 const assertions
const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number]; // 'red' | 'green' | 'blue'
 
// 使用 satisfies 操作符
const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3
} satisfies {
    apiUrl: string;
    timeout: number;
    retries: number;
};
 
// 类型推断
type Config = typeof config;

配置和工具

tsconfig.json


{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

与 React 集成


// 组件类型
interface Props {
    name: string;
    age?: number;
    onNameChange: (name: string) => void;
}
 
const UserProfile: React.FC<Props> = ({ name, age, onNameChange }) => {
    return (
        <div>
            <h1>{name}</h1>
            {age && <p>Age: {age}</p>}
            <button onClick={() => onNameChange('New Name')}>
                Change Name
            </button>
        </div>
    );
};
 
// Hook 类型
function useCounter(initialValue: number = 0) {
    const [count, setCount] = useState(initialValue);
    
    const increment = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);
    
    const decrement = useCallback(() => {
        setCount(prev => prev - 1);
    }, []);
    
    return { count, increment, decrement };
}

与 Node.js 集成


// Express 应用类型
import express, { Request, Response, NextFunction } from 'express';
 
interface User {
    id: number;
    name: string;
    email: string;
}
 
interface AuthenticatedRequest extends Request {
    user?: User;
}
 
const app = express();
 
app.get('/api/users', (req: AuthenticatedRequest, res: Response) => {
    if (!req.user) {
        return res.status(401).json({ error: 'Unauthorized' });
    }
    
    res.json({ user: req.user });
});
 
// 中间件类型
const authMiddleware = (req: AuthenticatedRequest, res: Response, next: NextFunction) => {
    const token = req.headers.authorization;
    
    if (!token) {
        return res.status(401).json({ error: 'No token provided' });
    }
    
    // 验证 token 并设置用户
    req.user = { id: 1, name: '张三', email: 'zhangsan@example.com' };
    next();
};

学习资源

常用工具

VS Code - 优秀的 TypeScript 支持
ts-node - 直接运行 TypeScript 文件
tsc - TypeScript 编译器
ESLint + @typescript-eslint - 代码质量检查
Prettier - 代码格式化

最后更新: 2024年

TypeScript 编程语言学习指南

目录

基础类型

基本数据类型

类型断言

联合类型和交叉类型

接口

基本接口

可索引接口

接口继承

类

基本类

抽象类

访问修饰符

泛型

基本泛型

泛型约束

高级泛型

高级类型

条件类型

映射类型

模板字面量类型

模块和命名空间

模块

命名空间

装饰器

类装饰器

方法装饰器

属性装饰器

最佳实践

类型安全

错误处理

性能优化

配置和工具

tsconfig.json

与 React 集成

与 Node.js 集成

学习资源

常用工具