ES6
ES6（ECMAScript 2015）是 JavaScript 语言的一次重大版本升级，引入了大量现代化特性，彻底改变了前端开发方式，也是 Vue3、TypeScript、模块化开发的基础。后续ES7/8小版本
- 代码更简洁：箭头函数、解构赋值等特性减少冗余代码；
- 支持模块化 ：
import/export替代传统的全局变量 / 闭包方式； - 增强数据处理 ：新增
Set/Map数据结构、数组 / 对象扩展方法； - 支持面向对象 ：
class语法简化原型链编程； - 异步编程优化 ：
Promise解决回调地狱（后续 ES7/8 的async/await基于此）。
ES6核心特性
变量声明：let/const（替代 var）：ES6 之前用 var 声明变量存在变量提升 、函数级作用域 、可重复声明 等问题，let/const 解决了这些痛点。
箭头函数（=>）：简化函数写法，同时解决 this 指向问题（箭头函数无自己的 this，继承外层作用域的 this）。
解构赋值：快速从数组 / 对象中提取值，赋值给变量，简化代码。
模板字符串（``）：替代传统字符串拼接，支持换行、嵌入变量 / 表达式。语法 ：用反引号 ````` 包裹，变量 / 表达式用 ${} 嵌入。
模块化（import/export）：ES6 原生支持模块化，是前端工程化的基础
扩展运算符（...）：将数组 / 对象展开为多个元素 / 属性，常用于复制、合并、传参
类（class）：简化原型链编程，提供更清晰的面向对象语法。
Promise（异步编程）：解决回调地狱问题，是 async/await 的基础，Vue 中请求接口必用
数组扩展方法：ES6 新增了大量实用的数组方法，简化数据处理
Typescritpt
TypeScript（简称 TS）是 JavaScript（JS）的超集 ，核心是在 JS 基础上增加了静态类型系统.
既能兼容所有 JS 语法，又能在编译阶段提前发现类型错误，大幅提升大型项目（如 Vue3/Vben）的可维护性和开发效率。
- 提前报错：编译阶段发现类型错误（如把字符串传给数字参数），避免运行时崩溃；
- 代码提示：编辑器（VSCode）提供精准的自动补全、类型提示，减少查文档时间；
- 代码可读性：类型注解让函数 / 变量的用途一目了然，尤其适合团队协作；
- 兼容生态：完全兼容 JS，可渐进式接入（现有 JS 项目可逐步改为 TS）。
环境准备
- 安装 TS：
npm install -g typescript（全局安装）； - 初始化 TS 配置：在项目根目录执行
tsc --init，生成tsconfig.json（核心配置文件）； - 编译 TS 文件：
tsc 文件名.ts（会生成对应的.js文件）； - Vue 项目中无需手动编译：Vue CLI/Vite 已内置 TS 编译能力，直接写
.vue/.ts文件即可。 <script setup lang="ts">基础Vue3 单文件组件中，添加lang="ts"即可启用 TS，结合defineProps/defineEmits约束类型：
核心配置（tsconfig.json 关键项）
{
"compilerOptions": {
"target": "ES6", // 编译目标 JS 版本（如 ES6/ESNext）
"module": "ESNext", // 模块系统（如 ESModule/CommonJS）
"strict": true, // 开启严格模式（必开！核心类型校验）
"jsx": "preserve", // 支持 JSX（React/Vue 项目用）
"moduleResolution": "node", // 模块解析方式（Node 风格）
"baseUrl": ".", // 基础路径
"paths": { "@/*": ["src/*"] }, // 路径别名（Vue 项目常用）
"skipLibCheck": true, // 跳过第三方库类型检查（提升编译速度）
"esModuleInterop": true // 兼容 CommonJS/ESModule 模块
},
"include": ["src/**/*"], // 要编译的文件
"exclude": ["node_modules"] // 排除的文件
}TS核心语法
基础类型注解
TS 为 JS 原生类型增加了类型注解 ，格式：变量名: 类型 = 值
| TS 类型 | 说明 | 示例 |
|---|---|---|
string |
字符串 | const name: string = '张三' |
number |
数字（整数 / 浮点数） | const age: number = 20 |
boolean |
布尔值 | const isLogin: boolean = true |
array |
数组 | const list: number[] = [1,2,3] 或 const list: Array<number> = [1,2,3] |
object |
对象（不推荐直接用） | const user: object = { name: '张三' } |
null/undefined |
空值 / 未定义 | const n: null = null |
any |
任意类型（禁用！失去 TS 意义） | const x: any = '任意值' |
void |
无返回值（函数） | function fn(): void { console.log('hi') } |
never |
永不返回（如抛出错误） | function error(): never { throw new Error('错了') } |
高级类型：接口（interface）
interface 是 TS 最核心的类型工具，用于约束对象 / 函数的结构，Vue 中常用于约束 API 参数、组件 Props 等
约束对象
// 定义接口（首字母大写）
interface User {
id: number; // 必选属性
name: string;
age?: number; // 可选属性（加 ?）
readonly gender: string; // 只读属性（不可修改）
}
// 使用接口约束对象
const user: User = {
id: 1,
name: '张三',
gender: '男' // age 可选，可省略
};
user.gender = '女'; // 报错：只读属性不能修改约束函数
interface LoginFn {
(username: string, password: string): boolean;
}
// 实现函数
const login: LoginFn = (name: string, pwd: string): boolean => {
return name === 'admin' && pwd === '123456';
};接口继承（复用类型）
interface BaseUser {
id: number;
name: string;
}
// 继承 BaseUser 的属性
interface AdminUser extends BaseUser {
role: string; // 新增属性
}
const admin: AdminUser = {
id: 2,
name: '管理员',
role: 'admin'
};高级类型：类型别名（type）
type 是另一种类型定义方式，功能和 interface 类似，但更灵活（可定义基本类型、联合类型等）。
// 定义基本类型别名
type Age = number;
const userAge: Age = 25;
// 定义对象类型别名
type User = {
id: number;
name: string;
};
// 联合类型（多个类型二选一）
type Status = 'success' | 'error' | 'loading';
const status: Status = 'success'; // 只能选这三个值
// 交叉类型（合并多个类型）
type BaseInfo = { id: number };
type UserInfo = { name: string };
type FullUser = BaseInfo & UserInfo; // 同时包含 id 和 name
const fullUser: FullUser = { id: 1, name: '张三' };interface和type的区别
| 特性 | interface | type |
|---|---|---|
| 扩展性 | 可多次定义，自动合并 | 不可重复定义，需用交叉类型 |
| 适用场景 | 约束对象 / 函数结构 | 定义基本类型、联合 / 交叉类型 |
| 继承 | 用 extends 继承 | 用 & 交叉实现继承 |
泛型（Generic）
泛型是 TS 中复用类型逻辑的核心，解决「类型不固定但需要约束」的问题（如数组、函数、组件的通用类型）。
类型断言（Type Assertion
类型断言用于「告诉 TS 我比你更清楚这个值的类型」，常用于类型不确定但开发者明确的场景（如 DOM 元素、接口返回值）语法：值 as 类型（推荐）或 <类型>值（Vue 中不推荐，和 JSX 冲突）。