TypeScript 介绍

什么是 TypeScript？

TypeScript 是 JavaScript 的超集，由 Microsoft 开发和维护的开源编程语言。它在 JavaScript 的基础上添加了静态类型系统，使代码更加可靠、可维护。

核心特性

• 静态类型系统：在编译时检测类型错误，提高代码质量
• 类型推断：自动推断变量类型，减少显式类型声明
• 接口和类型：提供强大的类型定义能力
• 泛型：支持可重用的类型安全组件
• 工具类型：提供丰富的内置类型工具
• 现代 JavaScript 特性：支持最新的 ECMAScript 标准
• 编译到 JavaScript：可以在任何支持 JavaScript 的环境中运行

TypeScript 与 JavaScript 的区别

特性	JavaScript	TypeScript
类型系统	动态类型	静态类型
编译	解释执行	编译为 JS
错误发现	运行时	编译时
IDE 支持	有限	强大的智能提示
代码可读性	依赖注释	类型即文档
大型项目支持	较差	优秀

安装和配置

安装 TypeScript

# 全局安装
npm install -g typescript

# 项目本地安装
npm install --save-dev typescript

配置文件 tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

基本语法

1. 类型声明

// 基本类型
let name: string = 'Tom'
let age: number = 25
let isActive: boolean = true

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

// 元组
let person: [string, number] = ['Tom', 25]

// 枚举
enum Direction {
  Up,
  Down,
  Left,
  Right
}

// 任意类型
let anyValue: any = 'anything'

// 未知类型
let unknownValue: unknown = 'unknown'

// 无返回值
function log(message: string): void {
  console.log(message)
}

// 永不返回
function throwError(message: string): never {
  throw new Error(message)
}

2. 接口

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

const user: User = {
  id: 1,
  name: 'Tom',
  age: 25
}

// 接口继承
interface Admin extends User {
  role: string
}

const admin: Admin = {
  id: 2,
  name: 'Admin',
  age: 30,
  role: 'superuser'
}

3. 类型别名

// 基本类型别名
type Name = string

// 对象类型别名
type Person = {
  name: string
  age: number
}

// 联合类型
type Status = 'pending' | 'success' | 'error'

// 交叉类型
type Employee = Person & {
  employeeId: number
}

// 函数类型
type GreetFunction = (name: string) => string

4. 泛型

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

// 泛型接口
interface GenericResponse<T> {
  data: T
  status: number
}

// 泛型类
class Queue<T> {
  private data: T[] = []

  push(item: T): void {
    this.data.push(item)
  }

  pop(): T | undefined {
    return this.data.shift()
  }
}

// 泛型约束
interface HasLength {
  length: number
}

function logLength<T extends HasLength>(arg: T): void {
  console.log(arg.length)
}

高级特性

1. 类型保护

// typeof 类型保护
function processValue(value: string | number) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase())
  } else {
    console.log(value.toFixed(2))
  }
}

// instanceof 类型保护
class Dog {
  bark() {}
}

class Cat {
  meow() {}
}

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

// 自定义类型保护
function isDog(animal: Dog | Cat): animal is Dog {
  return (animal as Dog).bark !== undefined
}

2. 映射类型

// 内置映射类型
type ReadonlyUser = Readonly<User>
type PartialUser = Partial<User>
type RequiredUser = Required<User>
type PickUser = Pick<User, 'name' | 'age'>

// 自定义映射类型
type Nullable<T> = {
  [P in keyof T]?: T[P] | null
}

// 键重映射
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
}

3. 条件类型

// 基础条件类型
type IsString<T> = T extends string ? true : false

// 分布式条件类型
type ToArray<T> = T extends any ? T[] : never

// infer 关键字
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never

// 提取 Promise 返回值
type Awaited<T> = T extends Promise<infer R> ? R : T

4. 模块系统

// 导出
export const PI = 3.14
export function add(a: number, b: number): number {
  return a + b
}
export interface User {
  name: string
  age: number
}

// 导入
import { PI, add, User } from './math'
import * as MathUtils from './math'

TypeScript 的应用场景

1. 大型前端项目

• React：使用 TypeScript 提升组件类型安全性
• Vue：Vue 3 原生支持 TypeScript
• Angular：默认使用 TypeScript

2. 后端开发

• Node.js：使用 TypeScript 编写类型安全的服务端代码
• Express：TypeScript 提供更好的类型支持
• NestJS：基于 TypeScript 的现代后端框架

3. 跨平台应用

• Electron：使用 TypeScript 开发桌面应用
• React Native：TypeScript 提供更好的类型检查

学习资源

官方文档

• TypeScript 官方文档
• TypeScript 手册

教程和课程

• TypeScript 入门教程
• TypeScript 实战

工具和插件

• IDE 支持：VS Code、WebStorm 等
• TypeScript ESLint：代码风格检查
• Prettier：代码格式化

最佳实践

1. 类型定义

• 优先使用 interface 定义对象类型
• 优先使用 type 定义联合类型、交叉类型等
• 避免过度使用 any 类型

2. 配置建议

• 启用 strict 模式
• 启用 noImplicitAny
• 启用 strictNullChecks

3. 代码风格

• 使用 camelCase 命名变量和函数
• 使用 PascalCase 命名类型和接口
• 使用 UPPER_CASE 命名常量

总结

TypeScript 是一门强大的编程语言，它通过静态类型系统为 JavaScript 带来了更好的类型安全性和可维护性。无论是大型项目还是小型应用，TypeScript 都能帮助开发者编写更可靠、更易维护的代码。

通过本文的介绍，你应该对 TypeScript 有了基本的了解。要深入学习 TypeScript，建议结合实际项目进行实践，并参考官方文档和其他学习资源。

TypeScript 的生态系统正在不断发展，它已经成为现代前端和后端开发的重要工具之一。掌握 TypeScript 将会为你的职业生涯带来更多机会和优势。