初识TypeScript编译器(tsc)

须知少时凌云志，
曾许人间第一流。
哪晓岁月蹉跎过，
依旧名利俩无收。

---

对于有过Java/C/Rust/Go等编程语言经验的开发者来讲，对于编译器这个概念应该都不陌生。(比如 javac , gcc , rustc …)

今天我们主要来看一下 TypeScript 编译器 —— tsc

---

1. 安装 TypeScript

官方链接：Installing TypeScript && Download TypeScript

• npm install -g typescript
• yarn add typescript --dev
• pnpm add typescript -D

Visual Studio 默认支持。

2. 熟悉tsc的编译选项

如果我们不熟悉tsc的命令，我们可以通过以下命令获取帮助。

• tsc --help

• tsc --help --all

如下图所示：

---

3. 编译.ts文件

就像写JavaScript文件一样，我们可以使用记事本/Vim都可以。(友情提示：Vistual Studio效果更佳哦)

这里以官网内容为例

console.log('Hello,TypeScript!')

function greet(person:string,date:Date){
	console.log(`Hello ${person}, today is ${date}!`);
}

greet("Bert",new Date())
greet("Bert") // 错误调用
greet("Bert", 5) //错误调用

1
2
3
4
5
6
7
8
9
10
11

TypeScript在编译阶段很清楚的帮助我们发现&指出问题。

4. TS报错后那JS呢

通过node命令运行之后：（WTF？）

仔细想一下，我们发现这也属于正常现象：

这些错误行为相对于放荡不羁的JavaScript 而言，都是常规操作。

4.1 通过noEmitOnError禁止在出错的情况下编译出JS目标文件

很显然这不是我们想要的那种结果。我们可以通过开启 noEmitOnError 编译选项 来避免此行为。
No Emit On Error -noEmitOnError

Do not emit compiler output files like JavaScript source code, source-maps or declarations if any errors were reported.(如果报告有任何错误，则编译不输出文件)

tsc --noEmitOnError hello.ts

5. 查看编译生成的JS文件

为了对比，这里给出了源文件(Hello.ts)文件。

console.log('Hello,world!')


// function sum(x:number, y:number) {
//   return x + y
// }

// sum(5,true)

function greet(person:string, date:Date) {
  console.log(`Hello ${person}, today is ${date}!`);
}
 
greet("Bert"); // 错误调用
greet("Bert",new Date());
greet("Bert",1) // 错误调用

// 定义一个箭头函数
const welcome = (name:string) => {
  console.log(`Welcome ${name}`)
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

箭头函数,模板字符串都是 ECMAScript 2015（或者 ECMAScript6、ES2015、ES6 等）引入的新特性。

我们通过上面代码的对比，很容易就发现差异：

• 类型擦除(Erased Types)
• JavaScript版本降级(Downleveling)

默认情况下，TypeScript 会转化为 ES3 代码

5.1 通过target进行JS版本切换

我们可以通过设置target编译选项来进行ECMAScript版本切换。这里为了获得ES6版本的目标代码，可以运行如下指令：

tsc --target es6 hello.ts

关于-- target 后面的版本号(默认es3)，可以是如下值：

• es3

• es5

• es6/es2015

• es2017

• es2018

• es2019

• es2020

• es2021

• es2022

• esnext

   PS: 不区分大小写。
  1

详细内容可以查看这里：tsconfig的 lib. 和 target

---

后面的严格模式以及更多的编译选项设置，且听下回分解。