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 {}