前端可见的趋势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的值和函数有关
源码

有兴趣可参考源码对比。js版本源码
ts版本源码

参考资料

JavaScript 项目迁移到 TypeScript 步骤以及遇到的问题

在 Create-React-App 中使用 TypeScript(汉化)

EDIT
添加 TypeScript

http://www.que01.top/2018/11/05/2018-11-5-typescript-redux-starter/