推薦在這裡閱讀

9012年都過半了，還不會用ts你就out了

why ?

1. 三大框架angular2以後的版本完全是用ts開發的，
2. vue對ts的支持也越來越好，

3. React也有TSX組件

   還在猶豫什麼

   本文不涉及框架內容，因為框架的cli已經幫你搭好了ts環境。。。

   本文只教你如何在一個demo里搭建Ts環境，好了，我們開始吧

   第一步，安裝

   全局安裝typescript

npm install typescript -g

安裝好以後，在你的項目里就可以使用tsc 命令了

tsc [ts文件名] 

使用上面的命令就可以把某個ts文件編譯成js文件

tsc  

這是編譯所有ts文件

第二步， 配置文件

恭喜你，走完第一步你已經成功一大半了！

新建一個json類型的配置文件， 文件名是tsconfig.json。

{
  "compilerOptions": { // 編譯選項
    "target": "es2016",  // 配置編譯目標代碼的版本標準
    "module": "commonjs",  // 配置編譯目標使用的模塊化標準
    "lib": ["es2016"]  
  }
}

最簡單的配置是這樣,後面可以根據需求加上你需要的配置。

:::tip
註意！！！加入配置文件後，使用tsc 命令編譯某個ts文件時不需要帶上.ts文件尾碼, 否則會忽略配置文件
:::

插播一條重要內容

我們的ts項目如果使用了第三方庫，比如lodash,mock，jquery什麼的,這些第三方庫並不是用ts寫的，

它們是用js寫的，沒有ts的類型檢查， 怎麼辦？

有辦法，官方有一個@types的類型庫，它包含了很多對js代碼的類型描述

比如你想用jquery, 你就可以安裝@types/jquery。

ts和js分開

開發過程中我們肯定希望源代碼和編譯後的代碼分開，加入以下兩個配置選項

include : 需要編譯的文件目錄

outDir: 編譯後的文件目錄

{
  "compilerOptions": { // 編譯選項
    "target": "es2016",  // 配置編譯目標代碼的版本標準
    "module": "commonjs",  // 配置編譯目標使用的模塊化標準
    "lib": ["es2016","dom"], // 配置環境
    "outDir": "./dist"
  },
  "include": ["./src"]
}

第三步 簡化開發流程

如果你只是想用ts寫個hello world， 你已經可以做到了

假設你有個hello.ts文件，文件內容是console.log('hello world');
命令行依次執行：

tsc

node ./dist/hello.js 

命令行就可以列印出 hello world

截至第二步， 每次修改文件你都要執行兩步：

1. 編譯文件 tsc

2. 執行文件 node ./dist/文件名
   
   我們可以使用第三方庫來簡化這個流程
   

   ts-node

   安裝 npm install ts-node -D
   
   命令行執行

ts-node /src/hello.ts

它可以在記憶體中直接編譯ts並執行編譯後的文件（不會生成dist目錄）
這樣還不夠好，雖然它可以幫我們編譯並執行，但是它不能檢測代碼的變化

nodemon

安裝 npm install nodemon -D

命令行執行

nodemon --exec --watch src -e ts ts-node /src/hello.ts

--watch src表示只監控src文件夾下的文件

-e ts表示只監控ts文件的改變

這樣你隨便改hello.ts的內容它都會自動編譯並運行。
最後把這條命令寫在package.json的script里，完美收官！

結語

至此相信你對ts已經不那麼陌生了，下篇和大家一起結合React和Ts開發個小demo,

幫你熟悉項目實戰。