타입스크립트 잘 사용하기

1. 정확한 타입을 지정하기 (any 사용 피하기)

타입 지정은 타입스트립트로 코딩할 때 얻을 수 있는 장점 중 하나입니다. 자바스크립트는 런타임 때 데이터 타입이 지정됩니다 타입스트립트에서 데이터 타입을 정의하면 실수로 발생할 수 있는 이상한 런타입에러를 방지할 수 있습니다. 'any' 변수의 데이터 유형을 알고 있는 경우 'any'를 사용하지 마세요. 새 변수를 선언할 때마다 데이터 유형을 정의하는 것이 좋습니다.

 

2. strict 모드 사용하기

ES5에서 use string 기능이 추가되었습니다. 문자 그대로 '코드는 엄격한 모드에 있어야 함'을 의미합니다. 타입크스립트 코드의 tsconfig 파일에서 'strict' 환경설정을 찾을 수 있습니다. 이는 선언되지 않은 변수를 사용하거나 타입지정을 하지 않거나 예약어를 변수이름으로 사용하려고 시도하는 등의 실수를 제한합니다.

 

3. 'var' 대신에 'let' 사용하기

var는 오랫동안 사용해온 변수이고 let은 ES6에서 나온 특징입니다. let과 const는 타입스크립트의 var 관련 단점을 줄이기 위해 도입되었습니다.

var는 글로벌 스코프나 지역 스코프 범위 선언입니다. var 타입 변수는 함수/블록 외부에 정의될 때 전역변수가 됩니다. 이 경우 변수는 스크립트 내부 어디서나 사용될 수 있습니다. var는 함수 내부에 정의될 때 로컬 범위가 됩니다. 이 경우 해당 기능 내에서만 접근할 수 있습니다.

var name= "John Doe"; // global scope variable
    function getAge() {
        var age= 30; // local scope variable
    }

var에는 몇가지 단점이 있습니다. 똑같은 변수명으로 다시 선언하여도 오류가 발생하지 않습니다. 타입스크립트는 어떠한 오류를 보여주지 않지만 예상치 못한 결과물로 끝나게 됩니다.

var name = "John Doe";
  function getName(){
        var name = "Anne"; // no error is showed
}

이를 막기 위해 let을 사용해야 합니다. let은 블록스코프 변수입니다. var와 다르게 재선언하는 것은 불가합니다. 같은 변수명으로 다른 스코프에서 사용할 수 있으며 각각 다른 변수로 다룰 수 있습니다.

var name = "John Doe";
  function getName(){
        var name = "Anne"; // no error is showed
}

 

4. 상수는 'const' 사용하기

const는 let과 함께 나온 도입되었습니다. const도 let과 동일하게 블록 스코프 변수입니다. 또한, 재선언할 수 없습니다. 여기까지는 let과 const의 특징이 같습니다.

그러나 const는 값을 변경할 수 없는 특징이 존재합니다. 따라서 상수를 사용할 때에는 const를 사용하세요.

const name = "John";
name = "Anne";// error

const age = 30;
const age = 31; //error

P.S: const 객체를 선언할 때는 변경할 수 없습니다. 그러나 해당 객체의 속성을 변경하는 것은 가능합니다.

 

5. 고정길이 배열에 튜플(tuple) 사용하기

let marks: number[] = [1, 2, 3];

marks 배열은 같은 스크립트 내의 다른 위치에서 서로 다른 수의 항목을 저장할 수 있습니다. 타입스크립트는 모든 값에 올바른 타입을 지정하지 않는 한 제한하진 않습니다.

let marks: number[] = [1, 2, 3];
marks = []; // success
marks = [1]; // success
marks = [1, 2, 3, 4, 5]; // success

그러나 이는 배열 길이가 일정한 경우 심각한 논리적 오류를 야기할 수 있습니다. 이 문제를 피하기 위하여 크기가 고정크기일 때마다 배열을 튜플로 사용해야 합니다. 튜플은 각 원소의 데이터 타입을 포함하는 배열을 적절하게 정의합니다.

let marks:[number, number] = [1, 2]; // tuple of 2 number values
marks = [10, 20]; // success
marks = [1]; // syntax error
marks = [1, 2, 3, 4, 5] // syntax error

 

6. 반복적인 데이터 유형에서 타입 별칭(type aliases)사용

스크립트에 같은 데이터 유형 구조를 따르는 다양한 변수와 객체가 있다고 가정해봅시다.

let man: {name: string, age: number} = {name = "john", age=30};
let woman: {name: string, age: number} = {name = "Anne", age=32};

이렇게 중복되는 유현 선언을 방지하고 타입을 재사용하기 위해 타입별칭을 사용할 수 있습니다.

type Details = {name: string, age: number}; // defining type alias
let man: Details = {name = "john", age=30}; // using type alias
let woman: Details = {name = "Anne", age=32};

 

7. 'any'와 'unknown' 중에 선택하기

