TypeScript 创建第一个TypeScript文件

上一节我们已经做好了准备工作,那么本节我们开始在 Visual Studio Code 中创建第一个 TypeScript 文件,并学习如何运行这个文件。

TypeScript 文件后缀名

在创建文件之前,我们来讲一下后缀名, TypeScript 中的文件都是以 .ts 为后缀名的,这和 JavaScript 文件是不同的,JavaScript 是以 .js 为后缀名,所以在这点上我们千万不要弄错哟。

创建一个 TypeScript 文件

首先可以在电脑指定路径创建一个文件夹,例如我创建一个名为 DemoXKD 的文件夹。接着打开 VSCode 软件,在 VSCode 中选择“文件(F) --> 打开文件夹”,然后选择 DemoXKD 文件夹。

如下图所示: 成功打开文件夹后可以显示如下,我们可以点击图标来选择创建文件或文件夹等: 点击创建文件,给文件命名为 test.ts,在文件中写入如下 TypeScript 代码:

let str:string = "侠课岛" 
console.log(str)

这样我们就成功创建好了第一个 TypeScript 文件啦:

编译代码

如果我们想要编译创建好的 TypeScript 文件,可以在 VSCode 顶部菜单中,找到终端(T) -- > 选择新建终端。然后在终端中执行 tsc test.ts 命令,其中 test.ts 就是文件名: 如果代码执行成功,会自动创建一个名与 TypeScript 文件名相同,但是后缀名不同的 test.js ,这就是一个 JavaScript 文件啦,编译好的 JavaScript 代码就在这个文件中。

例如我们可以点开 test.js 文件看一下里面的内容: 从图中可以看到编译后的 JavaScript 代码和 TypeScript 代码有一些不同,不同在于声明变量的语法上有些差别。

这是因为 TypeScript 是强类型语言,声明变量时需要指定数据类型,而 JavaScript 是弱类型,声明变量时不需要指定数据类型。上述 test.ts 文件里面的所有的语法都是会编译成 test.js 里面的语法。

执行 JavaScript 代码

TypeScript 代码成功编译为 JavaScript 代码后,就可以通过 node test.js 命令来执行代码了,运行成功后就会输出结果。

var str = "侠课岛";
console.log(str);

输出:

侠课岛

tsc 常用编译参数

下面是一些 tsc 常用的编译参数,大家可以在终端上试试:

  • --help:显示帮助信息。
  • --module:载入扩展模块。
  • --target:设置 ECMA 版本。
  • --declaration:额外生成一个 .d.ts 扩展名的文件。
  • --removeComments:删除文件的注释。
  • --out:编译多个文件并合并到一个输出的文件。
  • --sourcemap:生成一个 sourcemap (.map) 文件。
  • --watch:在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。
  • --module noImplicitAny:在表达式和声明上有隐含的 any 类型时报错。

链接:https://www.9xkd.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章