【TypeScript学习笔记】TypeScript 核心知识点

前言

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

TypeScript 核心概念

基本类型与高级类型

1. 基本类型：包含 string、number、boolean、null、undefined ，是 TypeScript 类型系统的基础单元，用于明确变量、参数等的基础数据形态。
2. 联合类型与交叉类型
   • 联合类型：使用 | 符号组合多种类型，如 type MyType = string | number; ，表示变量类型可以是 string 或者 number ，为类型取值提供灵活选择。
   • 交叉类型：借助 & 符号合并多个类型，例如 type MyType = { name: string } & { age: number }; ，要求变量类型同时满足多个类型结构的特性，常用于对象类型的组合扩展。
3. 类型别名与接口
   • 类型别名：通过 type 关键字自定义类型，像 type MyType = string | number; ，可将复杂或常用的类型组合赋予一个简洁名称，方便复用。
   • 接口：利用 interface 定义对象结构，如 interface Person { name: string; age: number; } ，清晰描述对象应具备的属性及对应类型，是面向对象编程思想在类型约束中的体现。
4. 泛型与条件类型
   • 泛型：以 <T> 形式实现类型复用，比如 function identity<T>(arg: T): T { return arg; } ，函数的入参和返回值类型可动态适配，增强代码通用性，减少重复类型定义。
   • 条件类型：依靠 extends 进行类型判断，如 type IsString<T> = T extends string ? 'Yes' : 'No'; ，根据传入类型 T 是否满足 string 类型，返回不同字面量类型，实现类型的条件分支处理。

常用内置工具类型

1. Partial：作用是将指定类型的所有属性转为可选状态，示例如下：

type Person = { name: string; age: number };
type PartialPerson = Partial<Person>; 
// 结果：{ name?: string; age?: number }

2. Pick：能够从已有类型中选取指定属性构建新类型，示例：

type Person = { name: string; age: number; address: string };
type NameAndAge = Pick<Person, 'name' | 'age'>; 
// 结果：{ name: string; age: number }

3. Readonly：把类型的所有属性设置为只读，初始化后不可修改，示例：

type Person = { name: string; age: number };
type ReadonlyPerson = Readonly<Person>; 
// 结果：{ readonly name: string; readonly age: number }

类型断言与类型守卫

1. 类型断言：语法为 值 as 目标类型（JSX 环境推荐此写法，也可用 <目标类型>值 形式），用于手动指定值的类型，跳过 TypeScript 自动类型推导，示例：const value = someValue as string; ，在明确值类型场景下，帮助 TypeScript 精准识别类型。
2. 类型守卫：主要在运行时细化变量类型，常用 typeof 或 instanceof 实现。以 typeof 为例：

function isString(value: unknown): value is string { 
    return typeof value === 'string'; 
}

调用 isString 函数后，TypeScript 可识别变量 value 为 string 类型，在条件判断逻辑中，精准约束变量类型，避免类型错误。

TypeScript 在 Vue3 中的应用

Vue3 中 TypeScript 的作用范围

1. defineProps 与 defineEmits：在 Vue3 组件里，用于显式定义 props（组件接收的外部参数）和 emits（组件触发的自定义事件）的类型，替代 Vue2 中相对松散的 props 类型写法（如 props: { name: String } ），借助 TypeScript 实现强类型校验，让组件输入输出更规范、可控 。
2. reactive 和 ref：Vue3 对这两个响应式 API 做了类型推导优化。ref 会依据初始值自动推导类型（如 ref('hello') 推导为 Ref<string> ）；reactive 能根据传入对象推导属性类型（如 reactive({ age: 18 }) 推导为 { age: number } ），也支持手动通过泛型强化类型约束，让响应式数据类型更清晰。

Props 和 Emits 的类型定义

// 定义 props 类型，通过 defineProps 泛型约束，明确接收的参数类型
const props = defineProps<{
    name: string;  // name 必须为 string 类型
    age: number;   // age 必须为 number 类型
}>();

// 定义 emits 类型，借助 defineEmits 约束事件名及参数类型
const emit = defineEmits<{
    (e: 'update', newValue: string): void;  // 事件名 'update'，携带 string 类型参数
}>();

defineProps<{ /* 类型结构 */ }> 利用泛型直接约束 props 形状，支持各类 TypeScript 类型语法；defineEmits<{ (e: 事件名, 参数...): void }> 通过函数调用签名，定义事件名与参数类型，调用 emit 触发事件时，会自动校验参数合法性。

Composition API 中的类型支持

// ref 类型约束，手动指定泛型为 number 类型，也可依赖自动推导
const count = ref<number>(0); 

// reactive 类型约束，通过泛型定义对象结构为 { name: string }
const state = reactive<{ name: string }>({ name: 'Vue' }); 

// watch 类型推导，自动识别监听的 count 为 number 类型，newValue 也相应推导为 number 类型
watch(count, (newValue) => { 
    console.log(`count changed to ${newValue}`); 
});

ref/reactive 既支持手动泛型声明，精准约束类型，也可自动推导简化代码；watch 等 API 会依据监听目标，自动推导参数类型，无需额外重复声明，让组合式 API 与 TypeScript 深度融合，提升代码类型安全性与开发体验。