記 vscode 搭建 Typescript+React+Dva 開發環境

[ 做爲2018年前端最應該學的技術 ], Typescript 確實惹火, 這兩天崩崩也是自學了一下 ts. 而且配置了一個簡單的基於 Dva+React+Typescript+Tslint 的環境, 因爲其餘的百度教程都是 17 年或者更早, 不少已通過時了, 因此想一想仍是分享經驗給自學的friends!

---

第一步

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

npm install -g typescript

第二步

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

npm install -g dva-cli

第三步

• . 進入你本身的項目目錄

  cd d:/code/4-Dva+React\1-dva+react_firstday

  

---

• . 使用 dva-cli 建立項目, 建立好的項目目錄以下:

  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配置項 )

  在項目 根目錄 下新建 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規範 )

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

{
        "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 的相關配置已經所有完成, 接着該測試一下啦?

---

第四步

1 . 刪除 ./src 目錄下的全部文件, 不要刪文件夾;

---

2 . 在 ./src/routes 目錄下新建 Home.tsx( ./src/routes/Home.tsx)(默認首頁);

Ps: dva 中 routes 至關於 redux 的 containers(容器組件), 具體相關概念能夠參考連接描述 , Home.tsx 的代碼以下:

import * as React from 'react';
    
    export interface IAppProps {
        name?: string;
    };
    
    const Home: React.SFC<IAppProps> = (props: IAppProps): JSX.Element => {
        return (
            <div>
                <h1>
                    Hello {props.name ? props.name : "崩崩呢"}
                </h1>
            </div>
        );
    };
    
    export default Home;

---

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

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

---

4 . 寫好了咱們的容器組件, 進入到 ./src, 在項目根目錄下新建 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';        // 引入 二級 頁面
    
    export default function RouterConfig ({ history }){        // 路由配置
        return (
            <Router history={history}>
                 <Switch>
                     <Route path="/" exact component={Home} />
                     <Route path="/news" component={News} />
                 </Switch>
            </Router>
        );
    }

---

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 的默認路由是 Hash 路由, 崩崩有點強迫, 因此在 const app = dva({}) 中使用了 H5 的 historyAPI, 比較好看;

---

6 . 在命令行執行 npm start, 代碼沒寫錯的話,應該就能看到這樣的主頁

---

7 . 繼續在瀏覽器地址欄中輸入 /news, 便可看到跳轉到了 news 頁面

---

第五步 (大功告成)

總結: 崩崩只學了 2 天的 ts,因此就火燒眉毛的將其融入到了 redux+react
的實踐中, 期間踩了很多的坑, 發現 redux 其實對 ts 的支持不是很友好, 因此果斷地轉向了更加輕
量的 dva, 而網上的對 dva+react+ts 的配置少之又少,並且是過期的東西, 因此分享給你們..., 另外代碼沒有過多的註釋, dva 文檔連接描述 已經講得很詳細了, 崩崩以爲不必再說了!

要睡覺了, 就碼這麼多了, 永遠熱愛前端的崩崩!!