摘要：作為年前端最應(yīng)該學(xué)的技術(shù)確實(shí)惹火這兩天崩崩也是自學(xué)了一下并且配置了一個(gè)簡(jiǎn)單的基于的環(huán)境由于其他的百度教程都是年或者更早很多已經(jīng)過時(shí)了所以想想還是分享經(jīng)驗(yàn)給自學(xué)的第一步安裝推薦使用全局安裝第二步安裝使用全局安裝第三步進(jìn)入你自己的項(xiàng)目目

安裝 typescript (推薦使用全局安裝)

    npm install -g typescript

安裝 dva-cli(使用全局安裝)

    npm install -g dva-cli

. 進(jìn)入你自己的項(xiàng)目目錄

    cd d:/code/4-Dva+React1-dva+react_firstday

. 使用 dva-cli 創(chuàng)建項(xiàng)目, 創(chuàng)建好的項(xiàng)目目錄如下:

    dva new 01-dva-quickstart

. 安裝 typescript 所需的 react, react-dom 包, 以及 ts-loader 和 tslint

    npm install --save-dev @types/react @types/react-dom ts-loader ts-lint

. 配置 tsconfig.json ( ts配置項(xiàng) )

在項(xiàng)目 根目錄 下新建 tsconfig.json(./tsconfig.json), 并寫入下列必須代碼:

    {
        "compilerOptions": {
            "strictNullChecks": true,
            "moduleResolution": "node",
            "allowSyntheticDefaultImports": true,
            "experimentalDecorators": true,
            "jsx": "preserve",
            "noUnusedParameters": true,
            "noUnusedLocals": true,
            "target": "es6",
            "lib": [
                "dom", 
                "es7"
            ]
        },
        "exclude": [
            "node_modules",
            "lib",
            "es"
        ]
    }

. 配置 tslint.json ( tslint規(guī)范 )

在項(xiàng)目 根目錄 下新建 tslint.json( ./tslint.json), 寫入下列必須代碼:
(ps:下面的 rules 配置項(xiàng), 可以自行添加)

    {
        "extends": [
            "tslint:latest",
            "tslint-react"
        ],
        "linterOptions": {
            "exclude": [
                "node_modules/**/*.ts",
                "src/**/*.{ts,tsx}"
            ]
        },
        "rules": {
            "object-literal-sort-keys": false,
            "jsx-no-lambda": false,
            "eofline": false,
            "no-consecutive-blank-lines": false,
            "no-var-requires": false,
            "quotemark": false,
            "space-within-parents": false,
            "no-submodule-imports": false,
            "no-implicit-dependencies": false,
            "ordered-imports": [ false ],
            "jsx-boolean-value": false,
            "no-trailing-whitespace": false,
            "semicolon": false,
            "trailing-comma": false,
            "space-in-parents": false,
            "typedef-whitespace": [ false ],
            "whitespace": [ true ],
            "interface-over-type-literal": true,
            "no-duplicate-imports": false,
            "no-namespace": true,
            "no-internal-module": true
        }
    }

. 至此, ts 的相關(guān)配置已經(jīng)全部完成, 接著該測(cè)試一下啦?

1 . 刪除 ./src 目錄下的所有文件, 不要?jiǎng)h文件夾;

2 . 在 ./src/routes 目錄下新建 Home.tsx( ./src/routes/Home.tsx)(默認(rèn)首頁);
Ps: dva 中 routes 相當(dāng)于 redux 的 containers(容器組件), 具體相關(guān)概念可以參考鏈接描述 , Home.tsx 的代碼如下:

    import * as React from "react";
    
    export interface IAppProps {
        name?: string;
    };
    
    const Home: React.SFC = (props: IAppProps): JSX.Element => {
        return (
            

                

                    Hello {props.name ? props.name : "崩崩呢"}
                
            
        );
    };
    
    export default Home;

3 . 在 ./src/routes 目錄下新建 News.tsx ( ./src/routes/News.tsx)(這是二級(jí)頁面);

    import * as React from "react";
    
    export interface INewsProps {
        newslist?: Array<{title: string, content: "string"}>;
    };
    
    const News: React.SFC = ( props: INewsProps ): JSX.Element => {
        const newslist = props.newslist ? props.newslist : [
            {
                title: "title1",
                content: "content1",
            }
        ];
        
        return (
            

                
            
        );
    };

4 . 寫好了我們的容器組件, 進(jìn)入到 ./src, 在項(xiàng)目根目錄下新建 router.tsx( ./src/router.tsx), 配置我們的路由!

    import * as React from "react";
    
    import { Router, Route, Switch } from "dva/router";
    
    import Home from "./routes/Home";        // 引入 首頁 組件
    import News from "./routes/News";        // 引入 二級(jí) 頁面
    
    export default function RouterConfig ({ history }){        // 路由配置
        return (
            
                 
                     
                     
                 
            
        );
    }

5 . 最后一步, 去到 ./src/ 根目錄, 新建 index.tsx(./src/index.tsx ), 并寫入如下代碼!

    import dva from "dva";
    import createhistory from "history/createBrowserHistory";
    
    const app = dva({
        history: createhistory(),
    });
    
    app.router( require("./router").default );
    
    app.start("#root");

Ps: 由于 dva 的默認(rèn)路由是 Hash 路由, 崩崩有點(diǎn)強(qiáng)迫, 所以在 const app = dva({}) 中使用了 H5 的 historyAPI, 比較好看;

6 . 在命令行執(zhí)行  npm start, 代碼沒寫錯(cuò)的話,應(yīng)該就能看到這樣的主頁

7 . 繼續(xù)在瀏覽器地址欄中輸入 /news, 即可看到跳轉(zhuǎn)到了 news 頁面

總結(jié): 崩崩只學(xué)了 2 天的 ts,所以就迫不及待的將其融入到了 redux+react
的實(shí)踐中, 期間踩了不少的坑, 發(fā)現(xiàn) redux 其實(shí)對(duì) ts 的支持不是很友好, 所以果斷地轉(zhuǎn)向了更加輕
量的 dva, 而網(wǎng)上的對(duì) dva+react+ts 的配置少之又少,而且是過時(shí)的東西, 所以分享給大家..., 另外代碼沒有過多的注釋, dva 文檔鏈接描述  已經(jīng)講得很詳細(xì)了, 崩崩覺得沒必要再說了!
要睡覺了, 就碼這么多了, 永遠(yuǎn)熱愛前端的崩崩!!