摘要：前面我們已經(jīng)說(shuō)了大部分的核心內(nèi)容，接下來(lái)我們就說(shuō)說(shuō)如何用開(kāi)發(fā)實(shí)際項(xiàng)目。因?yàn)楹徒Y(jié)合很緊密，資料也很多，而且我會(huì)找機(jī)會(huì)專(zhuān)門(mén)說(shuō)下這方面的知識(shí)，所以我們將重點(diǎn)放到如何用結(jié)合上來(lái)。所以前面打牢基礎(chǔ)，現(xiàn)在我們開(kāi)始實(shí)際組建工作流。

前面我們已經(jīng)說(shuō)了大部分typescript的核心內(nèi)容，接下來(lái)我們就說(shuō)說(shuō)如何用typescript開(kāi)發(fā)實(shí)際項(xiàng)目。

因?yàn)閍ngular和typescript結(jié)合很緊密，資料也很多，而且我會(huì)找機(jī)會(huì)專(zhuān)門(mén)說(shuō)下這方面的知識(shí)，所以我們將重點(diǎn)放到如何用typescript結(jié)合react上來(lái)。

相信很多朋友都已經(jīng)想到或者再用typescript工作流了，所以前面我一直用最原始的方式大家也許會(huì)覺(jué)得是不是太麻煩和不夠貼近實(shí)際，其實(shí)工作流都是由最基礎(chǔ)的知識(shí)組成的，我們不僅要知其然，還要知其所以然，不然你在實(shí)際工作中有一點(diǎn)跟我講的東西不一樣的地方，你就不會(huì)用了。所以前面打牢基礎(chǔ)，現(xiàn)在我們開(kāi)始實(shí)際組建工作流。

新建一個(gè)easy文件夾，然后

npm init

啥也別管，一路回車(chē)，然后就well done了，項(xiàng)目初始化完成，開(kāi)始裝react.

npm install react react-dom --save

我們裝上了react并不能直接在瀏覽器里面用，大家懂得，一堆JSX代碼需要最后編譯成普通js才能被瀏覽器看懂，這個(gè)工作以前是react的腳手架干的，但是咱們不僅僅會(huì)用腳手架，還得會(huì)自己搭腳手架，因?yàn)槲矣龅竭^(guò)有的朋友用react只能項(xiàng)目老大把項(xiàng)目什么都配置好，他只去寫(xiě)組件，編譯的時(shí)候遇到一個(gè)相對(duì)路徑的更改都搞不定，這樣就嚴(yán)重影響自身react技能和項(xiàng)目進(jìn)展了，所以我們從最基礎(chǔ)的來(lái)，教大家配置下。

我們使用webpack,

npm install webpack ts-loader --save-dev

大家都知道用腳手架安裝完react都會(huì)出來(lái) localhost://xxx之類(lèi)的一個(gè)地址然后展示react安裝成功，這說(shuō)明我需要一個(gè)服務(wù)器，我們就整一個(gè)，

npm install lite-server --save-dev

這樣，服務(wù)器跑起來(lái)了，頁(yè)面也能看到了，但是我們需要一堆事要做，比如把typescript編譯成js代碼并壓縮，還有大家也看到了多麻煩前面，是不是我改點(diǎn)東西就得tsc一下，然后再刷新一下頁(yè)面，非常麻煩我們需要自動(dòng)監(jiān)視，不廢話(huà)，直接上webpack.

npm install webpack

然后項(xiàng)目根目錄下，配置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"}
        ]
    }
};

非常簡(jiǎn)單，但是大家注意這里我要強(qiáng)調(diào)的是webpack最新版本,省的一些參數(shù)寫(xiě)起來(lái)不一樣，比如以前用的loaders現(xiàn)在替換成了rules，接著上typescript

npm install typescript --save-dev

然后配置，輸入命令行，

tsc --init

打開(kāi)根目錄的tsconfig.json，配置如下，

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

干得漂亮，繼續(xù)，因?yàn)槲覀円胷eact，知己安裝

npm install react reac-dom --save-dev

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

let a:number = 12;這就容易出事和報(bào)錯(cuò)，所以我們進(jìn)行狀態(tài)管理。處理一下。

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

大功告成，但是有個(gè)小問(wèn)題，我怎么使用工作流呢？

我期待著，

npm start

然后就開(kāi)始監(jiān)視更改，

npm run build

就編譯，可以的，打開(kāi)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對(duì)jsx的支持

好了，浪一把，在根目錄下創(chuàng)建文件夾和文件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"));

項(xiàng)目根目錄下，index.html

    
    
    
    


    

    
我是不是你最疼愛(ài)的人，你為啥不說(shuō)話(huà)
    

這樣就well done了，

npm start

開(kāi)發(fā)，

npm run build

編譯，直接共產(chǎn)主義階段，生活太爽了。

1.TS的初步配置
2.TS 數(shù)據(jù)類(lèi)型 any 枚舉
3.函數(shù)的參數(shù)和返回值類(lèi)型
4.類(lèi) 非常重要 非常重要

修飾符 public private
抽象類(lèi)
接口
類(lèi)繼承

5.靜態(tài)類(lèi)屬性和方法 Math
6.泛型
7.模塊化

systemjs 

8.項(xiàng)目

TS+react+webpack結(jié)合的應(yīng)用
類(lèi)型管理 js->tsx 2.0
如何用TS開(kāi)發(fā)react->TSX(難點(diǎn)->官網(wǎng) 項(xiàng)目)
package.json -> npm start npm run build 

學(xué)完本系列三篇文章，大家就對(duì)ts有了基本的了解和認(rèn)識(shí)了，但是實(shí)際開(kāi)發(fā)過(guò)程中還會(huì)遇到很多實(shí)際的問(wèn)題，遇到的問(wèn)題一方面大家可以參考我的視頻教程

TypeScript極速完全進(jìn)階指南
也可以在本文章評(píng)論區(qū)留言，后續(xù)ts教程我會(huì)持續(xù)更新，歡迎大家提出寶貴的建議和問(wèn)題，期待著我們的共同成長(zhǎng)和進(jìn)步，謝謝大家！