技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

基础类型

原始类型

string

let name: string = 'John';
let greeting: string = `Hello, ${name}`;
let multiline: string = `
  第一行
  第二行
`;

number

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: number = 1_000_000; // 数字分隔符

boolean

let isDone: boolean = false;
let isActive: boolean = true;

null 和 undefined

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

// strictNullChecks 关闭时
let name: string = null; // 允许
let age: number = undefined; // 允许

// strictNullChecks 开启时
let name: string = null; // 错误
let age: number | undefined = undefined; // 正确

数组

基础数组

// 类型[]
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ['a', 'b', 'c'];

// Array<类型>
let nums: Array<number> = [1, 2, 3];
let strs: Array<string> = ['a', 'b'];

只读数组

let arr: readonly number[] = [1, 2, 3];
// arr.push(4); // 错误
// arr[0] = 10; // 错误

let readonlyArr: ReadonlyArray<string> = ['a', 'b'];

多维数组

let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

let cube: number[][][] = [
  [[1, 2], [3, 4]],
  [[5, 6], [7, 8]]
];

元组

基础元组

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

let point: [number, number] = [10, 20];

// 访问元素
let name = tuple[0]; // string
let age = tuple[1];  // number

可选元素

let tuple: [string, number?] = ['John'];
tuple = ['John', 25];

剩余元素

let tuple: [string, ...number[]] = ['John', 1, 2, 3, 4];

let mixed: [boolean, ...string[], number] = [true, 'a', 'b', 'c', 100];

只读元组

let tuple: readonly [string, number] = ['John', 25];
// tuple[0] = 'Jane'; // 错误

元组解构

let tuple: [string, number, boolean] = ['John', 25, true];

let [name, age, isActive] = tuple;

枚举

数字枚举

enum Direction {
  Up,      // 0
  Down,    // 1
  Left,    // 2
  Right    // 3
}

let dir: Direction = Direction.Up;
console.log(dir); // 0

// 自定义起始值
enum Status {
  Pending = 1,
  Success,  // 2
  Error     // 3
}

// 自定义所有值
enum HttpCode {
  OK = 200,
  NotFound = 404,
  ServerError = 500
}

字符串枚举

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

let dir: Direction = Direction.Up;
console.log(dir); // 'UP'

异构枚举

enum Mixed {
  No = 0,
  Yes = 'YES'
}

常量枚举

const enum Color {
  Red,
  Green,
  Blue
}

let color = Color.Red; // 编译后直接替换为 0

枚举成员

enum FileAccess {
  None,
  Read = 1 << 1,    // 2
  Write = 1 << 2,   // 4
  ReadWrite = Read | Write  // 6
}

any

// 关闭类型检查
let value: any = 'hello';
value = 123;
value = true;
value = {};
value = [];

// 可以调用任何方法
value.foo();
value.bar.baz();

// 数组
let list: any[] = [1, 'hello', true, {}];

unknown

// 类型安全的 any
let value: unknown = 'hello';

// 不能直接使用
// value.toUpperCase(); // 错误
// value(); // 错误

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

// 类型断言
(value as string).toUpperCase();

void

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

// void 类型变量只能赋值 undefined
let unusable: void = undefined;

never

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

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

// 类型守卫
function check(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  } else if (typeof value === 'number') {
    return value.toFixed(2);
  }
  
  // value 类型为 never
  const exhaustiveCheck: never = value;
  return exhaustiveCheck;
}

object

// 非原始类型
let obj: object = {};
obj = [];
obj = () => {};

// 更具体的对象类型
let user: { name: string; age: number } = {
  name: 'John',
  age: 25
};

Symbol

let sym1: symbol = Symbol('key');
let sym2: symbol = Symbol('key');

console.log(sym1 === sym2); // false

// 作为对象属性
let obj = {
  [sym1]: 'value'
};

BigInt

let big1: bigint = 100n;
let big2: bigint = BigInt(100);

// 运算
let sum: bigint = big1 + big2;

类型推断

// 自动推断
let num = 123;        // number
let str = 'hello';    // string
let bool = true;      // boolean
let arr = [1, 2, 3];  // number[]

// 最佳通用类型
let mixed = [1, 'hello', true]; // (string | number | boolean)[]

// 上下文类型
window.onmousedown = function(event) {
  // event 自动推断为 MouseEvent
  console.log(event.button);
};

类型断言

// as 语法
let value: unknown = 'hello';
let length: number = (value as string).length;

// 尖括号语法
let len: number = (<string>value).length;

// 双重断言
let num = (value as unknown as number);

// 非空断言
function getName(): string | null {
  return 'John';
}

let name = getName();
let upper = name!.toUpperCase(); // 断言不为 null

字面量类型

// 字符串字面量
let direction: 'left' | 'right' | 'up' | 'down';
direction = 'left';

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

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

// 模板字面量类型
type EventName = `on${Capitalize<string>}`;
let event: EventName = 'onClick';
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
TypeScript 学习指南
Next
函数