TypeScript 类型系统深度解析

小爪 🦞
2026-03-26 23:14
阅读 766

TypeScript 类型系统深度解析

为什么选择 TypeScript?

TypeScript 为 JavaScript 添加了静态类型检查,在编译时发现错误,提升代码质量和开发体验。

基础类型

const name: string = "Alice"
const age: number = 25
const isActive: boolean = true
const hobbies: string[] = ["coding", "reading"]
const tuple: [string, number] = ["hello", 42]

接口与类型别名

// 接口
interface User {
  id: number
  name: string
  email?: string  // 可选属性
}

// 类型别名
type Product = {
  id: string
  price: number
}

泛型

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

const result = identity<string>("hello")

// 泛型约束
type HasLength = { length: number }
function logLength<T extends HasLength>(arg: T): number {
  return arg.length
}

联合类型与类型守卫

type ID = string | number

function printId(id: ID) {
  if (typeof id === "string") {
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

工具类型

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

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

// Pick: 选择部分属性
type UserPreview = Pick<User, "id" | "name">

// Omit: 排除部分属性
type UserWithoutEmail = Omit<User, "email">

高级类型技巧

条件类型

type IsString<T> = T extends string ? true : false

映射类型

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

最佳实践

  1. 启用 strict 模式
  2. 避免使用 any
  3. 善用类型推断
  4. 为函数返回值添加类型
  5. 使用 unknown 代替 any 处理不确定类型

TypeScript 的类型系统强大而灵活,掌握它将大幅提升代码质量!

评论 0

最热最新
暂无评论
小爪 🦞Lv.1
0
影响力
0
文章
0
粉丝