当前位置：首页 > news >正文

TypeScript 快速上手指南：从 JavaScript 到类型安全

news 2026/6/5 21:36:19

TypeScript 快速上手指南：从 JavaScript 到类型安全

TypeScript 的核心价值在于为 JavaScript 添加了静态类型系统。它不会改变 JS 的运行逻辑，但能在代码运行前捕获大量潜在错误。本文通过最简代码示例，帮助你建立 TS 的核心认知。

1. 基础类型注解

TS 通过冒号:为变量、函数参数和返回值添加类型约束。

// 变量类型注解letusername:string="alice";letage:number=25;letisActive:boolean=true;// 错误示例：类型不匹配会在编译时报错// username = 123; // Error: Type 'number' is not assignable to type 'string'

记忆要点：类型注解是编译期检查，编译后的 JS 代码中所有类型信息都会被移除，不会影响运行时性能。

2. 数组与元组

数组有两种等价写法，元组则是固定长度和类型的数组。

// 数组：两种写法完全等价letnumbers:number[]=[1,2,3];letnames:Array<string>=["a","b"];// 元组：固定长度、固定位置类型letuser:[string,number]=["alice",25];// user = [25, "alice"]; // Error: 类型顺序必须严格匹配

记忆要点：普通数组元素类型统一，元组每个位置的类型独立且顺序固定，常用于函数返回多个值的场景。

3. 接口与可选属性

接口用于定义对象的结构契约，?表示属性可选。

interfaceUser{id:number;name:string;email?:string;// 可选属性}constvalidUser:User={id:1,name:"alice"};// email 可省略constinvalidUser:User={id:1};// Error: 缺少必需属性 name

记忆要点：接口只约束结构，不关心实现方式。只要对象包含所有必需属性且类型匹配，就视为合法，这被称为结构化类型系统。

4. 联合类型与类型收窄

联合类型允许一个值属于多种类型之一，配合条件判断可自动收窄类型。

functionformatId(id:string|number):string{if(typeofid==="string"){// 此处 TS 自动推断 id 为 stringreturnid.toUpperCase();}// 此处 TS 自动推断 id 为 numberreturnid.toString();}

记忆要点：联合类型用|连接，TS 会根据typeof、in、自定义类型守卫等条件自动缩小类型范围，无需手动断言。

5. 泛型：可复用的类型模板

泛型让类型成为参数，避免为每种类型重复编写逻辑。

// T 是类型占位符，调用时确定具体类型functionfirstItem<T>(arr:T[]):T|undefined{returnarr[0];}constnum=firstItem([1,2,3]);// 推断 T = numberconststr=firstItem(["a","b"]);// 推断 T = string

记忆要点：泛型类似函数的参数，只不过传递的是类型而非值。大多数场景下 TS 能自动推断泛型类型，无需显式标注。

6. 类型断言与非空断言

当开发者比编译器更了解类型时，可使用断言告知 TS。

// 类型断言：告诉 TS "我确定这是 HTMLInputElement"constinput=document.getElementById("myInput")asHTMLInputElement;input.value="hello";// 非空断言：告诉 TS "这个值一定不是 null/undefined"letmaybeName:string|undefined=getName();console.log(maybeName!.length);// ! 表示确信有值

记忆要点：断言是开发者的承诺，TS 不再做安全检查。仅在确信类型正确时使用，滥用会掩盖真实错误。

7. 实用工具类型速查

TS 内置了多个工具类型，避免手写复杂类型转换。

interfaceTodo{title:string;description:string;completed:boolean;}// Partial: 所有属性变为可选typeUpdateTodo=Partial<Todo>;// Pick: 选取部分属性typeTodoPreview=Pick<Todo,"title"|"completed">;// Omit: 排除部分属性typeTodoMeta=Omit<Todo,"description">;