创建react-ts项目(简易)

创建文件 npx create-react-app my-app --template typescript 在命令行中，添加 --template typescript 表示创建支持 TS 的项目

• .ts ts 文件的后缀名
• .tsx 是在 TS 中使用 React 组件时，需要使用该后缀。只要文件中使用了jsx模板，后缀名必须叫tsx

安装依赖包 npm i redux react-redux redux-thunk redux-devtools-extension

安装axios包 npm i axios 如果报错说axios模块找不到就 npm i @types/axios

安装路由 npm i react-router-dom@5.3.0

安装类型声明文件

npm i @types/react-router-dom

---

新建文件 store/index.ts

import { createStore } from 'redux'
import reducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(reducer, composeWithDevTools())

export default store

新建文件 store/reducers/index.ts

import { combineReducers } from 'redux'
import todos from './todos'
const rootReducer = combineReducers({
  todos,
})
export default rootReducer

新建文件 store/reducers/todos.ts

const initValue = [
  {
    id: 1,
    name: '吃饭',
    isDone: false,
  },
  {
    id: 2,
    name: '睡觉',
    isDone: true,
  },
  {
    id: 3,
    name: '打豆豆',
    isDone: false,
  },
]
export default function todos(state = initValue, action: any) {
  return state
}

新建文件store/action/todos

import axios from 'axios'
import { Dispatch } from 'react'

index.tsx中

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

18版本
// import {createRoot} from 'react-dom/client'
// const container=document.getElementById('root') as Element
// const root =createRoot(container)
// root.render(<App></App>)

tsconfig配置文件

{
  // 编译选项
  "compilerOptions": {
    // 生成代码的语言版本：将我们写的 TS 代码编译成哪个版本的 JS 代码
    // 命令行： tsc --target es5 11-测试TS配置文件.ts
    "target": "es5",
    // ts内置的库
    // 如果删除了dom库，则无法使用document.getElementById
    "lib": ["dom", "dom.iterable", "esnext"],
    // 允许 ts 编译器编译 js 文件
    // 允许 import js文件
    "allowJs": true,
    // 跳过类型声明文件的类型检查
    "skipLibCheck": true,
    // es 模块 互操作，屏蔽 ESModule 和 CommonJS 之间的差异
    "esModuleInterop": true,
    // 即使模块没有显式指定 default 导出，也允许通过 import x from 'y' 
    "allowSyntheticDefaultImports": true,
    // 开启严格模式
    "strict": true,
    // 对文件名称强制区分大小写  Demo.ts  
    "forceConsistentCasingInFileNames": true,
    // 为 switch 语句启用错误报告
    // 如果switch中没有break 或者 return 就报错
    "noFallthroughCasesInSwitch": true,
    // 生成代码的模块化标准
    "module": "esnext",
    // 模块解析（查找）策略
    "moduleResolution": "node",
    // 允许导入扩展名为.json的模块
    "resolveJsonModule": true,
    // 是否将没有 import/export 的文件视为旧（全局而非模块化）脚本文件
    "isolatedModules": true,
    // 编译时不生成任何文件（只进行类型检查）
    "noEmit": true,
    // 指定将 JSX 编译成什么形式
    "jsx": "react-jsx"
  },
  // 指定允许 ts 处理的目录
  "include": ["src"]
}

在action中模块

在定义一个模块单独处理这些定义的类型

去action中模块调用这个