TypeScript(一) —— 了解并快速入门

之前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的关系

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

TypeScript学习地图