antd typescript版源碼學習

Ant Design of React下面簡稱爲「antd」

GitHub上的antd是用typescript實現的，目前我在學習typescript，所以fork了一份antd的源碼。學習過程當中發現學習曲線很陡峭，不適合新手，所以想把antd中適合新手的東西（各個組件的typescript源碼）剝離出來，作到零配置,方便學習。

個人想法是:

1. 不使用less，直接使用antd.min.css文件;
2. 只提取antd源碼中的src文件夾下的tsx文件和測試文件
   

3. 使用Facebook的creat-react-app工具(下面簡稱爲CRA)建立項目，CRA幫咱們的項目配置了開發用的服務器（該服務器還能熱替換）、集成了Jest測試環境、集成了tslint代碼規範、 webpack也配置好了。新手不用關心配置文件，上來就是編碼和學習，Perfect ！

   ---

   進入正題，新手如何建立一個項目來學習antd源碼？

   1. Windows打開命令行工具，進入項目根目錄，輸入命令，能夠把 my-app 換成你想要的項目名，

   create-react-app my-app --scripts-version=react-scripts-ts

​ 若是提示create-react-app 不是可用的，說明要安裝CRA（-g 表示全局安裝）

npm install create-react-app -g

​ 若是你沒有安裝npm，那麼就去百度一下安裝node

​ 2. 步驟1 生成的目錄結構以下：

​ 這裏我把tslint.json的內容刪掉了，只留下花括號，這麼作是爲了方便後面咱們複製粘貼代碼。

tslint是定義代碼規範的，一旦代碼不規範就會出現紅色標識，很難看，乾脆就不要tslint了。

​ 3.在src目錄下新建components文件夾，複製antd源碼中src/components/icon下的index.tsx還有tests目錄下的index.test.tsx文件，打開文件發現：

紅色箭頭是antd源碼中沒有的，我本身琢磨着加的。

紅色波浪線表示相關模塊沒有安裝，或者是該模塊沒有tsd文件，先安裝模塊：

npm install classnames omit.js

npm install enzyme enzyme-adapter-react-16 react-test-renderer --save-dev

​ 4.安裝後發現紅色波浪線還在，這是由於咱們安裝的模塊沒有相應的聲明文件，這裏有個解決方法：創建一個和src同級的typings文件夾，新建index.d.ts，內容是：

/// <reference path="custom-typings.d.ts" />

新建custom-typings.d.ts，內容是：

declare module 'classnames';

declare module 'omit.js';

declare module 'enzyme';

declare module 'enzyme-adapter-react-16';

declare module 'react-test-renderer';

​ 5. 回到icon下的index.tsx，發現

import * as React from 'react';

之前我不是這樣寫的，是這樣的：

import React from 'react';

不單單是react，不少模塊都要換成新寫法，這讓我很難受，所以我設置成了之前的寫法，找到根目錄下的tsconfig.js和tsconfig.test.js,把module的值替換成'es2015':

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "es2015",
    "target": "es5",
    ……

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "es2015"
  }
}

然而vscode編輯器還會有紅色波浪線錯誤，只有react是個特例,我不懂爲何,導入React就按新寫法來,其餘模塊用原來寫法。爲何能夠這麼改呢？我會把相應的資源連接放在最下面，請自行理解。

這一步能夠解決相似"omit.js._default is not a function"的錯誤

6.Icon引入後,能夠運行 npm test ,test運行成功表明上面的步驟你很好地執行了;咱們接下來看看Icon的效果,編輯 App.tsx, 新增如下語句:

import './components/style/antd.min.css'
import Icon from  './components/icon';

<p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
          <Icon type="book" />
        </p>

運行 npm start , 會發現book圖標出現了.
這裏要注意,咱們引入了antd.min.css樣式文件,它定義了antd的組件樣式,是antd的最終產物之一.能夠經過 npm install antd ,安裝後在antd 的 dist 目錄下找到它.

7.咱們接着引入button組件, 把button目錄下的index.tsx, button.tsx, button-group.tsx 複製到本身項目下,編輯 button.tsx , 刪掉其中的

import PropTypes from 'prop-types';

static propTypes = {
    type: PropTypes.string,
    shape: PropTypes.oneOf(['circle', 'circle-outline']),
    size: PropTypes.oneOf(['large', 'default', 'small']),
    htmlType: PropTypes.oneOf(['submit', 'button', 'reset']),
    onClick: PropTypes.func,
    loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    className: PropTypes.string,
    icon: PropTypes.string,
  };

prop-types是運行時的類型檢查,我以爲有typescript就夠了.
8.如今試試button的效果,編輯App.tsx:

import Button from "./components/button";
<Button type='danger' icon='search'>Antd</Button>

運行 npm start 便可在瀏覽器中看到效果.

9.接下來編輯button的測試文件,複製antd源碼button目錄下的test目錄下的index.test.tsx,新增語句以下:

import { render, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

最新版的enzyme須要這樣設置.

運行 npm test 查看測試狀況

10.總結一下,上面是把antd源碼中的icon和button組件以及它們的測試文件剝離出來,運行在本身的項目當中, 研究antd的設計人員開發組件的思想, 這對咱們學習typescript , react組件開發頗有幫助.

使用的編輯器-VSCode

推薦閱讀

Antd官網

typescript中文官網

翻譯 | 開始使用 TypeScript 和 React

Jest snapshot testing(英文)

enzyme英文官網

上面建立的項目已託管在GitHub上：typescript-study