Best practices for TypeScript, React, Redux and Ant-Design

  antd, css, html5, javascript, typescript


Atwood’s law refers toany application that can be written in JavaScript, will eventually be written in JavaScriptAny that can be usedJavaScriptTo write applications, will eventually useJavaScriptTo write “

When using new technologies, do not take it step by step. If you try to combine two unfamiliar new technologies, you are likely to be rubbed on the ground, willyarn/npmAndReactScaffolding and other technologies are prerequisites, and I will continue to write later.PWA deepensAndNode.jsCluster load balancingNginx,webpackPrinciple analysis, etc ~ thank youThink no officialFor my last articleAdd essence~

In useTypeScriptBefore, pleaseBe sure to invest a lot.Learn the following and try again:

  • TypeScriptEssential knowledge:

    • javaScriptIn particularRuan Yifeng’s ES6 CourseYou must watch it several times, watch it carefully, or you will beTSRub on the ground
    • TypeScriptDocuments,What is TypeScript, must look very carefully, because it is possible to develop a very small problem is that you do not know the knowledge points, then it may take you a lot of time to solve it.
    • Incomplete Manual for Front End Performance OptimizationThis is an article written by myself and should also be read. Ha ha ha ~
    • After the introduction of the configuration, there will be a lot of summaries.~
  • ReactLook directly at the documents,React Official Chinese Document, I thinkReactThe Chinese document of the is very well written, and it is still relatively simple to learn ~
  • ReduxLearningReduxBefore, it was suggested to read the official documents several times, and thenProps context custom event pubsub-jsThese components transfer data in a familiar wayReduxBecauseReduxThe writing is very fixed, only inTSModifiers cannot be used in, but the original writing is required. The following code has comments, you can have a look at it then. (HOOKSAndHOCCan try to use, becauseReactIn the future, there may be a high probability of using these expressions)Redux official documentation
  • Ant-DesignAt presentReactEcological bestUIComponent library, percent90The usage rate of is supported by both mobile and PC terminals.proYou can also use it out of the box. It is highly recommended that the configuration be loaded on demand and in the background.TO-BThe project should not be too comfortable to use.Ant-Design official website ~

Don’t be too hasty in learning technology. If you want to learn everything, you can’t learn anything well. The author’s experience, persistent efforts, to break each technology one by one, finally combined to use, such as a duck to water.The foundation is not firm and the earth shakes.The code in this article will combine all configurations andRedux,Ant-DesignAll ready, out of the box, other functions you seeAnt-DesignJust add the document to it ~

Official opening:

  • This article introduces how to configure and how to build the overall business process.GitHub source address

    • Package Manager, UsingyarnOr ..npmYes, it is recommended here.yarnBecauseAnt-DesignOfficial recommendationyarnWhich automatically adds dependencies.
    • Use officialcreate-react-appAnother version of uses TypeScript with createrect app.
    • react-scripts-tsOne is automatically configuredcreate-react-appProject supportTypeScript. You can use it like this:create-react-app my-app --scripts-version=react-scripts-tsYou must download it globally.create-react-app

Please note that it is a third party project and is not part of Create React App.

  • Need for Dependency: All inpackage.jsonIn the file.
  • Please note here that most TS packages need the next two, one native and one @types/.

    "name": "antd-demo-ts",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@types/jest": "24.0.11",
    "@types/node": "11.13.7",
    "@types/react": "16.8.14",
    "@types/react-dom": "16.8.4",
    "@types/react-redux": "^7.0.8",
    "@types/react-router-dom": "^4.3.2",
    "@types/redux-thunk": "^2.1.0",
    "babel-plugin-import": "^1.11.0",
    "customize-cra": "^0.2.12",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-app-rewired": "^2.1.3",
    "react-dom": "^16.8.6",
    "react-redux": "^7.0.2",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.0",
    "redux-chunk": "^1.0.11",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "typescript": "3.4.5"
    "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
    "eslintConfig": {
    "extends": "react-app"
    "browserslist": {
    "production": [
    "not dead",
    "not op_mini all"
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
* `ant-design`load configuration on demand`config-overrides.js'
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
 module.exports = override(
 fixBabelImports('import', {
 libraryName: 'antd',
 libraryDirectory: 'es',
 style: true,
 javascriptEnabled: true,
 modifyVars: { '@primary-color': '#1DA57A' },
  • tsconfig.json,TSI haven’t changed much about the configuration file of

     "compilerOptions": {
     "target": "es5",
     "lib": [
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "preserve"
     "include": [
  • Redux less configuration


It doesn’t matter if you don’t understand the configuration. I’ve set up all the shelves for you. PressTSAndAnt-DesignThe official website to operateOK

  • We focus on the rationale, why should we use it in the first place?TypeScript?

    • UseTypeScriptWill eventually be compiled intoJSSo it isJSThe superset of.
    • TypeScriptWith static type checking, the current third-party packages are basically source codeTS, convenient to view debugging.
    • UseTSAfter that, I felt I was debuggingBUGThe ability has improved a lot, and few mistakes have been made. The thinking has become more rigorous. After all, this is a language that will report mistakes if the order of introduction is wrong.
    • If you are usingTSIt is still used all the time.any publicThen I suggest you quitTS
    • Once you’re on itTS, everything is different, such as modifier cannot be used.
    • First choice for large-scale projectsReactAndTSCombined, code debugging and maintenance are extremely convenient.
  • ReactHow to optimize? There is a link to my first article ~
  • Ant-DesignHow do you learn with such a fire? It is a component library with tag attributes and methods, and everything is hidden in the document.
  • ReactTheReduxAndVUEXSimilarly, it is a one-way data flow, written in a fixed way, and it is very easy to master the writing, but it will never be difficult.API, but the overall technical architecture and implementation principle.

WriteTSWhen writing code, you often ask yourself what type this might be and what this is.Public or private?This function should return what type, accept what parameters, what is necessary and what may not be, and then consider namespace interface merging, class merging and inheritance.

  • Complex software requires complex design, and object-oriented is a good design method, usingTSOne of the great benefits of is thatTSProvides industry-recognized classes (ES5+Also supports), generic, encapsulation, and interface object-oriented design capabilities to enhanceJSThe ability of object-oriented design based on.
  • When you were thereTSAfter the world roams, go back.JSThe world, then you will find that you write code rarely make mistakes, unless it is a business logic problem ~