코드를 쉽게 읽고 유지 관리하려면 몇 가지 모범 사례를 따라야 합니다.

이 기사에서는 모든 사람의 삶을 더 쉽게 만들기 위해 따라야 할 몇 가지 모범 사례에 대해 이야기하려고 합니다.

그룹 함수 오버로드 함께

함수를 오버로드할 수 있습니다.

이것은 TypeScript가 확인할 수 있는 함수에 대해 여러 함수 서명을 가질 수 있음을 의미합니다.

삶을 더 쉽게 만들려면 읽기 쉽도록 그룹화해야 합니다.

function foo(a: string, b: string): string;

function foo(a: number, b: number): number;

function foo(a: any, b: any): any {
  console.log(a, b);
}

클래스 멤버 주문하기

회원들이 더 쉽게 읽을 수 있도록 반원에게 순서를 지정할 수도 있습니다.

액세스 수정자, 알파벳 순서 등으로 정렬할 수 있습니다.

하나씩 붙이시면 좋습니다.

예를 들어 다음을 작성하는 대신:

class Employee {
  private id: string;
  private empCode: number;
  private empName: string;
}

당신은 쓰기:

class Employee {
  private empCode: number;
  private empName: string;
  private id: string;
}

알파벳순으로 정렬합니다.

네임스페이스에 모듈 키워드를 사용하지 마십시오

네임스페이스를 선언하는 경우 namespace 키워드를 사용해야 합니다.

쓰는 대신:

module Math {
  function add(a: number, b: number): number {
    return a + b;
  }
}

당신은 쓰기:

namespace Math {
  function add(a: number, b: number): number {
    return a + b;
  }
}

이렇게하면 ES 모듈과 혼동하지 않을 것입니다.

클래스 멤버에 대한 가시성 선언

TypeScript의 액세스 제어 기능을 활용하기 위해 가시성 선언 또는 클래스 멤버를 추가할 수 있습니다.

예를 들어 다음과 같이 작성합니다.

class Employee {
  private getSalary(): number {
    return 90000;
  }
}

private 액세스 한정자를 추가하여 클래스의 다른 메서드에서만 getSalary를 호출할 수 있습니다.

멤버를 외부 코드에서 사용할 수 있도록 하는 public 한정자도 있습니다.
protected 멤버를 하위 클래스와 현재 클래스에서 사용할 수 있도록 합니다.
public가 기본값입니다.

인스턴스 변수에 대해서도 동일한 작업을 수행할 수 있습니다.

class Employee {
  private empCode: number;
}

모든 유형의 사용 제거

TypeScript의 유형 검사 기능을 활용하기 위해 코드에서 any 유형의 사용을 제거할 수 있습니다.

정적 유형보다 더 유연한 것이 필요한 경우 이를 정의하는 방법이 많이 있습니다.

리터럴 유형을 사용하여 값을 일부 리터럴로만 제한할 수 있습니다.

여러 유형의 멤버를 확인할 수 있는 공용체 유형이 있습니다.

교차 유형은 변수에 두 유형 모두에 있는 멤버가 있는지 확인합니다.

인덱스 서명을 사용하면 동적 속성을 확인할 수 있습니다.

피하는 방법은 여러 가지가 있습니다any.

예를 들어 다음을 작성하는 대신:

let bar: any;

당신은 쓰기:

let foo: string;

빈 인터페이스 없음

쓸모가 없기 때문에 코드에 빈 인터페이스가 있어서는 안 됩니다.

그래서 쓰는 대신:

interface I {}

당신은 쓰기:

interface I {
  bar: number;
}

for-in 루프 없음

for-in 루프는 더 나은 현대적 대안이 있는 레거시 JavaScript 구문입니다.

상속되지 않은 속성을 확인하려면 hasOwnProperty를 사용해야 하므로 좋지 않습니다.

더 나은 대안에는 객체의 상속되지 않은 키를 가져오는 Object.keys가 포함됩니다.
Object.values 값을 가져오고 Object.entries 모든 항목을 가져옵니다.

그래서 쓰는 대신:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);
  }
}

당신은 쓰기:

for (const key in Oject.keys(obj)) {
  console.log(obj[key]);
}

수입 부작용 없음

import 모듈 멤버 가져오기 및 사용에 사용해야 합니다.

부작용을 일으키면 코드를 정적으로 분석하기 어렵기 때문에 좋지 않습니다.

그래서 쓰는 대신:

import 'foo';

당신은 쓰기:

import { bar } from 'foo';

일부 예외는 Webpack을 모듈로 사용하여 CSS를 가져올 수 있습니다.
따라서 여전히 다음과 같이 작성할 수 있습니다.

import 'styles.css';

리터럴 값이 있는 변수 또는 매개변수에 대한 명시적 유형 선언 없음

숫자 문자열 또는 부울로 할당된 변수 또는 매개변수에 대한 유형 선언을 갖는 것은 불필요합니다.

TypeScript는 명시적 유형 없이 이를 확인할 수 있습니다.

따라서 다음을 작성하는 대신:

const foo: number = 10;

당신은 쓰기:

const foo = 10;

결론

항목을 그룹화하면 더 쉽게 읽을 수 있습니다.

가시성 수정자는 유용한 TypeScript 기능입니다.
any 유형은 많은 것으로 대체될 수 있습니다.
namespace를 사용하여 네임스페이스 코드를 선언합니다.

오늘은 여기까지입니다!

읽어주셔서 감사합니다. 계속 지켜봐 주세요!