快速搭建 TypeScript 學習開發環境

前言

以前一直使用的Vue技術棧，在一個大型無代碼平臺的業務項目中使用過TypeScript，當時感受很很差用，以後一直不想在業務項目中使用TypeScriptjavascript

直到最近建立了一個React+TS項目，才深入體會到用TypeScript寫業務代碼真TMD爽，以前在Vue項目中徹底沒有體會到TS這麼好用。html

JavaScript代碼只有在**運行時(runtime)**才能發現錯誤，言外之意把項目跑起來，查看瀏覽器中效果不對或者控制檯報錯了，才能發現錯誤。前端

TypeScript在你寫代碼的過程當中就能發現錯誤，不用等到運行時。。java

一頓牢騷過會，直奔主題，接下來咱們講解一下如何搭建一個學習TypeScript 開發環境node

TypeScript中文官方地址：www.typescriptlang.org/zh/typescript

Playground

微軟官方也提供了一個在線開發 TypeScript 的環境。學習和測試使用都很方便，對於剛接觸TypeScript的新手來講，是個很好的選擇，能夠先把重點放到語法上，暫時不用關心TypeScript的編譯和運行環境如何搭建。npm

地址：www.typescriptlang.org/zh/playjson

他還有一個好處，當使用在線開發 TypeScript 的環境寫的代碼遇到問題了，可直接把url給別人，他能夠看到你的輸入的代碼，便於幫你查找問題。瀏覽器

例如：www.typescriptlang.org/zh/play?tar…bash

打開上面的鏈接，你能夠看到左側編輯區域有輸入的內容，內容和上面圖片內容一致。

TypeScript編輯環境

接下來說解一下如何在項目中添加支持TypeScript的編輯環境。

1.建立項目，並初始化package.json

# 建立文件夾
mkdir learn-ts 
# 進入文件夾
cd learn-ts
# 初始化項目
npm init -y
# 建立一個src文件夾，並在src文件夾下面添加index.ts
mkdir src
touch src/index.ts
複製代碼

2.安裝須要的依賴

npm install typescript --save-dev
複製代碼

以後執行 tsc 來運行 TypeScript 編譯器。

npx tsc
複製代碼

看一下tsc 命令的用法：

參數不少，咱們只列舉部分：

語法:   tsc [options] [file...]
例子: tsc hello.ts
          tsc --outFile file.js file.ts
          tsc @args.txt
          tsc --build tsconfig.json

Options:
 -w, --watch   監聽輸入文件變化                                    
 --pretty      設置錯誤和消息的樣式
 --all         展現全部的編譯選項
 -v, --version 打印版本
 --init        建立 tsconfig.json  文件
 -b, --build 
 -d, --declaration  建立聲明文件 .d.ts                                                        
 .....
 .....
 --allowJs        容許js文件參與編譯  
複製代碼

3.建立tsconfig.json文件

若是一個目錄下存在一個tsconfig.json文件，那麼它意味着這個目錄是TypeScript項目的根目錄。 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。你能夠經過files屬性指定要編譯的文件

運行命令，建立tsconfig.json文件和默認配置

npx tsc --init
複製代碼

執行完畢以上命令以後，會在根目錄建立一個tsconfig.json文件。文件裏面有不少默認配置，下面咱們展現一個示例文件

詳細的編譯選項能夠查看這個連接：www.typescriptlang.org/docs/handbo…

tsconfig.json示例文件:

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true,
        "declaration": true, //建立聲明文件
    },
    "files": [
        "core.ts",
        "sys.ts"
    ]
}
複製代碼

4.使用`"include"`和`"exclude"`屬性

node_module不須要編譯，只須要編譯src文件夾裏面的內容，因此咱們要修改tsconfig.json文件

{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true,
        "declaration": true, //建立聲明文件
        "declarationMap": true,
        "inlineSourceMap": true,
        "inlineSources": true,
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}
複製代碼

