Vue 中使用 typescript
什么是typescript
typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。
typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。
Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。
安装typescript
npm install -g typescript tsc greeter.ts
举个栗子
左右对比可以看出typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。
greeter.ts
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
greeter.js
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = { firstName: "Jane", lastName: "User" };
为什么需要使用它？
优势：
- 静态类型检查
- IDE 智能提示
- 代码重构
- 可读性
1. 静态类型检查
静态类型检查首要优点就是能尽早的发现逻辑错误，而不是上线之后才发现。
1.1 类型分析
传参过程字段错误，或类型错误使用。（进行参数标注后，在编码过程中即可检查出错误。)
1.2 类型推断：函数的返回值可通过ts类型推断得出.这一步骤是 在编译时进行
在编译时进行类型分析
example：
eg1: 我在使用ts写vue-router 的 动态路径参数时就发现了一个问题, 动态路径参数 以冒号开头 path: '/user/:id',我们会误认为id为一个number,如果使用ts你将得到提示 我们应该传入一个string类型的id. 传入一个number类型的id可能并不会出错,js会对它进行隐式类型转换,但是传入一个string会使它更安全和规范.