ts对于js来说有着明显的优势：

1. 为JavaScript提供大量的数据类型

2. 完善了面向对象编程

下面我们使用ts写一个 redux 案例完善一下我们的基础：

安装：

1.创建常量

export const ADD='ADD'


export interface CounterStartType{
    count:number
}

export interfaceCounterActionType{
    type :typeof ADD
}

2.创建action 函数的返回值

import {ADD} from '../contants'
export const add=()=>{
return {
 type:ADD
}
}

3.实现reducer

import {ADD，CounterActionType,CounterStateType} from './contants'

export const counter=(state:CounterStateType={count:0},action:CounterActionType)=>{
    switch (action.type){
        case ADD:
        return {count:state.count+1}
        default:
            return state;
    }
}

4.合并reducer

ReturnType 是 TypeScript 中的一个内置类型，用于获取一个函数类型的返回值类型。

在 TypeScript 中，如果你定义了一个函数，那么它的返回值类型可以显式地指定，也可以根据函数的实现自动推断。使用 ReturnType 可以获取函数类型的返回值类型，这对于编写泛型函数或需要访问函数返回值类型的函数非常有用。

在 TypeScript 中，type 是用来定义类型别名或者定义一个自定义的类型的关键字。

类型别名可以帮助我们给一个已有的类型或组合类型起一个新的名字，让代码更具有可读性和可维护性，同时也可以方便地重复使用该类型别名。比如在 Redux 中，我们可以使用 type 关键字定义一个类型别名，表示整个 Redux store 的状态类型。

自定义类型则是指使用 type 关键字自定义一个新的类型。比如我们可以使用 type 关键字定义一个新的类型 Age，表示一个人的年龄，然后在程序中使用这个类型。

总之，type 关键字在 TypeScript 中用来帮助我们定义更加具有语义化的类型别名或自定义类型，使得代码更加清晰易懂。

import {combineReducers} from 'redux'
//引入counter
import {counter} from './counter'
export const rootReducer=combineReducers({
        counter:counter
})

exprot type StoreState=ReturnType<typeof rootReducer>
//`type` 关键字可以用来定义类型别名，以便在代码中重复使用相同的类型。

5.添加全局store

const store = legacy_createStore(rootReducer);
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>

    <App />
  
  </Provider>
);

6.修改App组件写功能

import * as React from "react";
import { add } from "./action";
import counter from "./reducer/reducer";
import { connect } from "react-redux";
import { StoreState } from "./reducer";
//创建接口
interface ICounter{
    count:number
}
interface Iprops{
    counter:ICounter;
    add:typeof add;
}
const  King:React.FC<Iprops>=(props)=>{
let {counter,add}=props;
return(
<>
       <h3>King</h3>
      <p>{counter.count}</p>
      <button onClick={() => add()}>+</button>
</>
)

}
const mapStateToprops=(state:StoreState,ownProps: any)=>{
 return {
  counter:state.counter,
 }
}
export default connect(mapStateToProps, { add })(King);

最后效果应该是点击按钮进行加一！