TypeScript安装

我们需要使用到 npm 工具安装 TypeScript, 而 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。 Node.js 安装包及源码下载地址为：https://nodejs.org/en/download。

NPM 安装 TypeScript

安装nodejs 和 NPM

安装 nodejs 和 NPM，windows powershell下安装命令如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

# installs fnm (Fast Node Manager)
winget install Schniz.fnm

fnm env --use-on-cd | Out-String | Invoke-Expression
# download and install Node.js
fnm use --install-if-missing 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.13.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.5.2`

Linux下安装

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# installs fnm (Fast Node Manager)
curl -fsSL https://fnm.vercel.app/install | bash

# download and install Node.js
fnm use --install-if-missing 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.13.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.5.2`

安装Typescript

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

1
2
3
4
5

# 使用国内镜像：
npm config set registry https://registry.npmmirror.com

# 安装 typescript：
npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

1
2

$ tsc -v
Version 5.4.5

然后我们新建一个 app.ts 的文件，代码如下：

1
2

var message:string = "Hello World" 
console.log(message)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。然后执行以下命令将 TypeScript 转换为 JavaScript 代码： tsc app.ts

Visual Studio Code插件安装

很多 IDE 都有支持 TypeScript 插件，如：Visual Studio，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。个人比较推荐Visual Studio Code，Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器，由 Microsoft 公司开发。而且 Microsoft 开发了针对 TypeScript 开发的插件。

TypeScript文件运行

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。然后执行 tsc app.ts 命令将 TypeScript 转换为 JavaScript 代码。这时候在当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件，代码如下：

1
2

var message = "Hello World";
console.log(message);

使用 node 命令来执行 app.js 文件：

1
2

$ node app.js 
Hello World

编译脚本

安装 tsc 之后，就可以编译 TypeScript 脚本了。

tsc命令后面，加上 TypeScript 脚本文件，就可以将其编译成 JavaScript 脚本。

1

$ tsc app.ts

上面命令会在当前目录下，生成一个app.js脚本文件，这个脚本就完全是编译后生成的 JavaScript 代码。

tsc命令也可以一次编译多个 TypeScript 脚本。

1

$ tsc file1.ts file2.ts file3.ts

上面命令会在当前目录生成三个 JavaScript 脚本文件file1.js、file2.js、file3.js。

tsc 有很多参数，可以调整编译行为。

（1）--outFile

如果想将多个 TypeScript 脚本编译成一个 JavaScript 文件，使用--outFile参数。

1

$ tsc file1.ts file2.ts --outFile app.js

上面命令将file1.ts和file2.ts两个脚本编译成一个 JavaScript 文件app.js。

（2）--outDir

编译结果默认都保存在当前目录，--outDir参数可以指定保存到其他目录。

1

$ tsc app.ts --outDir dist

上面命令会在dist子目录下生成app.js。

（3）--target

--target, -t Set the JavaScript language version for emitted JavaScript and include compatible library declarations. one of: es5, es6/es2015, es2016, es2017, es2018, es2019, es2020, es2021, es2022, esnext default: es5

为了保证编译结果能在各种 JavaScript 引擎运行，tsc 默认会将 TypeScript 代码编译成很低版本的 JavaScript，即5.0版本（以es5表示）。这通常不是我们想要的结果。这时可以使用--target参数，指定编译后的 JavaScript 版本。如使用es2015，或者更新版本。

1

$ tsc --target es2015 app.ts

捐赠本站(Donate)

如您感觉文章有用，可扫码捐赠本站！(If the article useful, you can scan the QR code to donate))