any와 unknown은 표면적으로는 같은 역할을 합니다. 자바스크립트에서 데이터 타입을 추측하기 어려울 때 타입스크립트를 자바스트립트로 리팩토링을 쉽게 하도록 도와줍니다. 하지만 차이점이 있습니다.

any와 unknown을 타입변수로 모두 사용할 수 있습니다.

let anyExample: any; // defining an any
let unknownExample: unknown; // defining an unknown
anyExample = 123; 
anyExample = "Hey"
unknownExample = false;
unknownExample = 23.22;

그러나, 해당 변수의 함수를 호출하는 경우 'any'로 모두 실행할 수 있습니다.

anyExample.you.made.this.code.chain(); // success

그러나 unknown은 그렇지 않습니다. unknown은 더 안전합니다.

unknownExample.trim(); // syntax error

만약 unknown 변수를 사용한다면, 조건블록 내에서 사용해야 합니다.

if (typeof exampleUnkown == "string") { // 1st check the type
  exampleUnkown.trim(); // No syntax error now
}

*unknown에 대한 이해를 더하기 위해 추가합니다.

공통점: 모든 타입의 값이 할당될 수 있음
차이점
  1. unknown 타입으로 선언된 변수는 any를 제외한 다른 타입으로 선언된 변수에 할당될 수 없음

let variable: unknown

variable = true // OK (boolean)
variable = 1 // OK (number)
variable = 'string' // OK (string)
variable = {} // OK (object)​

let variable: unknown

let anyType: any = variable
let booleanType: boolean = variable
// Error: Type 'unknown' is not assignable to type 'boolean'.(2322)
let numberType: number = variable
//  Error: Type 'unknown' is not assignable to type 'number'.(2322)
let stringType: string = variable
//  Error: Type 'unknown' is not assignable to type 'string'.(2322)
let objectType: object = variable
//  Error: Type 'unknown' is not assignable to type 'object'.(2322)​

 
  2. unknown 타입으로 선언된 변수는 프로퍼티에 접근할 수 없으며, 메소드를 호출할 수 없으며, 인스턴스를 생성할 수 없음

let variable: unknown

variable.foo.bar // Error: Object is of type 'unknown'.(2571)
variable[0] // Error
variable.trigger() // Error
variable() // Error
new variable() // Error​

보완방법 등 더 자세한 특징에 대해서는  https://jbee.io/typescript/TS-9-unknown/ 에서 확인하실 수 있습니다.

 

8. 클래스 멤버를 위한 액세스 수정자 사용하기

타입스크립트는 클래스의 속성에 대한 액세스 수정자가 제공되지만 클래스는 항상 public입니다. public, protected 나 private 속성을 사용할 수 있습니다.

• private: 클래스 내부에서만 접근 가능
• protected: 클래스 내부나 하위 클래스를 통해서만 접근 가능
• public: 어디서나 액세스 가능

class Employee {
  protected name: string;
  private salary: number;
  
  constructor(name: string, salary: number) {
    this.name = name;
    this.salary = salary
  }

  public getSalary(){
    return salary
  }

여기에서, getSalary 메소드를 사용하지 않으면, salary에 접근할 수 없습니다.

class Developer extends Employee{
  viewDetails(){
    console.log(this.salary); // error: property 'salary' is private
    console.log(this.getSalary()); // success
  }
}

하지만 name은 서브클래스를 통해 접근할 수 있습니다.

class Developer extends Employee{
  viewDetails(){
    console.log(this.name);
  }
}

 

9. 불필요한 주석 피하기

주석은 반드시 필요할 땐 좋습니다. 변수와 함수의 이름을 지정할 때는 항상 직관적인 이름을 쓰려고 시도하세요. 이렇게 하면 주석을 추가할 필요성을 줄일 수 있습니다. 소스 코드 라인에 주석하지 마세요. 디버깅에선 허용하지만 주석처리된 소스코드를 푸시하지 않도록 주의하세요.

 

10. Linter 사용하기

코드베이스를 오염시키고 싶지 않다면 lint 툴을 사용하는 것은 정말 중요합니다. 팀에서 일할 때 이건 특히 중요합니다. 개발자들은 다른 코딩 습관을 가지고 있습니다. 그러므로 모든 개발자가 동일한 규칙 하에 있도록 linter를 사용해야 합니다. ESLint를 사용해보세요. 자바스크립트와 타입스크립트 모두 호환됩니다.

 

11. code formatter 사용하기

좋은 code formatter를 사용하면 코딩의 효율성과 깔끔함을 높일 수 있습니다. 개인적으로 VS code 내의 Prettier를 사용하는 걸 좋아합니다. 그러나 많은 code formmater가 있으므로 사용하는 에디터에 맞춰 원하는 걸 선택하면 됩니다.

의역이 있으며, 오역이 있을 수 있습니다.

 

참고사이트

https://medium.com/@warkiringoda/typescript-best-practices-2021-a58aee199661

TypeScript Best Practices 2021