It may be the 50 React + TypeScript specifications and experiences you need(1)

there is no distinction between right and wrong, and there must be some imperfections, combining my daily development and experience. It allows you to write more rigorous code, and I hope it will be helpful after reading it.

1. Comments

(1) comments at the top of the file, including description, author, date

/**
 * @description xxxxxx
 * @author chengfeng
 * @since 19/05/21
 */

(2) comments on the module

/**
 * Copy Data
 * @param  {*}  data   Source data to copy
 * @param  {boolean} [isDeep=false] Is it a deep copy? Default is a shallow copy
 * @return {*}         Return copied data
 */

(3) Business code comments

/*Business Code Comment*/

(4) variable comments

interface IState {
  // Name
  name: string;
  // Telephone
  phone: number;
  // Address
  address: string;
}

2. Reference component order

• first reference the external component library, then the current component block level component, then the common function library in common, and finally the css style

import * as React from 'react';
import { Dropdown, Menu, Icon } from 'antd';
import Header from './Header';
import toast from 'common/toast';
import './index.less';

3. Quotation marks

• use single quotes, or backquotes of es6

4. Indent

• use two spaces

const handleCheck = () => {
  onCancel && onCancel();
  onClose && onClose();
};

5. Semicolon

• every expression except for a code block must be followed by a semicolon.

6. Parentheses

the following keywords must be followed by curly braces (even if the content of the code block is only one line): if, else, for, while, do, switch, try, catch, finally, with.

// not good
if (condition) doSomething();

// good
if (condition) {
  doSomething();
}

7. Space

• there must be a space on both sides of the binary and ternary operators, and no space is allowed between the unary operator and the Operand.

// bad
++ x;
y ++;
z = x?1:2;

// good
++x;
y++;
z = x ? 1 : 2;

• the opening curly braces {used as the beginning of a code block must be preceded by a space.

// bad
if (condition){
}

while (condition){
}

function funcName(){
}

// good
if (condition) {
}

while (condition) {
}

function funcName() {
}

• if / else / for / while / function / switch / do / try / catch / finally keyword must be followed by a space.

// bad
if(condition) {
}

while(condition) {
}

(function() {
})();

// good
if (condition) {
}

while (condition) {
}

(function () {
})();

• when an object is created, there must be spaces after: in the property, and spaces are not allowed before:.

// bad
var obj = {
    a : 1,
    b:2,
    c :3
};

// good
var obj = {
    a: 1,
    b: 2,
    c: 3
};

8. Line break

• the line must be wrapped at the end of each separate statement.
• in scenarios such as function declarations, function expressions, function calls, object creation, array creation, for statements, etc., line breaks before, or; are not allowed

// bad
var obj = {
    a: 1
    , b: 2
    , c: 3,
};

function test()
{
    ...
}
for (const key in object)
 {
  if (object.hasOwnProperty(key)) {
    const element = object[key];

  }
}
// good
var obj = {
    a: 1,
    b: 2,
    c: 3,
};

function test() {
    ...
}

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    const element = object[key];

  }
}

• after the following keywords: else, catch, finally do not need to wrap

// bad
if (condition) {
    ...
}
else {
    ...
}

try {
    ...
}
catch (e) {
    ...
}
finally {
    ...
}


// good
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

9. Array, object

• object attribute name does not need quotation marks;
• objects are written in indentation, not on one line;

The

• array ends without a comma.

The

• object should end with a comma.

// bad
const a = {
    'b': 1
};

const a = {b: 1};

const a = {
    b: 1,
    c: 2
};
const arr = [1, 2, 3, 4,];

// good
const a = {
    b: 1,
    c: 2,
};

const arr = [1, 2, 3, 4];

10. Name

• Class name: big hump style, letters and numbers, for example: AbcTest. Chinese characters, special symbols and non-large hump style are prohibited.

• function name: small hump style, letters and numbers, for example: abcTest. Prohibit Chinese characters, special symbols, prohibit non-small hump style, such as snake_case and so on.

• variable name: same function name.

• constant: all uppercase style, uppercase letters, numbers, and underscores, separated by underscores between words, for example: ABC_TEST. Chinese characters, special symbols and lowercase letters are prohibited.

• uses the onXxx form as the property name in props for callback.

interface IProps {
  onClose?: () => void;
  onOk?: (item: Record<string, any>) => void;
}

The event function within the

• component uses the beginning and end of handle, handleCheckBtn.
• uses a word in the form of withXxx as the name of the high-level component.
• Interface naming is preceded by I for interface

interface IProps {}
interface IState {}