Typescript Optional/Partial/Union/쌍물음표(??)/PathMapping

Optional

Optional은 '?'를 사용하여 선언하고 Optional을 사용하면 해당 필드가 있을 수도 있고, 없을 수도 있음을 나타냅니다.

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

const user1: User = { name: 'John' }; // OK
const user2: User = { name: 'John', age: 30 }; // OK
const user3: User = { age: 30 }; // Error

Partial

Partial은 모든 필드를 Optional로 만들어줍니다. 이를 통해 해당 타입의 모든 필드를 일일이 Optional로 선언할 필요 없이 간단하게 작성할 수 있습니다.

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

const user1: Partial<User> = {}; // OK
const user2: Partial<User> = { name: 'John' }; // OK
const user3: Partial<User> = { age: 30 }; // OK
const user4: Partial<User> = { name: 'John', age: 30 }; // OK

type PartialUser = Partial<User>; 

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

Union

Union은 '|'를 사용하여 두 개 이상의 타입을 선언할 수 있습니다. 이를 통해 해당 필드가 여러 개의 타입 중 하나일 수 있음을 나타낼 수 있습니다.

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

const user1: User = { name: 'John', age: '30' }; // OK
const user2: User = { name: 'John', age: 30 }; // OK
const user3: User = { name: 'John', age: true }; // Error

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";

쌍물음표(??)

쌍물음표(??)는 Optional chaining과 함께 사용됩니다. 쌍물음표(??)는 해당 필드가 null 또는 undefined일 경우, 대신 사용할 값을 지정합니다.

interface Address {
  street?: string;
}

interface User {
  name: string;
  address?: Address;
}

const user1: User = { name: 'John' };
const street1 = user1.address?.street ?? 'Unknown'; // 'Unknown'

const user2: User = { name: 'Bob', address: { street: '123 Main St.' } };
const street2 = user2.address?.street ?? 'Unknown'; // '123 Main St.'

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

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

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

a = value ?? 'default value';

PathMapping

PathMapping은 타입스크립트 컴파일러가 파일 경로를 다룰 때, 경로를 깔끔하게 관리할 수 있도록 도와줍니다. 아래와 같이 tsconfig.json 파일에 PathMapping을 추가할 수 있습니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"]
    }
  }
}

이렇게 설정하면, import 문에서 @src 경로를 사용할 수 있습니다.