TypeScript development specification in the team

introduction

TypeScript is a superset of JavaScript, which expands many new features on the basis of JavaScript syntax, such as type annotations, classes and interfaces. Using TypeScript can avoid many common compilation errors in JavaScript at the development stage, and also improve the readability and maintainability of the code. In a team, writing code using TypeScript requires following some conventions in order to keep the code consistent and maintainable.

use strict mode

• TypeScript uses strict mode by default, but it is sometimes turned off by developers. When using TypeScript in a team, strict mode should always be enabled. It can help developers avoid some common mistakes and improve code quality.

Use readable naming conventions

• TypeScript supports different naming conventions such as camelCase and underscore. However, when using TypeScript in a team, you need to consistently use a readable naming convention to avoid unnecessary misunderstandings and mistakes. For example, when naming interfaces, you should use camelCase with an initial capital letter.

  interface User {
        
        
      name: string;
      age: number;
  }
  

Use strict type annotations

• In TypeScript, type annotations are used to specify the types of variables, functions, and classes. In single-person development, if you have good coding habits, TypeScript can automatically infer the type of the variable. But in the team, in order to ensure the clarity and consistency of the code, it is recommended to use strict type annotations. As in the following code example:

  // 使用类型注解明确变量的类型 
  let age: number = 18;
  
  // 使用类型注解明确函数参数和返回值的类型
  function add(a: number, b: number): number {
        
          return a + b; }
  
  // 使用类型注解明确类的成员属性和方法的类型
  class Student {
        
        
      name: string;
      age: number;
      constructor(name: string, age: number) {
        
        
          this.name = name;
          this.age = age;
      }
      study(): void {
        
        
          console.log(`${
          
          this.name} is studying.`);
      }
  }
  

Using interfaces and type aliases

• In TypeScript, complex data types such as objects, functions, and arrays can be defined using interfaces and type aliases. In teams, using interfaces and type aliases can improve code readability and maintainability. As in the following code example:

  // 使用接口定义对象类型
  interface Person {
        
        
      name: string;
      age: number;
  }
  
  // 使用类型别名定义函数类型
  type AddFunction = (a: number, b: number) => number;
  
  // 使用接口定义数组类型
  interface StudentList extends Array {
        
        }
  

Avoid any type

• any type will make your code more error-prone since it can accept any type of value. When using TypeScript in a team, you should try to avoid using any types, and use explicit types or union types instead.

Using optional and default parameters

• In TypeScript, you can use optional parameters and default parameters to make your code more flexible. In teams, using optional and default parameters can reduce code complexity and maintenance costs. As in the following code example:

  // 使用可选参数
  function greet(name?: string) {
        
        
      if (name) {
        
        
          console.log(`Hello, ${
          
          name}!`);
      } else {
        
        
          console.log(`Hello!`);
      }
  }
  
  // 使用默认参数
  function buyFruit(fruit: string = "Apple", count: number = 1) {
        
        
      console.log(`Buy ${
          
          count} ${
          
          fruit}s.`);
  }
  

Using ES6 modules

• In TypeScript, ES6 modules can be used to organize code and dependencies. In teams, using ES6 modules can improve code readability and maintainability. As in the following code example:

  // 引入模块
  import {
        
         add } from "./math";
  
  // 导出模块
  export class Student {
        
        
      name: string;
      age: number;
      constructor(name: string, age: number) {
        
        
          this.name = name;
          this.age = age;
      }
      study(): void {
        
        
          console.log(`${
          
          this.name} is studying.`);
      }
  }
  

Using ESLint and Prettier

• In the team, using ESLint and Prettier can unify the code style and format, and avoid code conflicts and errors caused by inconsistent code formats. As in the following code example:

  // .eslintrc.json配置文件
  {
        
        
      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "rules": {
        
        
          "quotes": ["error", "double"],
          "semi": ["error", "always"],
          "indent": ["error", 2]
      }
  }
  
  // .prettierrc.json配置文件
  {
        
        
      "semi": true,
      "singleQuote": false,
      "tabWidth": 2,
      "trailingComma": "es5",
      "printWidth": 80
  }
  

Summarize

In the team, using TypeScript needs to follow some rules in order to keep the code consistent and maintainable. These specifications include the use of strict type annotations, interface and type aliases, optional and default parameters, ES6 modules and ESLint and Prettier, etc. By following these conventions, you can make your code clearer, easier to read, and easier to maintain.