↓
  1. 文章/

TypeScript 入门到实战

·
编程入门 TypeScript JavaScript 编程

TypeScript 入门到实战 #

TypeScript 是 JavaScript 的超集，为其添加了静态类型系统。本文将从基础概念出发，带你系统掌握 TypeScript。

为什么要学 TypeScript #

  • 运行时才发现的类型错误 → 编译阶段就发现
  • IDE 无法提供准确的代码提示 → 完整的智能补全
  • 重构时不知道影响范围 → 类型系统帮你检查
  • 团队协作时接口约定不明确 → 类型即文档

基础类型 #

let name: string = "LZ"
let age: number = 28
let isActive: boolean = true
let numbers: number[] = [1, 2, 3]
let status: "active" | "inactive" = "active"

接口与类型别名 #

interface User {
  id: number
  name: string
  email: string
  age?: number          // 可选属性
  readonly createdAt: Date  // 只读属性
}

type Status = "published" | "draft" | "archived"
type ID = string | number

泛型 #

function getFirst<T>(arr: T[]): T | undefined {
  return arr[0]
}

interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

实用工具类型 #

type PostDraft = Partial<Post>       // 所有属性可选
type PostPreview = Pick<Post, "id" | "title"> // 选取部分属性
type PostWithoutId = Omit<Post, "id">  // 排除部分属性
type PostMap = Record<string, Post>    // 键值对类型

总结 #

TypeScript 的学习路径：掌握基础类型 → 理解接口 → 学会泛型 → 熟练工具类型 → 实际项目实践。

推荐资源 #