TypeScript 核心语法与类型系统实战笔记

数组：有两种声明方式，推荐后者更简洁。

let list: Array<number> = [1, 2, 3];
let list2: number[] = [1, 2, 3];
let anyList: any[] = [1, true, "free"];

元组 (Tuple)：固定长度且元素类型已知的数组。

let x: [string, number];
x = ['hello', 10]; // 正确
// x = [10, 'hello']; // 错误：顺序不匹配
console.log(x[0].substr(1)); // 正确
// console.log(x[1].substr(1)); // 错误：number 没有 substr 方法

枚举 (Enum)：用于定义一组命名常量，分为数字、字符串及混合类型。

enum Color { Red = 1, Green, Blue } // Red=1, Green=2, Blue=3
console.log(Color.Red); // 1
console.log(Color[2]); // Green

enum Direction {
  Up = "UP",
  Down = "DOWN"
}

const enum ConstEnum { A = 1, B = A * 2 }
// 常量枚举在编译后会被内联删除，不生成 JS 代码

2. 特殊类型

Any：放弃类型检查，相当于 JavaScript 的动态行为。

let notSure: any = 4;
notSure = "maybe a string";
notSure.toFixed(); // 运行时可能报错，但编译器不会拦截

Void：通常用于函数返回值，表示无返回。

function warnUser(): void {
  alert("Warning message");
}
// let unusable: void = undefined; // 不建议单独使用 void 变量

Never：代表永远不会出现的值，常用于抛出异常或死循环。

let e: never;
e = (() => {
  throw new Error('Error');
})();

Null & Undefined：严格模式下需显式处理。

let a: null | undefined = undefined;

只读数组：防止修改数组结构。

let a: number[] = [1, 2, 3];
let ro: ReadonlyArray<number> = a;
// ro[0] = 12; // 错误
// ro.push(5); // 错误
a = ro as number[]; // 通过类型断言恢复可写性

函数定义与重载

函数参数和返回值必须明确类型，TS 能帮你捕捉调用错误。

// 默认参数必须在可选参数之后
function fun(x: number = 1): number {
  return x;
}

// 可选参数
function fun2(x?: string): number {
  return 0;
}

// 剩余参数
function fun3(...args: any[]): number {
  args.forEach(item => {});
  return 0;
}

// 函数重载：同名函数根据参数不同返回不同类型
function fn4(x: number, y: number): number;
function fn4(x: string, y: string): string;
function fn4(x: any, y: any): any {
  if (typeof x === 'number') {
    return x * y;
  } else {
    return x + y;
  }
}

接口与类

接口 (Interface)

接口定义了对象的形状，TS 中对象结构遵循'鸭子类型'原则。

interface LabeledValue {
  label: string;
  color?: string; // 可选属性
  readonly y: number; // 只读属性
}

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

// 索引签名
interface ReadonlyStringArray {
  readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
// myArray[2] = "Mallory"; // 错误：只读

类 (Class)

类支持构造函数、继承和访问修饰符（虽然示例中未展示修饰符，但这是类的核心）。

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  move(distanceInMeters: number = 0): void {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}

类型断言

当 TS 无法推断类型时，可以使用断言告诉编译器你的意图。

function fun(): string | number[] {
  if (Math.random() < 0.5) {
    return 'Ace';
  } else {
    return [28];
  }
}

let a: string | number[] = fun();
(<string>a).length; // 尖括号语法
let b = a as string; // as 语法（推荐）
b.length;

注：以上代码片段均经过逻辑校验，实际开发中建议配合 ESLint 等工具规范代码风格。