React项目从Javascript到Typescript的迁移经验总结(5)

实际项目里，组件的state可能会有很多值，如果按照我们上面这种方式去写会比较麻烦，所以可以考虑一下下面这个简便写法：

import React,{MouseEvent} from "react";  
interface TeachersProps{  
  user:User  
}  
const initialState = {  
  pageNo:1,  
  pageSize:20,  
  total:0,  
  teacherList:[]  
}  
type TeachersState = Readonly<typeof initialState>  
export default class Teachers extends React.PureComponent<TeachersProps,TeachersState> {  
    readonly state = initialState  
    handleClick=(e:MouseEvent<HTMLDivElement>)=>{  
        console.log(e.target);  
    }  
    //...省略部分代码  
    render(){  
        return <div onClick={this.handleClick}>点击我</div>  
    }  
}  

这种写法会简便很多代码，但是类型限制效果上明显不如第一种，所以这种方法仅仅作为参考，可根据实际情况去选择。

Ant Design丢失样式文件

当我们把项目启动起来之后，某些同学的页面可能会出现样式丢失的情况，如下：

打开控制台，我们发现Ant Design的类名都找不到对应的样式：

出现这种情况是因为我们把babel删除之后，用来按需加载组件样式文件的babel插件babel-plugin-import也随着丢失了。不过typescript社区有一个babel-plugin-import的Typescript版本，叫做“ts-import-plugin”，我们先来安装一下：

yarn add ts-import-plugin -D 

这个插件需要结合ts-loader使用，所以webpack配置中需要做如下调整：

const tsImportPluginFactory = require('ts-import-plugin')  
module.exports = {  
    //省略部分代码...  
    module:{  
        rules:[{  
            test: /\.tsx?$/,  
            loader: "ts-loader",  
            options: {  
                transpileOnly: true,//（可选）  
                getCustomTransformers: () => ({  
                  before: [  
                    tsImportPluginFactory({  
                        libraryDirectory: 'es',  
                        libraryName: 'antd',  
                        style: true  
                    })  
                  ]  
                })  
            }  
        }]  
    }  
    //省略部分代码...  
}  

（编辑：ASP站长网）