前端可见的趋势typescript会占有越来越广的市场份额，同时服务端node.js也更适合用ts来写，因为对于大型应用可维护性非常重要，采用ts能够编译器避免问题，对于大型应用的开发比较适合。
迁移前项目
作为迁移的例子，采用es6编写的todo项目。技术栈采用react + redux。作为redux项目采用了标准的分层模型，分为action,reduce,state,container，component.通过redux来进行状态管理不得不说具有一定的复杂性，但是用起来还是很爽的，而且对于性能的优化也是作了相关的处理，但在迁移过程中问题最多就是这里
迁移至typescript
首先看到项目的入口index.ts需要最先创建，接着创建App.ts,createStore(),Provider，reducer都需要引入或创建。其中App,Reducers重点需要。简单的步骤略过不表，看到AddTodo.tsx第一个需要注意的是在js中是通过React PropTypes定义属性校验的。在ts中则不需要,因为采用的是无状态组件的简单定义方式，没有通过继承Component,并且在js中采用了结构赋值的方式传入了dispatch，所以可以看到在redux中默认是给组件的Props传入了 Dispatch函数的。
...
let AddTodo = ({ dispatch }) => {
let input
...
这在ts中怎么处理呢？ 开始一头雾水，通过查找搜索可知ts中需要接口定义Props替代PropTypes,怎么做呢?
1.先定义interface
interface AddTodoProps {
dispatch : Dispatch<any>
}
2.函数中使用接口
...
let AddTodo = (props : AddTodoProps) => {
let {dispatch} = props
let input : any
...
至于为什么Dispath中的泛型为any.因为现在并没有固定类型，但是又是必传的所以选择any。react项目通过各种各样组件构成，无论是展示组件还是容器组件都需要用到Props,这在迁移的过程中，都需要通过interface的方式来替换掉PropTypes。处理方式都与本例相同。还有比较关键的容器组件的迁移以FilterLink.ts作为例子：
可以看到在FilterLink.js中,在mapStateToProps,mapDispatchToProps中都是使用的是state,ownProps这直接看无法确定类型，看它们的调用过程还是可以看到具有的属性或者方法。那么在typescript中当然不能出现这么模糊不明的情况，所以需要通过interface定义:
interface FilterLinkState {
visibilityFilter : string
}
interface OwnProps {
filter : string
}
大概也就是这样。接下来则需要通过connect来让react-redux接管dispatch方法。connect函数也是一个容易出问题的地方，因为可能用于参数，和传入的组件产生不兼容的问题。接下来说明这种情况。
在迁移的过程中VisibleTodoList踩过这个坑，所以以这个为例说明一下。刚开始迁移的时候没有理解到mapStateToProps,mapDispatchToProps所代表的意义，以及其中的返回值具体的意义，可以看到最终返回的是Props所以返回值中会包括展示组件的一个或多个值或函数
const mapStateToProps = (state : VisibleTodoState) => {
return {
todos : getVisibleTodos(state.todos,state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch : Dispatch) => {
return {
onTodoClick : (id : number) => {
dispatch(toggleTodo(id))
}
}
}
可以看到以上两个函数返回的todos,还是onTodoClick都是TodoList组件所需要的Props值中的一部分。既然如此getVisibleTodos函数返回的todos也就是要与TodoList所需要的todos的类型Todo是一致的，之前因为这个问题而导致不兼容。react的实时编译对查找问题还是挺友好的，然后通过vscode加持。因为对包错异常和typescript的不太熟悉，所以对查错不是很擅长，不过大体步骤可以看到是通过异常栈从下网上看，最小的异常语句是最原子的异常出处。类型对的上基本上connect参数就不会出现兼容性问题了。
还有很坑的问题会出现在reduce部分。虽然可能会觉得redux规范中，reduce作为传函数存在的不会有问题，但是因为会通过redux 的combineReducers把所有的reducer合并起来同意给store管理。所以也设计到类型兼容的问题。
当然这里也是踩过坑的，一下通过todos.ts为例。
todos reducer的参数类型为(state : Todo[],action : Action)，并且返回的状态也同样为Todo[].可是在todos.js中通过state.map 作为遍历操作，然后返回到了todo.ts中不行了。因为返回值为Todo[] | void[] 的联合类型，尝试了几种方式都不行最终通过for...of循环编写同样的功能完成。
1.todo.js中
case 'TOGGLE_TODO':
return state.map(todo =>
(todo.id === action.id)
? {...todo, completed: !todo.completed}
: todo
)
2.todo.ts中
报错的情况：
return state.map(todo => {
todo.id === action.id ? todo.completed = !todo.completed : todo
})
错误：
ype '(state: Todo[] | undefined, action: Action) => Todo[] | void[]' is not assignable to type 'Reducer<Todo[], Action>'.
Type 'Todo[] | void[]' is not assignable to type 'Todo[]'.
Type 'void[]' is not assignable to type 'Todo[]'.
Type 'void' is not assignable to type 'Todo'.t
for...of修正过的情况：
for (let todo of state) {
if (todo.id === action.id ) {
todo.completed = !todo.completed
}
}
return state
所以通过实践觉得在ts中数组的map遍历会有一定的问题。
需要注意的点
需要注意的在上一部分已经提到过，当然还有很多需要注意，我也是在实践中一一碰到和解决。以下做出一些简单的总结：
注意：
- PropTypes转 interface的类型
- Props,State都需要定义Interface类型
- 数组的map函数可能会有问题
- 类型兼容的问题，大部分可能是与Props的值和函数有关
源码
参考资料
JavaScript 项目迁移到 TypeScript 步骤以及遇到的问题
在 Create-React-App 中使用 TypeScript(汉化)
http://www.que01.top/2018/11/05/2018-11-5-typescript-redux-starter/
网友评论