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会使它更安全和规范.
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! * * @param {string} word * @returns {string} */ function Hello(word: string): string { return "hello," + word; } export { greeter, Hello };
直接将这个ts文件引入到其他ts文件中，不仅补全了所有的参数类型，还告诉你需要填入一个参数，并且你只有填入一个Person类型的对象才不会报错。(智能补全和参数校验）
动态一时爽,重构火葬场.
typescript 在重构上的优势，我们主要从三方面说明。
重命名符号，可将一切引用的地方都进行修改。
在vs code 中如果我们想修改函数、变量或者类的名称,我们可以使用重命名符号的功能,在当前项目中正确的修改所有的引用.这个既可以在ts中使用,也可以在js中使用，而它的底层实现都是依靠ts 的语法分析器实现的。
自动更新引用路径（vs code）。
在重构的过程中，我们可能需要移动文件的路径，这往往会导致其他地方的import失效，这时候vs code提供了自动更新引用路径的功能。它的底层实现也是依靠ts 的语法分析器实现的。
校验函数签名。
有时候我们会重构类或函数的签名，如果有引用到的地方忘记修改，除了运行时候能发现，其他时候往往难以察觉，且 ESLint 也只能是排查简单的问题，所以出了BUG会非常麻烦。 而 TypeScript 不一样，在编码时就能及时的发现哪里错了，哪里应该改动但没有修改。
[函数签名 MDN][5]
4. 可读性可读性上，TypeScript 明显占优，查看开源代码时，如果注释不是很完善，往往会看的云里雾里，而 TypeScript 在同等条件下，至少有个类型，能让自己更容易明白代码的参数、返回值和意图。
TS+Vue初探
配置
在正式开发之前，我们需要了解一些基本的配置。
1.tsconfig.json 是 ts 项目的编译选项配置文件. 在 ts 项目中如果你不添加这份文件，ts 会使用默认的配置. 扫描二维码获取配置项目。
ts-loader：Webpack 的TypeScript 加载器，就是为了让 webpack 编译 .ts .tsx文件。
TSLint：.ts .tsx文件的代码风格检查工具。（作用类似于ESLint）