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

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

目录

• 前言
• 概述

• TypeScript 优缺点

  • 劣势
  • 毛病

• 起步

  • 装置
  • 创立文件
  • 执行编译命令
• 配置文件
• 类型规范库

• 设置谬误音讯显示为中文

  • 应用 VSCode 设置
  • 应用命令行设置
• 作用域问题

前言

咱们之前曾经探讨过了 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

# yarn
yarn add typescript --dev

# npm
npm install -g typescript

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

创立文件

在 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 为例：

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

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

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

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

设置谬误音讯显示为中文

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

应用 VSCode 设置

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

应用命令行设置

# yarn
yarn tsc --locale zh-CN
# npm
tsc --locale zh-CN

# 那反设置成英文模式
tsc --locale en

作用域问题

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

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

// 解决办法二：应用 export 导出

const a = 123
export {}