ES6ES6ECMAScript 2015是 JavaScript 语言的一次重大版本升级引入了大量现代化特性彻底改变了前端开发方式也是 Vue3、TypeScript、模块化开发的基础。后续ES7/8小版本代码更简洁箭头函数、解构赋值等特性减少冗余代码支持模块化import/export替代传统的全局变量 / 闭包方式增强数据处理新增Set/Map数据结构、数组 / 对象扩展方法支持面向对象class语法简化原型链编程异步编程优化Promise解决回调地狱后续 ES7/8 的async/await基于此。ES6核心特性变量声明let/const替代 varES6 之前用var声明变量存在变量提升、函数级作用域、可重复声明等问题let/const解决了这些痛点。箭头函数简化函数写法同时解决this指向问题箭头函数无自己的this继承外层作用域的this。解构赋值快速从数组 / 对象中提取值赋值给变量简化代码。模板字符串替代传统字符串拼接支持换行、嵌入变量 / 表达式。语法用反引号包裹变量 / 表达式用${}嵌入。模块化import/exportES6 原生支持模块化是前端工程化的基础扩展运算符...将数组 / 对象展开为多个元素 / 属性常用于复制、合并、传参类class简化原型链编程提供更清晰的面向对象语法。Promise异步编程解决回调地狱问题是async/await的基础Vue 中请求接口必用数组扩展方法ES6 新增了大量实用的数组方法简化数据处理TypescritptTypeScript简称 TS是 JavaScriptJS的超集核心是在 JS 基础上增加了静态类型系统.既能兼容所有 JS 语法又能在编译阶段提前发现类型错误大幅提升大型项目如 Vue3/Vben的可维护性和开发效率。提前报错编译阶段发现类型错误如把字符串传给数字参数避免运行时崩溃代码提示编辑器VSCode提供精准的自动补全、类型提示减少查文档时间代码可读性类型注解让函数 / 变量的用途一目了然尤其适合团队协作兼容生态完全兼容 JS可渐进式接入现有 JS 项目可逐步改为 TS。环境准备安装 TSnpm install -g typescript全局安装初始化 TS 配置在项目根目录执行tsc --init生成tsconfig.json核心配置文件编译 TS 文件tsc 文件名.ts会生成对应的.js文件Vue 项目中无需手动编译Vue CLI/Vite 已内置 TS 编译能力直接写.vue/.ts文件即可。script setup langts基础Vue3 单文件组件中添加langts即可启用 TS结合defineProps/defineEmits约束类型核心配置tsconfig.json 关键项{ compilerOptions: { target: ES6, // 编译目标 JS 版本如 ES6/ESNext module: ESNext, // 模块系统如 ESModule/CommonJS strict: true, // 开启严格模式必开核心类型校验 jsx: preserve, // 支持 JSXReact/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 20boolean布尔值const isLogin: boolean truearray数组const list: number[] [1,2,3]或const list: Arraynumber [1,2,3]object对象不推荐直接用const user: object { name: 张三 }null/undefined空值 / 未定义const n: null nullany任意类型禁用失去 TS 意义const x: any 任意值void无返回值函数function fn(): void { console.log(hi) }never永不返回如抛出错误function error(): never { throw new Error(错了) }高级类型接口interfaceinterface是 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 };高级类型类型别名typetype是另一种类型定义方式功能和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的区别特性interfacetype扩展性可多次定义自动合并不可重复定义需用交叉类型适用场景约束对象 / 函数结构定义基本类型、联合 / 交叉类型继承用 extends 继承用 交叉实现继承泛型Generic泛型是 TS 中复用类型逻辑的核心解决「类型不固定但需要约束」的问题如数组、函数、组件的通用类型。类型断言Type Assertion类型断言用于「告诉 TS 我比你更清楚这个值的类型」常用于类型不确定但开发者明确的场景如 DOM 元素、接口返回值语法值 as 类型推荐或类型值Vue 中不推荐和 JSX 冲突。ES6