9012年都過半了，還不會用ts你就out了
why ?
- 三大框架angular2以后的版本完全是用ts開發的，
- vue對ts的支持也越來越好，
- 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
截至第二步， 每次修改文件你都要執行兩步：
- 編譯文件 tsc
- 執行文件 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,
幫你熟悉項目實戰。