初识TypeScript编译器(tsc)

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

文章目录

- - 1. 安装 TypeScript
  - 2. 熟悉tsc的编译选项
  - 3. 编译.ts文件
  - 4. TS报错后那JS呢
  - - - 4.1 通过noEmitOnError禁止在出错的情况下编译出JS目标文件
  - 5. 查看编译生成的JS文件
  - - - 5.1 通过target进行JS版本切换

对于有过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

如下图所示：
TSC

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) //错误调用

在这里插入图片描述
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}`)
}