1.02 TypeScript的高级用法

以下是一些 TypeScript 高级编程的学习案例, 涵盖了一些常见的高级特性和模式:

1. 泛型

// 泛型函数
function identity<T>(arg: T): T {
    return arg;
}
 
let output = identity<string>("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; };

2. 高级类型

// 交叉类型
type Combined = { a: number } & { b: string };
let obj: Combined = { a: 1, b: "hello" };
 
// 联合类型
type StringOrNumber = string | number;
function printId(id: StringOrNumber) {
    console.log("Your ID is: " + id);
}
 
// 类型别名
type Tree<T> = {
    value: T;
    left: Tree<T>;
    right: Tree<T>;
}
 
// 索引类型
function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
  return names.map(n => o[n]);
}

3. 装饰器

// 类装饰器
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 enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}
 
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
 
    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

4. 模块和命名空间

// 模块
// math.ts
export function add(x: number, y: number): number {
    return x + y;
}
 
// main.ts
import { add } from './math';
console.log(add(1, 2));
 
// 命名空间
namespace Validation {
    export interface StringValidator {
        isAcceptable(s: string): boolean;
    }
 
    export class LettersOnlyValidator implements StringValidator {
        isAcceptable(s: string) {
            return /^[A-Za-z]+$/.test(s);
        }
    }
}
 
let validators: { [s: string]: Validation.StringValidator; } = {};
validators["Letters only"] = new Validation.LettersOnlyValidator();

5. 高级函数类型

// 函数重载
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}
 
// 可调用的类型
interface StringArray {
  [index: number]: string;
}
 
let myArray: StringArray;
myArray = ["Bob", "Fred"];
 
// 构造函数类型
interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
    tick(): void;
}
 
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

这些案例涵盖了 TypeScript 的许多高级特性。通过学习和实践这些案例, 你可以更深入地理解 TypeScript 的类型系统和高级编程概念。