跳到主要内容

TypeScript 完整教程（新手向）

阅读需 3 分钟

本教程面向零基础或刚接触 TypeScript 的开发者，按由浅入深的顺序讲解所有主要知识点。建议按章节顺序阅读。

一、TypeScript 简介​

什么是 TypeScript？​

TypeScript 是 JavaScript 的超集，核心是为代码增加 静态类型。它能在你运行之前就发现很多类型错误，从而提升代码可靠性与可维护性。

为什么需要 TypeScript？​

  • 提高开发时的提示与可发现性（IDE 体验更好）
  • 更早暴露类型相关 bug
  • 更易重构和维护大型工程

二、环境与安装​

安装 TypeScript​

在项目目录中初始化：

mkdir my-ts-app
cd my-ts-app
npm init -y

安装 TypeScript：

npm i -D typescript
npx tsc --version

初始化 tsconfig.json​

npx tsc --init

tsconfig.json 用于配置编译选项（如 target、module、是否开启严格模式等）。

三、类型系统入门​

基本类型​

let name: string = 'Alice'
let age: number = 18
let isOk: boolean = true
let nothing: null = null
let undef: undefined = undefined

let anyValue: any = 123
let unknownValue: unknown = 'text'

其中：

  • any：不做类型约束（慎用）
  • unknown：未知类型，使用前需要判断

联合类型与类型收窄​

function formatId(id: number | string) {
  if (typeof id === 'number') return `#${id.toFixed(0)}`
  return `#${id}`
}

四、接口与类型别名​

接口（interface）​

interface User {
  id: string
  name: string
  email?: string
}

类型别名（type）​

type Point = {
  x: number
  y: number
}

它们都能描述对象结构，实际项目中可以按团队习惯选择使用。

五、泛型与高级类型​

泛型函数​

function wrap<T>(value: T) {
  return { value }
}

const res = wrap(123) // T = number

工具类型（内置）​

常见工具类型：

type PartialUser = Partial<User>
type ReadonlyUser = Readonly<User>
type PickUser = Pick<User, 'id' | 'name'>
type RecordMap = Record<string, number>

六、类与模块​

类（class）​

class Person {
  constructor(public name: string) {}

  sayHello() {
    return `hello, ${this.name}`
  }
}

模块（import / export）​

src/user.ts：

export interface User {
  id: string
  name: string
}

src/main.ts：

import type { User } from './user'

const u: User = { id: '1', name: 'Alice' }
console.log(u)

七、编译与 tsconfig​

基本编译命令​

npx tsc

常用的方式是在 package.json 配置脚本：

{
  "scripts": {
    "build": "tsc -p tsconfig.json"
  }
}

严格模式（建议逐步开启）​

tsconfig.json 中常见选项：

  • strict：开启一组严格检查
  • noImplicitAny：禁止隐式 any

新手建议不要一口气全开，但可以从最基础的开始。

八、与 Node.js 结合：Express 示例（TS）​

安装依赖​

npm i express
npm i -D @types/express ts-node nodemon

创建 src/server.ts：

import express from 'express'

const app = express()
app.use(express.json())

app.get('/health', (_req, res) => {
  res.json({ ok: true })
})

app.post('/echo', (req, res) => {
  res.json({ received: req.body })
})

app.listen(3000, () => {
  console.log('server running at http://localhost:3000')
})

启动（开发模式）：

nodemon --exec ts-node src/server.ts

九、常见工程化：lint/format​

工程化不是“越多越好”，但至少应做到：

  • 统一格式（Prettier）
  • 基于类型的检查与规则（ESLint + TypeScript）

你可以先从 prettier 开始，后续再加 ESLint。

十、测试与构建​

测试思路​

常用方案：

  • 单元测试：Jest / Vitest
  • 集成测试：supertest（Express）

这里建议你先跑通：

  1. 把业务逻辑从路由中抽离成函数
  2. 对函数进行单测

十一、最佳实践与小结​

最佳实践​

  • 尽量使用明确的类型（至少在边界：入参出参）
  • 使用泛型提升复用
  • 开启 strict（或逐步开启相关严格选项）
  • 把业务逻辑拆分成可测试的模块

小结​

  • TypeScript 通过类型系统增强可靠性
  • 接口、类型别名、联合类型与泛型是核心能力
  • tsconfig 决定编译策略
  • 与 Node.js 结合可直接构建 API（Express 示例）

十二、学习路径小结​

  1. 跑通 tsc 编译流程，理解输出与模块形式
  2. 掌握基础类型、联合类型与类型收窄
  3. 学会接口、泛型与常见工具类型
  4. 结合 Express 写一个最小 API
  5. 从抽离业务逻辑开始加测试，逐步形成工程习惯

遇到问题可查阅 TypeScript 官方文档。

Loading Comments...