include:參與編譯的文件
exclude：排除文件

5.細節說明

"compilerOptions"能夠被忽略，這時編譯器會使用默認值。在這裏查看完整的編譯器選項列表。

"include"和"exclude"屬性指定一個文件glob匹配模式列表。支持的glob通配符有：

* 匹配0或多個字符（不包括目錄分隔符）
? 匹配一個任意字符（不包括目錄分隔符）
**/ 遞歸匹配任意子目錄

若是一個glob模式裏的某部分只包含*或.*，那麼僅有支持的文件擴展名類型被包含在內（好比默認.ts，.tsx，和.d.ts，若是 allowJs設置能true還包含.js和.jsx）。

若是"files"和"include"都沒有被指定，編譯器默認包含當前目錄和子目錄下全部的TypeScript文件（.ts, .d.ts 和 .tsx），排除在"exclude"裏指定的文件。JS文件（.js和.jsx）也被包含進來若是allowJs被設置成true。若是指定了 "files"或"include"，編譯器會將它們結合一併包含進來。使用 "outDir"指定的目錄下的文件永遠會被編譯器排除，除非你明確地使用"files"將其包含進來（這時就算用exclude指定也沒用）。

使用命令行界面

# 根據項目根目錄下面的 tsconfig.json編譯ts文件
tsc
# 指定要編譯的特定文件，例以下面例子：只會編譯index.ts文件
tsc index.ts
# 編譯src下面全部的.ts文件
tsc src/*.ts
# 指定tsconfig.json
tsc --project tsconfig.production.json
# 生成.d.ts文件 和index.js文件
tsc index.js --declaration --emitDeclarationOnly
# 將 app.ts 和util.ts內容編譯合併到index.js文件中
tsc app.ts util.ts --target esnext --outfile index.js
# tsc 設定一個 watch 參數監聽文件內容變動，實時進行類型檢測和代碼轉譯
tsc index.ts --strict --alwaysStrict false --watch
複製代碼

實例演示

在src/index.ts裏面添加以下內容

interface LabeledValue {
  label: string;
}

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
}

let myObj = {label: "Size 10 Object" };
printLabel(myObj);
複製代碼

在項目跟目錄下面，運行編譯命令，會根據跟目錄的tsconfig.json編譯

npx  tsc
複製代碼

結果：

"use strict";
function printLabel(labeledObj) {
    console.log(labeledObj.label);
}
var myObj = { label: "Size 10 Object" };
printLabel(myObj);

複製代碼

也能夠在package.json添加scripts方式一直監聽

"scripts": {
    "version": "tsc -v",
    "dev": " tsc --build tsconfig.json --watch"
}
複製代碼

添加ts-node

上面代碼實例演示了經過tsc命令對TypeScript文件進行了編譯，可是若是想編譯完了，直接運行怎麼辦呢？

這時候就會用到ts-node。你能夠近似地認爲 ts-node = tsc + node

tsc 是一個編譯器，把 TS 變成 JS。
ts-node 是一個執行環境，把 TS 變成 JS 而後執行。

安裝ts-node

npm i ts-node  -D
npm i @types/node -D
複製代碼

用法

# Execute a script as `node` + `tsc`.
ts-node src/index.ts

# Starts a TypeScript REPL.
ts-node

# Execute code with TypeScript.
ts-node -e 'console.log("Hello, world!")'

# Execute, and print, code with TypeScript.
ts-node -p -e '"Hello, world!"'

# Pipe scripts to execute with TypeScript.
echo 'console.log("Hello, world!")' | ts-node

# Equivalent to ts-node --transpile-only
ts-node-transpile-only script.ts

# Equivalent to ts-node --cwd-mode
ts-node-cwd script.ts

複製代碼

其餘

想要了解更多ts-node用法，能夠查看官方文檔：typestrong.org/ts-node/ 瞭解更多文章，歡迎關注公衆號：前端學社