关于javascript:TypeScript一-了解并快速入门

之前ES6合集曾经更新结束，趁热打铁明天来更新一下TypeScript，尽管曾经有很多的文档和pdf了，然而本人总结的就是本人的。

咱们之前曾经探讨过了JavaScript本身类型零碎的问题，如果对强弱类型以及强类型的益处有不太懂的，回顾看 JavaScript类型零碎 , 也介绍了Vue2.0源码中应用过的JavaScript类型查看器Flow，回顾看 Flow（一）—— JavaScript动态类型查看器，在Vue3.0的源码中曾经应用了TypeScript进行类型查看，很多的类库也应用了TypeScript，所以接下来简略的理解一下它。

概述

TypeScript是一个基于JavaScript之上的编程语言，是JavaScript的超集(superset)。和Flow一样，也是旨在解决JavaScript类型零碎的问题。下图咱们能够分明的看出：JavaScript、ES6与TypeScript的关系

TypeScript是动态类型的语言，在开发的时候应用TypeScript，然而浏览器环境是不反对TypeScript运行的，必须在生产环境进行编译成JavaScript才反对，所以须要提前进行编译。同时，TypeScript并不是强类型语言，因为须要兼容JavaScript的隐式类型转换，它只是提前了类型查看的机会，并没有让类型零碎自身变得更严格。

TypeScript优缺点

劣势

解决JavaScript类型零碎有余，在开发阶段就进行类型查看，能够大大提高代码的牢靠水平。
渐进式开发，如果不会TypeScript，一开始应用JavaScript也是反对的，能够学一个个性用一个个性。
TypeScript相比拟Flow的类型查看，性能更加弱小，生态也更加健全、欠缺。
逐步利用宽泛，Angular，Vue3.0都曾经开始应用了，TypeScript曾经成为前端畛域的第二语言。

毛病

语言自身多了很多概念，进步了学习老本
我的项目初期，引入TypeScript会减少一些老本，还须要进行编译解决

起步

TypeScript官网
TypeScript中文网

装置

npm-typescript

# yarnyarn add typescript --dev# npmnpm install -g typescript

装置实现后，在node-Modules/bin 目录下有tsc的文件，咱们能够应用tsc去将ts文件转化成js文件

创立文件

在src文件夹中增加一个后缀是.ts 的文件

// 轻易写写，先依照js原生写，应用ES6新个性const hello = (name: string) => {  console.log(name)}hello('TypeScript')

执行编译命令

# yarnyarn tsc hello-TypeScript.ts# npmtsc .\src\hello-TypeScript.ts

会在同名目录下增加一个编译后的js文件

// 曾经全副转换成es3语法(默认是es3)var hello = function (name) {    console.log(name);};hello('TypeScript');

配置文件

编译我的项目的时候，能够生成一个配置文件tsconfig.json

# yarnyarn tsc --init# npmtsc --init

外面属性是typescript编译器配置的一些选项，个别咱们须要什么改什么即可，上面是一些罕用的配置及其含意 TypeScript(二) —— 配置文件注解

有了配置文件之后，咱们应用tsc命令编译整个我的项目的时候，配置文件才会失效，如果是单个文件，则不会起作用。

# yarnyarn tsc# npmtsc

能够看到dist目录下有对应的js文件和js.map文件

类型规范库

规范库是内置文件对应的申明，配置文件中默认的版本是es3，所以类型申明相似Symbol、Promise会报错，在某种状况下Array、console也可能会报错，这个时候要让程序意识那些个类型，在VSCode中，类型右键跳转定义能够看到lib文件夹外面有很多内置对象的定义，这就是TypeScript规范库，以Symbol为例：

例如：Symbol，是ES6的语法才反对的，这个时候有两种解决方案

须要将配置文件中的target改为es2015
不改target，将lib选项改为["ES2015"]

独自设置这个，console的定义会报错，默认援用的DOM类库被笼罩，须要加上"DOM"，这里的DOM是蕴含了DOM+BOM

如果下次有遇到相似的谬误，能够找到其援用的规范库，而后在配置文件中援用。

设置谬误音讯显示为中文

开发小技巧，能够让TypeScript显示谬误音讯为中文。

应用VSCode设置

设置 -> 输出typescript locale -> TypeScript:Locale -> zh-CN

应用命令行设置

# yarnyarn tsc --locale zh-CN# npmtsc --locale zh-CN# 那反设置成英文模式tsc --locale en

作用域问题

如果在我的项目中执行ts文件，那么不同文件中的雷同变量是会报错的，为了防止这种问题，要进行作用域的解决

// 解决办法一：每个文件应用立刻执行函数包裹(function () {   const a = 123 })()// 解决办法二：应用export导出const a = 123export {}

目录

前言

概述