javaScriptプロジェクトはtypescriptに移行します.

フロントエンドに見えるトレンドtypescriptはますます広範な市場シェアを占めています.同時にサービス端末のnode.jsもtsで書くのに適しています.大型アプリケーションのメンテナンス性はとても重要です.
移転前項目
移転の例としては、es 6による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がDisppatch関数に入ってきたのが見えます.

...
let AddTodo = ({ dispatch }) => {
  let input
  ...

これはtsの中でどう処理しますか?霧水を始めました.検索によって、tsの中でインターフェースがPropTypesを定義する必要があります.どうすればいいですか?

1.   interface
interface AddTodoProps {
    dispatch : Dispatch
}
2.       
    ...
let AddTodo = (props : AddTodoProps) => {
    let {dispatch} = props
    let input : any
    ...

Displathの泛型はなぜanyですか?今は固定タイプがありませんが、必ず伝えますので、anyを選びます.reactプロジェクトは様々なコンポーネントで構成されていますが、ディスプレイコンポーネントでも容器アセンブリでもPropsを使用する必要があります.これは移転の過程でインターフェースを通じてPropTypesを置換する必要があります.処理方式はすべて本例と同じです.さらに重要なコンテナコンポーネントの移転は、FilterLink.tsを例としている:
FilterLink.jsでは、mapStatiteToProps、mapDisplatToPropsではstateが使われています.ownPropsは直接に見てタイプが確定できません.それらの呼び出しの過程を見ても、持っている属性や方法が見られます.typescriptでは当然このようにあいまいで不明な状況が発生しないので、interfaceで定義する必要があります.

interface FilterLinkState {
    visibilityFilter : string
}

interface OwnProps {
    filter : string
}

大体こういうことです.次にconnectを通じてdispatch方法をreact-reduxに引き継ぐ必要がある.connect関数はまた、パラメータに使用される可能性があるので、導入されたコンポーネントと互換性のない問題が発生します.次にこの状況を説明します.
移転中にVisible TodoListがこのピットを踏んだことがあるので、これを例に説明します.移転を開始したばかりの時は、mapStatiteToProps、mapDisplatToPropsに代表される意味が分かりませんでした.また、その中の戻り値は具体的に意味があり、最終的にはPropsに戻ります.したがって、戻り値には、ディスプレイコンポーネントの1つ以上の値や関数が含まれます.

const mapStateToProps = (state : VisibleTodoState) => {
    return {
        todos : getVisibleTodos(state.todos,state.visibilityFilter)
    }
}

const mapDispatchToProps = (dispatch : Dispatch) => {
    return {
        onTodoClick : (id : number) => {
            dispatch(toggleTodo(id))
        }
    }
}

上記の2つの関数が戻ってくるtodosまたはontodoClickはいずれもTodoListコンポーネントに必要なProps値の一部です.このようにgetVisible Todos関数から戻ってきたtodos、つまりTodoListに必要なtodosのタイプTodosと一致しています.これまではこの問題で互換性がないということです.reactのリアルタイムコンパイルは検索問題に対してとても友好的で、そしてvscodeを通じて加持します.バッグの間違いやtypescriptのことはあまり知らないので、間違いを調べるのはあまり得意ではないですが、大体の手順では異常スタックを通してネットで見て、一番小さい異常語句は一番原子の異常源です.タイプが合う上では基本的にconnectパラメータは互換性に問題がありません.
また、よくない問題がreduceの部分に現れます.redux仕様では、reduceが伝達関数として存在することは問題ないと思うかもしれませんが、reduxのcommoneReducersを通じて、すべてのreducerを統合してstore管理に同意します.タイプ互換の問題も設計しました.もちろんここでピットを踏んだことがあります.todos.tsを通してみます.
todos reducerのパラメータタイプは(state:Todo[],action:アクション)であり、戻ってきた状態も同じTodos[]ですが、todos.jsでstate.mapを経由してフィニッシュ操作してtodots.tsに戻りました.戻る値はTodo[](124; 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'.
  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プロジェクトはType Scriptステップ及び遭遇した問題に移行します.
Creat-rect-AppにType Script(漢化)を使用します.
EDIT添加Type Script
http://www.que01.top/2018/11/05/2018-11-5-typescript-redux-starter/