什么是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" };

为什么需要使用它？

优势：

1. 静态类型检查
2. IDE 智能提示
3. 代码重构
4. 可读性

1. 静态类型检查

静态类型检查首要优点就是能尽早的发现逻辑错误，而不是上线之后才发现。
1.1 类型分析
传参过程字段错误，或类型错误使用。（进行参数标注后，在编码过程中即可检查出错误。)
1.2 类型推断：函数的返回值可通过ts类型推断得出.这一步骤是 在编译时进行
在编译时进行类型分析

example：
eg1: 我在使用ts写vue-router 的 动态路径参数时就发现了一个问题, 动态路径参数 以冒号开头 path: '/user/:id',我们会误认为id为一个number,如果使用ts你将得到提示 我们应该传入一个string类型的id. 传入一个number类型的id可能并不会出错,js会对它进行隐式类型转换,但是传入一个string会使它更安全和规范.

eg2: 个人使用后的效果

interface Person {     firstName: string;     lastName: string; }  function greeter(person: Person): string {     return "Hello, " + person.firstName + " " + person.lastName; }  let user = { firstName: 1223, lastname: "User" };  greeter(user);

2.智能补全

在编写代码时ide就会提示函数签名.

interface Person {     firstName: string;     lastName: string; } /**  * 问候语句  * @param {Person} person  * @returns {string}  */ function greeter(person: Person): string {     return "Hello, " + person.firstName + " " + person.lastName; }  /**  * hello word!  *  * 
                        
关键字：