WebStrom + TypeScript

背景

最近公司用 TypeScript 開(kāi)發(fā)前端。雖然我負(fù)責(zé)后臺(tái)的工作，但也需為前端提供意見(jiàn)，為了不盲目提意見(jiàn)，因此來(lái)簡(jiǎn)單了解下 TypeScript

安裝配置環(huán)境

1. 安裝 node.js 

    TypeScript 是在 node.js 的環(huán)境上，node.js 下載地址：https://nodejs.org/en/download/

2. 安裝 TypeScript 

    使用 Node 的 npm 命令安裝 TypeScript 編譯器，在 cmd 界面里輸入：

npm install typescript -g

    可通過(guò) tsc 命令查看是否安裝成功

tsc -v

3. 安裝 WebStrom

    WebStrom 官方下載地址： https://www.jetbrains.com/webstorm/ 

WebStorm 自動(dòng)編譯 TypeScript

下載的 2018.1.5 版本的 WebStorm 已經(jīng)提供自動(dòng)編譯的功能了，只是需要設(shè)置一下。 

File -> setting

如果不勾選此項(xiàng)，在代碼發(fā)生變動(dòng)時(shí)，會(huì)有提示，是否要編譯

我這邊選擇了自動(dòng)編譯功能，下面就去嘗試第一份代碼吧

測(cè)試

創(chuàng)建空項(xiàng)目：TypeScriptProgram

File -> New -> Project 

右鍵此項(xiàng)目，創(chuàng)建 tsconfig.json File

添加 ts 文件

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

保存后，自動(dòng)生成相應(yīng)的 js 文件

到此，用 WebStrom 開(kāi)發(fā) TypeScript 的環(huán)境已準(zhǔn)備好了。