之前更新过ES6合集，趁热打铁，今天更新TypeScript。虽然已经有很多文档和pdf了，但是我总结的是我自己的。目录前言概述TypeScript优缺点优缺点入门安装创建文件执行编译命令配置文件类型标准库设置错误信息为中文使用VSCode设置使用命令行设置作用域问题TypeScript学习地图前言我们之前讨论过JavaScript自带的类型系统如果你不明白强类型和弱类型的好处和强类型，回顾JavaScript类型系统，同时介绍Vue2.0源码中使用的JavaScript类型检查器Flow。回顾流程（一）——JavaScript静态类型检查器在Vue3.0的源码中已经使用了TypeScript进行类型检查，很多类库也使用了TypeScript，我们简单了解一下。概述TypeScript是一种基于JavaScript的编程语言，是JavaScript的超集。和Flow一样，它也旨在解决JavaScript类型系统的问题。从下图中，我们可以清晰的看出JavaScript、ES6和TypeScript之间的关系。TypeScript是一种静态类型语言。开发时使用了TypeScript，但浏览器环境不支持TypeScript。它必须在生产环境中编译成JavaScript。支持，所以需要提前编译。同时，TypeScript也不是强类型语言，因为它需要兼容JavaScript的隐式类型转换，它只是提前了类型检查的时机，并没有让类型系统本身变得更严格。TypeScript的优缺点优点为了解决JavaScript类型系统的不足，在开发阶段进行类型检查可以大大提高代码的可靠性。增量开发，如果你不会TypeScript，一开始也支持JavaScript，你可以学习一个特性，使用一个特性。与Flow的类型检查相比，TypeScript的功能更强大，生态也更健壮完整。逐渐被广泛使用，Angular、Vue3.0已经开始使用，TypeScript已经成为前端领域的第二语言。缺点语言本身有很多概念，增加了学习成本。项目初期引入TypeScript会增加一些成本，需要编译处理才能启动。TypeScript官网TypeScript中文网installnpm-typescript#yarnyarnaddtypescript--dev#npmnpminstall-gtypescript安装完成后在node-Modules/bin目录下多了一个tsc文件。我们可以使用tsc将ts文件转换成js文件。创建一个文件，在src文件夹下添加一个后缀为.ts的文件//随便写，先按照原生js写，使用ES6新特性consthello=(name:string)=>{console.log(name)}hello('TypeScript')执行编译命令#yarnyarntschello-TypeScript.ts#npmtsc.\src\hello-TypeScript.ts会在目录下添加一个编译后的同名js文件//All其中已经转换成es3语法（默认是es3）varhello=function(name){console.log(name);};hello('TypeScript');配置文件编译项目时，会生成一个配置文件tsconfig.json#yarnyarntsc--init#npmtsc--init里面的属性是typescript编译器配置的一些选项。一般我们想怎么改就怎么改，下面是一些常用的配置及其含义TypeScript（二）-配置文件注解有了配置文件之后，配置文件只有在我们使用tsc命令编译的时候才会生效整个项目。如果是单个文件，则不会生效。#yarnyarntsc#npmtsc可以看到dist目录下有对应的js文件和js.map文件类型。报错。在某些情况下，Array和console也可能报错。这个时候让程序去识别那些类型。在VSCode中，右击类型跳转到定义，可以看到lib文件夹下有很多内置对象的定义。这是TypeScript标准库，以Symbol为例：例如：Symbol只支持ES6语法。这个时候，有两种解决方法。需要在不改变target的情况下，将配置文件中的target改成es2015，并将lib选项改成["ES2015"]这个单独设置，console的定义会报错，默认引用的DOM类库被覆盖，需要加上“DOM”，这里的DOM包含DOM+BOM，如果下次遇到类似的错误，可以找到它引用的标准库，然后在配置文件中引用。设置错误信息以中文显示，可以让TypeScript以中文显示错误信息。使用VSCode设置settings->输入typescriptlocale->TypeScript:Locale->zh-CN使用命令行设置#yarnyarntsc--localezh-CN#npmtsc--localezh-CN#然后设置为英文模式tsc--Localeenscopeproblem如果在项目中执行ts文件，不同文件中的同一个变量会报错。为了避免这个问题，必须对scope进行处理//方案一：对每个文件使用立即执行函数Package(function(){consta=123})()//方案二：使用export导出consta=123export{}TypeScript学习导图
