In-depth study of best practices for TypeScript, React, Redux, and Ant-Design

Time:2019-10-4

Preface

Atwood’s Law refers to the any application that can be written in JavaScript, will eventually be, will, which means that any application that can be written in the end will be written in the end.

In the use of new technology, avoid step by step. If you try to combine two unfamiliar new technologies together, you will be very likely to be rubbed on the ground. Yarn/npm and React scaffolding and other technologies are prerequisite. Later I will continue to write PWA in-depth and Node.js cluster load balancing Nginx, webpack principle analysis, etc. thank you for your official article on my last article. Refinement

Before using TypeScript, you must devote yourself to learning the following and try again:

  • TypeScript must have knowledge:
    • The javaScript tutorial must be read several times and carefully, otherwise you will be rubbed on the ground by TS.
    • TypeScript documents, what is TypeScript, must be read 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.
    • Front-end performance optimization incomplete manual, this is my article, should also see. Ha ha ha.
    • After introducing the configuration, there will be a lot of summaries.~
  • React directly read documents, React official Chinese documents, I think React’s Chinese document has been written very well, and it is still relatively simple to learn.
  • Redux, before learning Redux, it is recommended to read the official document several times, and then the props context custom event pubsub-js, these components transfer data in a familiar way before going to Redux, because the Redux writing is very fixed, just can not use modifier in TS, need the most original writing. The following code is commented, so you can see it later. (Both HOOKS and HOC can try to use them because React may use them more often in the future.) Redux official documents
  • Ant-Design, the best UI component library in React ecosystem at present, has 90% usage rate, supports both mobile and PC terminals. Pro can also be used out of the box. It is strongly recommended that open configuration be loaded on demand. Backstage TO-B project is not too comfortable to use. Ant-Design official website~

Don’t be too impetuous to learn technology. You want to learn everything but you can’t learn anything. The author’s experience and persistent efforts to break each technology one by one, and finally combine them to use, like a duck to water, the foundation is not strong, and the ground is rocking. The code of this article will match all the configurations and Redux, Ant-Design, open the box, then use other functions. You can see that the Ant-Design document is added to it.

Officially opened

This article describes how to configure, how to build GitHub source address for the whole business process.

  • Packet manager, either yarn or npm, is recommended here because Ant-Design officially recommends yarn, which automatically adds dependencies.
  • Use another version of the official create-react-app with Create React App using TypeScript
  • Reaction-scripts-ts automatically configures a create-react-app project to support TypeScript. You can use it like this: create-react-app my-app — scripts-version = react-scripts-ts, provided you download create-react-app globally

Note that it is a third-party project and not part of Create React App.

Necessary dependencies: All in the package. JSON file.

Note that most TS packages require two, one native and one @types/ start.


{
"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": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}

*` Ant-Design `On-demand Load Configuration `config-overrides.js`


const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
})
);
```

Tsconfig.json, TS’s configuration file, I haven’t changed much.


{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"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": [
"src"
]
}

Configuration of Redux less

It doesn’t matter if you don’t understand the configuration. I’ve built all the shelves for you. Just follow the official network of TS and Ant-Design to operate OK.

  • We focus on the rationale, first of all, why use TypeScript?
    • Using TypeScript will eventually be compiled into JS, so it’s a superset of JS.
    • TypeScript with static type checking, the third-party packages are basically TS source code, easy to view and debug.
    • After using TS, I feel that my ability to debug BUG has improved a lot, and I rarely make mistakes, thinking more rigorously, after all, this is a language that can make mistakes if the order is incorrect.
    • If you still use any public when using TS, I suggest you quit TS.
    • Once on TS, everything is different, such as the modifier can not be used.
    • The combination of React and TS is preferred for large-scale projects, which makes code debugging and maintenance extremely convenient.
  • How can React be optimized? My opening article has a link~
  • Ant-Design is so hot, how to learn? It is a component library with label attributes and methods, and everything is hidden in the document.
  • React’s Redux and VUEX are all one-way data streams. They are easy to write and easy to write. They are never API, but the overall technical architecture and implementation principles.

When writing TS code, you often ask yourself what kind of type it might be, whether it is public or private, what type of function to return, what parameters to accept, what is necessary and what may not be, then consider namespace interface merging, class merging, inheriting these problems.

Complex software needs complex design. Object-oriented is a good design method. One of the benefits of TS is that TS provides the industry-recognized class (ES5 + also supports), generic, encapsulation, interface object-oriented design capabilities to enhance JS’s object-oriented design capabilities.

When you travel through the TS world and go back to the JS world, you will find that you rarely make mistakes in writing code unless it is a business logic problem.~

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.