TypeScript 类型系统详解

前言

TypeScript 通过添加类型系统,使 JavaScript 开发更加安全和可维护。本文深入讨论 TypeScript 的类型系统及其最佳实践。

一、基础类型

1.1 原始类型

let str: string = 'hello'
let num: number = 42
let bool: boolean = true
let nothing: null = null
let undef: undefined = undefined
let any_type: any = 'anything'

1.2 复合类型

let arr: number[] = [1, 2, 3]
let tuple: [string, number] = ['hello', 42]
let union: string | number = 'or 42'

interface User {
  name: string
  age: number
}

type Point = {
  x: number
  y: number
}

二、高级类型

2.1 泛型

function identity<T>(arg: T): T {
  return arg
}

class Box<T> {
  constructor(public value: T) {}
}

const box = new Box<number>(42)

2.2 联合和交叉类型

type Success = { kind: 'success'; value: string }
type Error = { kind: 'error'; error: string }
type Result = Success | Error

type A = { a: string }
type B = { b: number }
type C = A & B  // { a: string; b: number }

三、类型推断与守卫

3.1 类型推断

let x = 42  // TypeScript 推断为 number
let y = 'hello'  // 推断为 string

function add(a: number, b: number) {
  return a + b  // 返回类型推断为 number
}

3.2 类型守卫

function isFish(pet: Fish | Bird): pet is Fish {
  return 'swim' in pet
}

if (isFish(pet)) {
  pet.swim()  // 此时 TypeScript 知道 pet 是 Fish
}

四、接口和类

4.1 接口定义

interface Animal {
  name: string
  age: number
  speak(): void
}

class Dog implements Animal {
  name: string
  age: number
  
  speak() {
    console.log('Woof!')
  }
}

五、最佳实践

总结

TypeScript 的类型系统为大规模前端项目提供了必要的安全保障。掌握这些概念,能够写出更加健壮的代码。

标签: TypeScript 类型系统 前端开发