TypeScript 学习指南

什么是 TypeScript

TypeScript 是 JavaScript 的超集，添加了静态类型系统。由 Microsoft 开发维护。

核心特点

静态类型检查：编译时发现错误
智能提示：更好的 IDE 支持
面向对象：类、接口、泛型等
兼容 JavaScript：渐进式采用

安装

# 全局安装
yarn global add typescript

# 项目安装
yarn add -D typescript

# 查看版本
tsc --version

初始化项目

# 生成 tsconfig.json
tsc --init

# 编译 TypeScript
tsc index.ts

# 监听模式
tsc --watch

第一个程序

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const message = greet('TypeScript');
console.log(message);

# 编译
tsc hello.ts

# 运行
node hello.js

使用 ts-node

# 安装
yarn add -D ts-node

# 直接运行
ts-node hello.ts

基础类型

原始类型

// 字符串
let name: string = 'John';

// 数字
let age: number = 25;

// 布尔值
let isActive: boolean = true;

// null 和 undefined
let n: null = null;
let u: undefined = undefined;

// symbol
let sym: symbol = Symbol('key');

// bigint
let big: bigint = 100n;

数组

// 方式1
let numbers: number[] = [1, 2, 3];

// 方式2
let strings: Array<string> = ['a', 'b', 'c'];

// 只读数组
let readonlyArr: readonly number[] = [1, 2, 3];

元组

// 固定长度和类型
let tuple: [string, number] = ['John', 25];

// 可选元素
let optionalTuple: [string, number?] = ['John'];

// 剩余元素
let restTuple: [string, ...number[]] = ['John', 1, 2, 3];

枚举

// 数字枚举
enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

let dir: Direction = Direction.Up;

// 字符串枚举
enum Status {
  Success = 'SUCCESS',
  Error = 'ERROR',
  Pending = 'PENDING'
}

// 常量枚举
const enum Color {
  Red,
  Green,
  Blue
}

any 和 unknown

// any：关闭类型检查
let value: any = 'hello';
value = 123;
value.foo(); // 不报错

// unknown：类型安全的 any
let val: unknown = 'hello';
// val.toUpperCase(); // 报错

// 需要类型检查
if (typeof val === 'string') {
  val.toUpperCase(); // 正确
}

void 和 never

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

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

function infiniteLoop(): never {
  while (true) {}
}

类型推断

// 自动推断为 number
let num = 123;

// 自动推断为 string[]
let arr = ['a', 'b', 'c'];

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

类型断言

// 方式1：as
let value: unknown = 'hello';
let length = (value as string).length;

// 方式2：尖括号（JSX 中不可用）
let len = (<string>value).length;

// 非空断言
let name: string | null = getName();
let upper = name!.toUpperCase();

联合类型和交叉类型

// 联合类型
let value: string | number;
value = 'hello';
value = 123;

function print(id: string | number) {
  if (typeof id === 'string') {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

// 交叉类型
interface Person {
  name: string;
}

interface Employee {
  id: number;
}

type Staff = Person & Employee;

let staff: Staff = {
  name: 'John',
  id: 1001
};

字面量类型

// 字符串字面量
let direction: 'left' | 'right' | 'up' | 'down';
direction = 'left'; // 正确
// direction = 'center'; // 错误

// 数字字面量
let dice: 1 | 2 | 3 | 4 | 5 | 6;

// 布尔字面量
let success: true;

类型别名

// 基础类型别名
type ID = string | number;

// 对象类型别名
type User = {
  id: ID;
  name: string;
  age: number;
};

// 函数类型别名
type Callback = (data: string) => void;

学习路径

基础类型 → 掌握所有基本类型
接口和类型 → 定义复杂数据结构
函数 → 函数类型和重载
类 → 面向对象编程
泛型 → 编写可复用代码
高级类型 → 条件类型、映射类型
装饰器 → 元编程
模块 → 代码组织
实战 → 配合 React/Vue 使用

配置文件

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}