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