跳到主要内容

TypeScript 基础

TypeScript 是 JavaScript 的超集，提供了可选的静态类型和基于类的面向对象编程。

1. 基础类型​

1.1 原始类型​

// Boolean
let isDone: boolean = false;

// Number - 支持十进制、十六进制、二进制和八进制
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// String - 支持模板字符串
let color: string = "blue";
let sentence: string = `Color is ${color}`;

// Symbol
const sym: symbol = Symbol("key");

1.2 数组和元组​

// 数组
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

// 元组 - 固定长度的数组，每个位置有特定的类型
let tuple: [string, number] = ["hello", 10];

1.3 特殊类型​

// any - 任意类型，跳过类型检查
let notSure: any = 4;
notSure = "maybe a string";
notSure = false;

// unknown - 类型安全的any
let value: unknown = 4;
if (typeof value === "string") {
    console.log(value.toUpperCase());
}

// void - 通常用于函数返回值
function warnUser(): void {
    console.log("Warning message");
}

// never - 永不返回的函数
function error(message: string): never {
    throw new Error(message);
}

// null 和 undefined
let u: undefined = undefined;
let n: null = null;

2. 接口和类型​

2.1 接口​

// 基本接口
interface Point {
    x: number;
    y: number;
    readonly z?: number; // 可选且只读属性
}

// 函数接口
interface SearchFunc {
    (source: string, subString: string): boolean;
}

// 类接口
interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

// 扩展接口
interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

2.2 类型别名​

// 基本类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

// 字面量类型
type Direction = "North" | "South" | "East" | "West";
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

// 交叉类型
type Employee = Person & { employeeId: number };

3. 函数​

3.1 函数类型​

// 函数声明
function add(x: number, y: number): number {
    return x + y;
}

// 函数表达式
let myAdd: (x: number, y: number) => number = 
    function(x: number, y: number): number { return x + y; };

// 可选参数和默认参数
function buildName(firstName: string, lastName?: string): string {
    return lastName ? firstName + " " + lastName : firstName;
}

// 剩余参数
function buildList(items: string, ...restItems: string[]): string[] {
    return [items, ...restItems];
}

3.2 函数重载​

function padding(all: number): { top: number; right: number; bottom: number; left: number };
function padding(topAndBottom: number, leftAndRight: number): { top: number; right: number; bottom: number; left: number };
function padding(top: number, right: number, bottom: number, left: number): { top: number; right: number; bottom: number; left: number };
function padding(a: number, b?: number, c?: number, d?: number) {
    if (b === undefined && c === undefined && d === undefined) {
        b = c = d = a;
    } else if (c === undefined && d === undefined) {
        c = a;
        d = b;
    }
    return {
        top: a,
        right: b,
        bottom: c,
        left: d
    };
}

4. 类​

4.1 基本类语法​

class Animal {
    // 属性
    private name: string;
    protected age: number;
    readonly species: string;
    
    // 构造函数
    constructor(name: string, age: number, species: string) {
        this.name = name;
        this.age = age;
        this.species = species;
    }
    
    // 方法
    public makeSound(): void {
        console.log("Some sound");
    }
}

// 继承
class Dog extends Animal {
    constructor(name: string, age: number) {
        super(name, age, "Canine");
    }
    
    makeSound(): void {
        console.log("Woof!");
    }
}

4.2 访问修饰符​

class Example {
    public publicMember: string;      // 可以在任何地方访问
    private privateMember: string;    // 只能在类内部访问
    protected protectedMember: string; // 可以在类内部和子类中访问
    readonly readonlyMember: string;   // 只读属性
    
    // 参数属性
    constructor(public x: number, private y: number) {
        // 自动创建并初始化x和y属性
    }
}

5. 枚举​

// 数字枚举
enum Direction {
    Up = 1,
    Down,    // 2
    Left,    // 3
    Right    // 4
}

// 字符串枚举
enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}

// 异构枚举
enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

// 常量枚举
const enum Constants {
    Max = 100,
    Min = 0
}

6. 类型断言​

// 尖括号语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// as 语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

// 非空断言
function liveDangerously(x?: number | null) {
    // x! 表示x一定不为null或undefined
    console.log(x!.toFixed());
}