Day4-TypeScript(TS)在Visual Studio Code(VS Code)的前置作业

因为要在Visual Studio Code(VS Code)上使用TypeScript(TS)进行开发，
因此今天要教大家做一些前置作业，
让开发更容易也更有效率。

安装 延伸模组(Extension)

这里主要安装的延伸模组有三个

• Code Runner
• JavaScript (ES6) code snippets
• Live Server

这些都是帮助开发的延伸模组，
其中，因为TS支援转译为ES5也支援转译为ES6的JS，
因此也更能支援过去的系统使用TS做开发喔。

建立 TypeScript(TS)专案

在Terminal(或命令提示字元)输入指令，如下

• 建立TS专案
  tsc --init

输入完便会自动在专案资料夹中建立tsconfig.json档案，
接着开启该档案，将outDir取消注解改为 "outDir": "./js"，
如此一来，就会自动将编译後的js档案建置在js资料夹内了，
也较方便管理资料。

另外，里面的target意味着可选择转译成的JS型态，
如 "target": "es5"，
就是转为ES5的JS，
若是刚开始开发的专案还是建议有新的用新的吧，
时代在进步呢!

那麽在这我只稍微讲解两个我觉得比较重要的，
另外里面还有很多可以做客制化调整的，
那我就不再这赘述了，
有兴趣的也可以玩看看。

使用 Task Rummer 自动转译JavaScript(JS)

若不使用辅助工具，
每次修改程序码需手动在命令提示字元下指令，
手动将TS转译成JS执行，
相当烦琐且没效率。

因此可利用Task Rummer工具程序来辅助，
便能自动将TS转译成JS。

建立流程如下，

1. View>Command Palette (Ctrl + Shift + P)
2. 输入 Configure Default Build Task
3. 选取 tsc:build – tsconfig.json
4. 自动建立tasks.json档案

就可以使用了喔!

转译与执行

使用的话两个步骤，非常重要，
一个就是使用 Task Rummer 将TS转译成JS，
另一个就是使用昨天安装的ts-node辅助工具(可直接在TS上执行结果)搭配Code Runner延伸模组来执行。
步骤如下

1. Run Build Task(Ctrl + Shift + B)

Terminal 输入
Run Build Task

2. Run Code (Ctrl + Alt + N)

滑鼠在撰写程序码的区域按右键 选取
Run Code

这两个步骤在开发时会频繁的使用到，
强烈建议熟记快捷键吧!
对於开发是很有帮助的。

今日结语

那麽希望大家建立环境与前置作业都顺利完成，
明天开始就进入程序码的部分了喔!

加油~