react+ts准备工作—阿楠

安装项目

• 安装全局yarn
• npm i yarn -g
• // 安装项目
• npx create-react-app 你的项目名 --template typescript
• 进入项目目录
• cd 你的项目名
• 安装需要的支持库(redux,react-router-dom)
• yarn add redux react-redux@types/react-redux -S
• yarn add react-router-dom @types/react-router-dom -S
• 安装需要的第三库(antd,babel-plugin-import,axios,mockjs)
• yarn add babel-plugin-import -D
• yarn add antd axios mockjs -S
• node-sass
• yarn add node-sass

配置babel文件–antd

// .babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 会加载 less 文件
    }]
  ]
}

配置mobx—不需要

• yarn add mobx mobx-react -s
• yarn add @babel/plugin-proposal-decorators -D
• yarn add @babel/plugin-proposal-class-properties -D

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }
  "eslintConfig": {
    "parserOptions": {
      "ecmaFeatures": {
        "legacyDecorators": true
      }
    },
    "extends": "react-app"
 },

声明全局的变量

// 举例
import Mockurl from './Mockurl'
declare module 'react'{
  interface Component{
    $mockurl:any
  }
}
Component.prototype
$mockurl = Mockurl

挂在window对象

// store挂在在window对象上
import store from './store'
declare global{
  interface Window{
    store:any
  }
}
window.store = store

antd引用报错

解决措施

• 删除掉index.tsx中的<React.StrictMode>

StrictMode 目前有助于：

• 识别不安全的生命周期
• 关于使用过时字符串 ref API 的警告
• 关于使用废弃的 findDOMNode 方法的警告
• 检测意外的副作用
• 检测过时的 context API