学习用TypeScript写React组件

为了折腾，简单的学习了下TypeScript,感觉确实不错。也为了不断学习，避免落伍，所以就折腾不断。

前段时间用ES6，antd+dva写了一些demo,发现antd使用TypeScript实现的，而且angular2也采用了TypeScript。既然这么多项目都提前使用了TypeScript,而我又是React的粉，那么还是先研究下TypeScript实现React组件。

鉴于刚开始，还是站在别人的肩膀上开始吧。

工具选择

本人对webpack配置略知一二，但暂时还不想太深入到工程方面的研究，所以，工具选择开源的，有阿里使用的atool-build,roadhog. 尝试多次，鉴于之前的项目都是用的roadhog,而且也看了roadhog git上面已经说支持TypeScript,所以最终选择了roadhog,因为它配置确实简单、省心。

不过要使用roadhog的0.6.0-beta2版本(因为之前的版本不支持TypeScript)：

npm install roadhog@0.6.0-beta2 --save-dev

配置文件:

//.roadhogrc
{
  "entry": "src/index.js","publicPath": "/dist/","outputPath": "./dist","env": {
    "development": {
      "extraBabelPlugins": [
        "dva-hmr","transform-runtime"
      ]
    },"production": {
      "extraBabelPlugins": [
        "transform-runtime",["import",{ "libraryName": "antd","style": "css" }] // 加入这一条，import antd的样式的时候才不会被md5
      ]
    }
  }
}

项目结构

+------- src
         +----- components
         +----- models
         +----- routes
+------- .roadhog
+------- node_modules
+------- package.json
+------- ...

项目结构基本和antd-admin的结构保持一致。

入口文件

// index.js
import './index.html'
import 'babel-polyfill'
import dva,{ connect } from 'dva'
import createLoading from 'dva-loading'
import { browserHistory,Router,Route } from 'dva/router'
 
/**
 * @desc 以下是解决域名下面子目录部署问题
 * 域名项目下面一般会有多个子项目，那么部署的时候，子目录的作用就至关重要了。
 * 不借助basename不太容易实现。
 */
import { useRouterHistory } from 'dva/router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
 
const history = useRouterHistory(createBrowserHistory)({basename: '/mda'})
 
// 1. Initialize
const app = dva({
  ...createLoading(),//  history: browserHistory,history,onError (error) {
    console.error('app onError -- ',error)
  },})
 
// 2. Model
app.model(require('./models/app'))
 
 
// 3. Router
app.router(require('./router'))
 
// 4. Start
app.start('#root')

应用模块(src/routes/app.js)

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
 
 
import {
  Icon,Row,Col,Button,Modal,} from '../components'
import 'antd/dist/antd.css'
import styles from './app.less'
 
function App ({ children,location,dispatch,app,loading }) {
  const {
    isVisible,} = app
 
  const showModal = () => {
    dispatch({
      type: 'app/showModal',})
  }
 
  const handleOk = () => {
  }
 
  const handleCancel = () => {
    dispatch({
      type: 'app/hideModal',})
  }
  return (
    <div className={styles.normal}>
      <Row>This is a row</Row>
      <Row>
        <Col span={12}>这是一个Col</Col>
        <Col span={12}>这是一个Col</Col>
      </Row>
      <Button type="primary" onClick={showModal}><Icon type="link" />弹窗</Button>
      <Modal title="弹窗标题" visible={isVisible} onOk={handleOk} onCancel={handleCancel}>
        <div>Hello</div>
      </Modal>
    </div>
  )
}
 
App.propTypes = {
  children: PropTypes.element.isrequired,location: PropTypes.object,dispatch: PropTypes.func,app: PropTypes.object,loading: PropTypes.bool,}
 
export default connect(({ app,loading }) => ({ app,loading: loading.models.app }))(App)

组件

组件位于src/components,开始学习的时候，可以直接从ant-design源代码的components中拷贝代码过来，对于简单的组件Button,Grid,Icon,可以拷贝过来，然后直接跑起来，不过注意安装必要的包。

基本依赖包

{
    "@types/react": "^15.0.22","@types/react-dom": "^0.14.23","antd": "^2.9.1","classnames": "^2.2.5","dva": "^1.2.1","dva-loading": "^0.2.1","object-assign": "^4.1.1","omit.js": "^0.1.0","prop-types": "^15.5.8","rc-animate": "^2.3.6","rc-dialog": "^6.5.8","rc-util": "^4.0.2","react": "^15.5.4","react-dom": "^15.5.4"
}

总结

工具、项目搭建起来，下面可以舒心的学习TypeScript开发React组件了。鉴于本人也是学习，还有太多需要努力的。希望有志同学一起学习探讨。

下面列举出一些坑:

roadhog貌似和dva关联起来了，没有仔细研究，不做路由配置，程序跑不起来，姑且先配置下简单的路由，让应用跑起来吧。
需要安装@types/react,@types/react-dom,虽然暂时还不太明白具体原理。
需要在根目录配置tsconfig.json,否则跑不起来
typings目录暂时没有用到，待学习
在迁移modal模块时，老是报错，最后解决方案在解决modal onClose赋值报错的问题

以下是相关命令

开发: npm run server
构建: npm run build

源代码

https://github.com/walkerqiao...