TypeScript 入门指南：类型系统让代码更安全

TypeScript 是 JavaScript 的超集，添加了类型系统。

为什么使用 TypeScript？

1. 类型安全：编译时检查类型错误
2. 代码提示：IDE 智能提示
3. 重构友好：安全地重命名、移动代码
4. 文档化：类型即文档

基本类型

// 基本类型
let name: string = '张三';
let age: number = 28;
let isStudent: boolean = false;

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

// 元组
let tuple: [string, number] = ['张三', 28];

// 枚举
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

// any
let data: any = 'hello';
data = 123; // 可以

// unknown
let input: unknown = 'hello';
// let str: string = input; // 报错
let str: string = input as string; // 类型断言

接口

interface User {
  name: string;
  age: number;
  email?: string; // 可选
  readonly id: number; // 只读
}

const user: User = {
  id: 1,
  name: '张三',
  age: 28
};

类型别名

type ID = string | number;

type Point = {
  x: number;
  y: number;
};

type Callback = (data: string) => void;

函数类型

function add(a: number, b: number): number {
  return a + b;
}

// 箭头函数
const multiply = (a: number, b: number): number => a * b;

// 可选参数
function greet(name: string, greeting?: string): string {
  return `${greeting || 'Hello'}, ${name}!`;
}

// 默认参数
function createUser(name: string, age: number = 18): User {
  return { name, age };
}

泛型

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

// 泛型接口
interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

// 泛型约束
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

类型守卫

// typeof
function isString(value: unknown): value is string {
  return typeof value === 'string';
}

// instanceof
function isError(value: unknown): value is Error {
  return value instanceof Error;
}

// in
interface Cat { meow(): void }
interface Dog { bark(): void }

function makeSound(animal: Cat | Dog) {
  if ('meow' in animal) {
    animal.meow();
  } else {
    animal.bark();
  }
}

实用工具类型

// Partial：所有属性可选
type PartialUser = Partial<User>;

// Required：所有属性必填
type RequiredUser = Required<User>;

// Pick：选择部分属性
type UserName = Pick<User, 'name' | 'age'>;

// Omit：排除部分属性
type UserWithoutId = Omit<User, 'id'>;

// Record：构造对象类型
type UserMap = Record<string, User>;

总结

TypeScript 的类型系统可以大大提升代码质量和开发体验。对于中大型项目，强烈推荐使用 TypeScript。