TypeScript 核心要点笔记

前端基础 · TS 入门笔记

TypeScript 核心要点

掌握这些，开启 TS 之旅

2023 年前端必备技能 — TS 让你的代码更可靠

1为什么要学 TS

JavaScript 本身是弱类型脚本语言，灵活但项目大了以后，后期维护困难，还易出现不经意的问题。TypeScript 就是为解决此问题而生，它已有 5 年+ 历史，版本已到 5.x，生态健全，使用不复杂，是前端进阶的必备技能。

2如何开始使用 TS

两种上手方式：

本地安装：通过 npm 安装使用
官方演练场（Playground）：适合学习语法，右侧直接看运行结果，还支持版本切换和配置

学习初期建议直接用官方 Playground，免配置、反馈即时。

3三种类型操作方式

① 类型推断（Type Inference）

TS 会根据变量初始值自动推断类型。例如给变量设字符串初始值，后续不能赋数值。

let str = "hello";
str = 10; // ❌ 报错：number 不能赋给 string

② 类型注解（Type Annotation）

通过冒号手动显式声明类型，更直观、推荐使用。

let str: string = "hello";
let num: number;  // 先声明后赋值
num = 10;         // ✅ OK

③ 类型断言（Type Assertion）

当你比 TS 更确定变量类型时可使用，需谨慎，确保不会出错。

let result = numberArray.find(item => item > 2) as number;

4TS 基本类型

string

number

boolean

null

undefined

它们都很常用，其中 null 往往配合联合类型（Union Types）一起使用，通过竖线 | 连接多个类型。

let value: string | null = null;
// 开启 strictNullChecks 后，null 不能隐式赋给其他类型

字面量类型限定

除了类型，还可以限定具体值：只能赋值为给定值之一。

let v: 1 | 2 | 3 = 1;
v = 5; // ❌ 报错

5常用复合类型

数组（Array）

限定数组内元素类型，存储不同类型的数据在开发中不建议。

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

元组（Tuple）

限制元素个数和每个位置上的类型。

let t: [number, string, number] = [1, "a", 2];
// 可选元素用 ？：如 [number, string?, number?]

枚举（Enum）

定义一组命名常量，默认从 0 开始分配，但双向映射：既可用名称取值，也可用值取名称。

enum MyEnum { A, B, C }
MyEnum.A;   // 0
MyEnum[0];  // "A"

void 类型

表示“没有返回值”，主要用于函数返回类型。

function log(): void {
  console.log("no return");
}

6函数中的类型约束

参数需要声明类型，返回值也可以标注；支持可选参数、默认值和剩余参数。

function myFn(a: number, b?: number, ...rest: number[]): number {
  return a;
}
function greet(name: string = "world"): string {
  return `hi, ${name}`;
}

剩余参数 Rest

剩余参数是数组类型，需写明元素类型。

function sum(...nums: number[]): number {
  return nums.reduce((a,b) => a+b);
}

7自定义类型：interface 与 type

接口（interface）

用于定义对象的形状结构，方便约束对象属性。

interface Obj {
  name: string;
  age: number;
}
const user: Obj = { name: "Alice", age: 20 };

类型别名（type）

给联合类型等起一个别名，方便复用。

type MyUserName = string | number;
let u: MyUserName = "Alice";
u = 100;

8泛型（Generics）

让函数/组件通用于多种类型，而不是硬编码一种。在函数名后用 <T> 声明类型占位符。

function myFn<T>(a: T, b: T): T[] {
  return [a, b];
}
myFn<number>(1, 2);        // ✅
myFn<string>("a", "b");    // ✅

TS 也支持泛型推断：不显式写明类型参数也可，会根据传入值推断。

若不指定类型直接写 "a" 和 1，TS 会按第一次推断的 T 来统一约束。

TS 让编程更可靠，其实并不复杂
多动手写，轻松掌握