摘要：前面我們已經說了大部分的核心內容，接下來我們就說說如何用開發實際項目。因為和結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用結合上來。所以前面打牢基礎，現在我們開始實際組建工作流。

前面我們已經說了大部分typescript的核心內容，接下來我們就說說如何用typescript開發實際項目。

因為angular和typescript結合很緊密，資料也很多，而且我會找機會專門說下這方面的知識，所以我們將重點放到如何用typescript結合react上來。

相信很多朋友都已經想到或者再用typescript工作流了，所以前面我一直用最原始的方式大家也許會覺得是不是太麻煩和不夠貼近實際，其實工作流都是由最基礎的知識組成的，我們不僅要知其然，還要知其所以然，不然你在實際工作中有一點跟我講的東西不一樣的地方，你就不會用了。所以前面打牢基礎，現在我們開始實際組建工作流。

新建一個easy文件夾，然后

npm init

啥也別管，一路回車，然后就well done了，項目初始化完成，開始裝react.

npm install react react-dom --save

我們裝上了react并不能直接在瀏覽器里面用，大家懂得，一堆JSX代碼需要最后編譯成普通js才能被瀏覽器看懂，這個工作以前是react的腳手架干的，但是咱們不僅僅會用腳手架，還得會自己搭腳手架，因為我遇到過有的朋友用react只能項目老大把項目什么都配置好，他只去寫組件，編譯的時候遇到一個相對路徑的更改都搞不定，這樣就嚴重影響自身react技能和項目進展了，所以我們從最基礎的來，教大家配置下。

我們使用webpack,

npm install webpack ts-loader --save-dev

大家都知道用腳手架安裝完react都會出來 localhost://xxx之類的一個地址然后展示react安裝成功，這說明我需要一個服務器，我們就整一個，

npm install lite-server --save-dev

這樣，服務器跑起來了，頁面也能看到了，但是我們需要一堆事要做，比如把typescript編譯成js代碼并壓縮，還有大家也看到了多麻煩前面，是不是我改點東西就得tsc一下，然后再刷新一下頁面，非常麻煩我們需要自動監視，不廢話，直接上webpack.

npm install webpack

然后項目根目錄下，配置webpack.config.js,

module.exports = {
    entry:"./src/index.tsx",
    output:{
        filename: "app.js",
    },
    devtool:"source-map",
    resolve:{
        extensions: [".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/.tsx?$/,loader:"ts-loader"}
        ]
    }
};

非常簡單，但是大家注意這里我要強調的是webpack最新版本,省的一些參數寫起來不一樣，比如以前用的loaders現在替換成了rules，接著上typescript

npm install typescript --save-dev

然后配置，輸入命令行，

tsc --init

打開根目錄的tsconfig.json，配置如下，

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": false,
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

干得漂亮，繼續，因為我們要用react，知己安裝

npm install react reac-dom --save-dev

安裝好了react，但是react是jsx文件啊，即使有js他也沒有類型啊，比如let a = 12;人家typescript是要醬紫的

let a:number = 12;這就容易出事和報錯，所以我們進行狀態管理。處理一下。

npm install --save-dev @types/react @types/react-dom

大功告成，但是有個小問題，我怎么使用工作流呢？

我期待著，

npm start

然后就開始監視更改，

npm run build

就編譯，可以的，打開package.json,拿走不謝。

{
  "name": "easy",
  "version": "1.0.0",
  "description": "play and test",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "lite-server",
    "build": "webpack --mode production"
  },
  "author": "leolau",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "@types/react": "^16.3.10",
    "@types/react-dom": "^16.0.5",
    "lite-server": "^2.3.0",
    "ts-loader": "^4.2.0",
    "typescript": "^2.8.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

還有最后一nainai,就是tsconfig.json里面加一句

"jsx": "react",//增加ts對jsx的支持

好了，浪一把，在根目錄下創建文件夾和文件src/components/HelloWorld.tsx

import * as React from "react";
interface HelloProps{
    name:string,
    age:number
}
export class Hello extends React.Component{
   render(){
       return (
        

               我是，{this.props.name},今年{this.props.age}歲了
        
       );
   };
}

src/index.tsx如下，

import * as React from "react";
import * as ReactDOM from "react-dom"
import {Hello} from "./components/HelloWorld"
ReactDOM.render(,document.getElementById("app"));

項目根目錄下，index.html

    
    
    
    


    

    
我是不是你最疼愛的人，你為啥不說話
    

這樣就well done了，

npm start

開發，

npm run build

編譯，直接共產主義階段，生活太爽了。

1.TS的初步配置
2.TS 數據類型 any 枚舉
3.函數的參數和返回值類型
4.類 非常重要 非常重要

修飾符 public private
抽象類
接口
類繼承

5.靜態類屬性和方法 Math
6.泛型
7.模塊化

systemjs 

8.項目

TS+react+webpack結合的應用
類型管理 js->tsx 2.0
如何用TS開發react->TSX(難點->官網 項目)
package.json -> npm start npm run build 

學完本系列三篇文章，大家就對ts有了基本的了解和認識了，但是實際開發過程中還會遇到很多實際的問題，遇到的問題一方面大家可以參考我的視頻教程

TypeScript極速完全進階指南
也可以在本文章評論區留言，后續ts教程我會持續更新，歡迎大家提出寶貴的建議和問題，期待著我們的共同成長和進步，謝謝大家！