目录
前言
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
TypeScript 核心概念
基本类型与高级类型
- 基本类型：包含
string、number、boolean、null、undefined，是 TypeScript 类型系统的基础单元，用于明确变量、参数等的基础数据形态。 - 联合类型与交叉类型
- 联合类型：使用
|符号组合多种类型，如type MyType = string | number;，表示变量类型可以是string或者number，为类型取值提供灵活选择。 - 交叉类型：借助
&符号合并多个类型，例如type MyType = { name: string } & { age: number };，要求变量类型同时满足多个类型结构的特性，常用于对象类型的组合扩展。
- 联合类型：使用
- 类型别名与接口
- 类型别名：通过
type关键字自定义类型，像type MyType = string | number;，可将复杂或常用的类型组合赋予一个简洁名称，方便复用。 - 接口：利用
interface定义对象结构，如interface Person { name: string; age: number; }，清晰描述对象应具备的属性及对应类型，是面向对象编程思想在类型约束中的体现。
- 类型别名：通过
- 泛型与条件类型
- 泛型：以
<T>形式实现类型复用，比如function identity<T>(arg: T): T { return arg; }，函数的入参和返回值类型可动态适配，增强代码通用性，减少重复类型定义。 - 条件类型：依靠
extends进行类型判断，如type IsString<T> = T extends string ? 'Yes' : 'No';，根据传入类型T是否满足string类型，返回不同字面量类型，实现类型的条件分支处理。
- 泛型：以
常用内置工具类型
- Partial：作用是将指定类型的所有属性转为可选状态，示例如下：
type Person = { name: string; age: number };
type PartialPerson = Partial<Person>;
// 结果：{ name?: string; age?: number }
- Pick：能够从已有类型中选取指定属性构建新类型，示例：
type Person = { name: string; age: number; address: string };
type NameAndAge = Pick<Person, 'name' | 'age'>;
// 结果：{ name: string; age: number }
- Readonly：把类型的所有属性设置为只读，初始化后不可修改，示例：
type Person = { name: string; age: number };
type ReadonlyPerson = Readonly<Person>;
// 结果：{ readonly name: string; readonly age: number }
类型断言与类型守卫
- 类型断言：语法为
值 as 目标类型（JSX 环境推荐此写法，也可用<目标类型>值形式），用于手动指定值的类型，跳过 TypeScript 自动类型推导，示例：const value = someValue as string;，在明确值类型场景下，帮助 TypeScript 精准识别类型。 - 类型守卫：主要在运行时细化变量类型，常用
typeof或instanceof实现。以typeof为例：
function isString(value: unknown): value is string {
return typeof value === 'string';
}
调用 isString 函数后，TypeScript 可识别变量 value 为 string 类型，在条件判断逻辑中，精准约束变量类型，避免类型错误。
TypeScript 在 Vue3 中的应用
Vue3 中 TypeScript 的作用范围
defineProps与defineEmits：在 Vue3 组件里，用于显式定义props（组件接收的外部参数）和emits（组件触发的自定义事件）的类型，替代 Vue2 中相对松散的props类型写法（如props: { name: String }），借助 TypeScript 实现强类型校验，让组件输入输出更规范、可控 。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 深度融合，提升代码类型安全性与开发体验。