Angular 를 위한 TypeScript TIP 5가지

TypeScript를 사용하는데 있어서 유용한 팁 5가지를 공유하고자 합니다.

이 내용은 ng-conf 2021 의 arron 의 영상 에서 발췌 했습니다.

 

1. 타입이 제공되지 않는 API 데이터에서 TypeScript 타입 추출하기

Angular에서 API를 통해 데이터를 가져올때 타입스크립트를 사용하는 우리는 타입을 모두 정의해줍니다. 특히 3rd party 에서 제공하는 API 를 정의해야 할때 번거로운 작업이 아닐 수 없습니다. 이때 사용가능한 유용한 사이트가 있습니다.

http://json2ts.com 여기서 json 데이터를 입력하면 TypeScript에서 사용한 타입 정의를 변환해줍니다.

 

2. Optional 값을 TypeScript 유형으로 정의하기

아래와 같은 타입 인터페이스가 정의되어 있을때, 이 값들을 모두 정의하지 않으면 에러가 납니다.

interface User { 
  name: string; 
  age: number; 
  gender: 'M' | 'F'; 
}

let user1: User = { name: 'robin', age: 38, gender: 'M' }; //OK 
let user2: User = { name: 'robin', age: 38 }; // 에러발생

물론 예제와 같은 경우, age에 ? 를 추가해서 nuallble 한 값으로 정의할 수도 있습니다.

interface User { 
  name: string; 
  age: number; 
  gender?: 'M' | 'F'; 
}

 

 

하지만 만약 상황에 따라서 옵션값이 될 수도 있고 필수값이 될 수 도 있다고 한다면, 해당 유형에 ? 를 붙이는 건 한계가 있습니다. 이에 TypeScript 에서는 몇가지 유틸리티성 제네릭 클래스를 제공합니다.

 

Partial 을 사용하게 되면, 해당 타입의 모든 필드를 Optional 하게 변경합니다.

type PartialUser = Partial<User>; 

const partialUser: PartialUser = { 
  name: 'robin' // optional 
};

 

 

Partial  뿐만 아니라 필드값을 전부 필수 필드로 만드는 Require 클래스와

특정 필드만 선택적으로 사용 가능할 수 있게 하는 Pick , 특정 필드만 제외하는 Exclude 클래스등이 제공됩니다.

여기서 자세한 사용법을 전부 다룰 순 없겠지만 이러한 클래스들을 이용하면 아래와 같은 코드 작성이 가능하게 됩니다.

type PickPerson2 = Pick<User, 'name' | 'age'> & Pick<Partial<User>, 'gender'>; 

const pickPerson2: PickPerson2 = { 
  name: 'robin', // required 
  age: 38, // required 
  gender: 'M' // optional 
};

 

 

3. Enum 타입 대신 Union 타입을 활용하기

TypeScript 에서 정의하는 enum 타입은 컴파일했을때 아래처럼 꽤 복잡한 형태로 변환이 됩니다.

enum GamePadInput { 
  Up = "UP", 
  Down = "DOWN", 
  Left = "LEFT", 
  Right = "RIGHT" 
}

var GamePadInput; 
(function (GamePadInput) { 
  GamePadInput["Up"] = "UP"; 
  GamePadInput["Down"] = "DOWN"; 
  GamePadInput["Left"] = "LEFT"; 
  GamePadInput["Right"] = "RIGHT"; 
})(GamePadInput || (GamePadInput = {}));

 

하지만 Union 타입을 사용하게 되면 더 짧고 간결해집니다.

export type GamePadInput = "UP" | "DOWN" | "LEFT" | "RIGHT";

 

그리고 이는 조합을 통해 더 파워풀한 결과를 내기도 합니다.

export type AuthAction = LoginSuccessfulAction | LoginErrorAction | LogoutSuccessfulAction

 

 

4. 쌍물음표 연산자로 코드를 단순화하기

기본값 설정을 위해 아래와 같은 코드가 있습니다.

if (value !== null && value !== undefined) {
  a = value; 
} else { 
  a = "default value"; 
}

 

위 코드는 물음표 두개를 이용하여 아래와 같이 코드를 간결하게 바꿀 수 있습니다 (TypeScript 3.7~)

a = value ?? 'default value';

 

기존 자바스크립트 구문으로는 아래처럼 사용을 했었습니다.

a = value || 'default value';

 

하지만 이 것은 0, NaN, 빈문자열에 대해서도 false 로 취급하여 default 값을 설정하는 문제가 있습니다.

만약 value 가 0이거나 "" 빈문자열인 경우, 의도하지 않게 'default value' 값이 a 에 할당되게 됩니다.

 

이러한 동작은 ?? 연산자에서 보완이 되었습니다.

console.log(0 ?? 10); // 0 
console.log("" ?? "default") // 빈문자열

 

 

 

5. Path Mapping 을 단순화하기

Angular 프로젝트 규모가 커지고 복잡해짐에 따라 import 구문을 보면 아래와 같이 path 가 너무 길어지는 이슈가 발생하게 됩니다.

import {something} from '../../../../../shared/shared.service'

 

이 경우, 아래처럼 path를 간결하게 바꿀 수 있는 방법이 있습니다.

import {something} from 'shared/shared.service'

 

타입스크립트 설정 파일 (tsconfig.conf) 에서 path mapping 구성을 할 수 있습니다.

@를 추가해서 구분하는 방법도 유용합니다.

"paths": { 
  "shared": [
    "shared" 
  ], 
  "shared/*": [
    "shared/*" 
  ], 
  "@model": [ 
    "src/app/model/index" 
  ]
}

 

이상 Typescript 5가지 팁에 대해서 알아보았습니다.

감사합니다.