上一节我们已经做好了准备工作,那么本节我们开始在 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
类型时报错。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。