TypeScript 最大的特点就是在 JavaScript 的基础上增加了静态类型。给变量、函数参数和返回值加上类型标注后，很多错误在写代码的阶段就能被发现，而不是等到页面报错才排查。这篇入门教程带你掌握最常用的类型标注写法。

为什么需要类型标注

先看一段 JavaScript：

function add(a, b) {
  return a + b;
}
add(1, "2"); // "12"，不报错，但结果往往不是你想要的

add(1, "2") 会悄悄返回字符串 "12"，这种问题在项目变大后很难排查。TypeScript 在编译阶段就能拦住它：

function add(a: number, b: number): number {
  return a + b;
}
add(1, "2"); // 报错：string 类型的参数不能赋给 number 类型的参数

类型标注的写法很简单：变量名: 类型，参数和返回值都一样。

常用的基础类型

let age: number = 18;
let name: string = "小明";
let isStudent: boolean = true;
let hobbies: string[] = ["读书", "跑步"];   // 字符串数组
let pair: [string, number] = ["身高", 175]; // 元组：固定长度和类型

let nothing: null = null;
let notFound: undefined = undefined;

变量先声明后赋值时，也可以只声明类型：

let title: string;
title = "TypeScript 入门"; // 正确
title = 123;               // 报错：不能把 number 赋给 string

类型推断：能省则省

TypeScript 很聪明，初始赋值后能自动推断类型，标注可以省略：

let count = 10; // 自动推断为 number
count = "10";   // 依然报错，效果和 let count: number = 10 一样

function double(n: number) {
  return n * 2; // 返回值自动推断为 number
}

推荐做法：函数参数必须标注，返回值让 TS 推断，简洁又安全。

函数与对象类型

函数标注参数和返回值，对象则用「形状」来描述：

function greet(name: string, greeting?: string): string {
  return `${greeting ?? "你好"}，${name}`;
}
greet("小明");           // "你好，小明"
greet("小红", "早上好");  // "早上好，小红"。? 表示可选参数

let user: { name: string; age: number } = {
  name: "小明",
  age: 18,
};
user.age = 19;    // 正确
user.age = "二十"; // 报错：类型不匹配

对象类型字段多的时候，通常用 interface 或 type 给它起个名字，这个后面再展开讲。

联合类型：多个类型二选一

一个值可能是多种类型时，用 | 分隔：

let id: string | number;
id = "abc123"; // 正确
id = 42;       // 正确
id = true;     // 报错

function format(value: string | number): string {
  return value.toString();
}
format(100);  // "100"
format("hi"); // "hi"

小结

  • 类型标注语法是 变量: 类型，覆盖变量、参数和返回值
  • 常用类型：number、string、boolean、数组、元组、null、undefined
  • 初始化后 TS 能自动推断类型，不必处处手写
  • 对象用「形状」描述，字段多了交给 interface
  • 一个值有多种可能时用联合类型 |