TypeScript: Utility types

🧐 실무에서 자주 사용하는 타입 바로 알기 (2/3)

타입스크립트에는 굉장히 많은 타입들이 존재하고 실제로는 자주 사용되지 않는 타입들도 많이 존재합니다.
아래는 많은 개발자들이 실무에서 사용하면서 간혹 혹은 자주 사용하는 타입들 중 유틸리티 타입들입니다.

---

표로 정리한 유틸리티 타입

Utility Types
type	desc.
enum ⭐️	여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입
as const ⭐️	값의 재할당을 막아버리기 때문에 의도치 않은 변경으로 인한 오류 ⬇️
record	특정 타입의 모든 속성의 값을 일정한 타입으로 매핑
partial	모든 프로퍼티를 ?(optional)로 만들어 버리는 타입
omit	특정 타입에서 지정된 속성을 제외한 나머지 속성을 가지는 새로운 타입을 생성하는 타입
pick	특정 타입에서 지정된 속성만을 선택하여 새로운 타입을 생성
extract	첫번째 제네릭 타입 T에 대하여 제네릭 타입 U 중 할당 가능한 타입을 할당
return type	특정 함수의 출력을 다른 함수에서 가져와야 하는 상황에서 매우 유용
optional	특정 프로퍼티를 ?(optional)로 만들어 버리는 타입
satisfies	주로 안전하게 타입 표명(Type Assertion)을 하기 위해 사용
generic	재사용성이 높은 컴포넌트를 만들 때 자주 활용

🔍 예시로 더 자세히 살펴보는 유틸리티 타입

enum ⭐️

여러 값들에 미리 이름을 정의하여 열거해 두고 사용하는 타입
열거, 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있습니다.
변수들을 하나의 그룹으로 묶고 싶을 때 사용할 수 있으며 특정 값의 집합을 정의하며 이는 코드를 더 가독성 있고 유지보수 하기 쉽게 만들어줍니다.

enum Color {
  white = "#ffffff",
  red = "#F1061A ",
  orange = "#FA7804",
  yellow = "#FAEB04",
  green = "#3BE80D",
  darkGreen = "#065823",
  blue = "#2ACAF9",
  navy = "#0C188F",
  purple = "#6111DD",
  black = "#000000",
}

let RedColor: Color = Color.red;
console.log(RedColor);

as const ⭐️

type assertion의 한 종류로써 리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막기 위한 목적으로 만들어졌습니다.
as const를 사용하면 원시 타입이든 참조 타입이든 값의 재할당을 막아버리기 때문에 의도치 않은 변경으로 인한 오류를 없앨 수 있습니다.

const InternationalAirport = {
  	Korea: "ICN", 
  	Japan: "HND", 
	France: "CDG", 
  	Vietnam: "HAN",
  	UK: "LCY",
  	Italy: "FCO",
} as const; // read only (읽기 전용)

const DomesticAirport = {
  incheon: "ICN", 
  kimpo: "GMP",
  jeju: "CJU",
} as const; 

const AmericaAirport = {
  WashingtonDC: "IAD",
  NewYork: "JFK", 
  LosAngeles: "LAX",
  Orlando: "MCO",
  Seattle: "SEA",
  Chicago: "ORD",
  Boston: "BOS",
  Guam: "GUM",
} as const; 

as const를 붙이면 객체의 모든 프로퍼티 값들이 readonly의 리터럴 값을 가지게 됩니다.
리터럴 타입의 추론 범위가 리터럴 값 자체로 한정되면서 좀 더 안전하게 코드를 작성할 수 있습니다.

const Colors = {
  white = "#ffffff",
  red = "#F1061A ",
  green = "#3BE80D",
  blue = "#2ACAF9",
  black = "#000000",
} as const;

enum COLOR {
  white,
  red,
  green,
  blue,
  black,
}

record

타입 Type의 프로퍼티 키의 집합으로 타입을 생성해 타입의 프로퍼티를 다른 타입에 매핑 시키는데 사용합니다.
<> 안에 어떤 값이 오는지에 따라 다르게 사용할 수 있습니다 :
Record<Key, Value> 👉 key & value 한 번에 객체 타입으로 지정할 수 있습니다.
Record<keys, type> 👉 한 유형의 속성을 다른 유형에 매핑하는 데 사용할 수 있습니다.

type postContents = Record<string, string>;

let post: postContents = {
  title: "Mobi",
  contents:
    "모비는 값비싼 사교육, 현실적 시간 투자의 결여에 겁먹은 세상의 모든 비전공자들을 위해 무료로 교육을 제공하고 취업 이후의 인프라 형성을 통해 새로운 시작을 응원하는 비영리 단체입니다.",
};

interface Mobi {
  term : number;
  isOperator: boolean;
  whichDeveloper: "FE" | "BE" | "Full";
}

type GraduatesName = "Zoey" | "Zero";

const graduates: Record<Mobi, Developer> = {
  Zoey: { term: 1, isOperator: true, whichDeveloper: "FE" },
  Zero: { term: 1, isOperator: true, whichDeveloper: "FE" },
};

partial

<>의 타입의 모든 프로퍼티를 ?(optional)로 만들어 버리는 타입입니다.
주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다.
특정 타입의 모든 속성의 값을 선택적으로 만들어줄 수 있습니다.

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

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = {};

partialPerson.name = "Peanut";
partialPerson.age = 20;

interface Mobi {
  username: string;
  term: number;
  sort: "FE" | "BE" | "Full";
  gender: "male" | "female";
  isOperator:boolean;
  isDirector?:boolean;
}

let Kimi: Mobi {
  username: 'Kimi';
  term:2;
  sort: "FE";
  gender:"female";
  isOperator: false;
}

let novice: Partial<Mobi> = {
  name: "Peanut",
  sort: "Full",
  isDirector: true,
};

let newbie: Partial<Mobi> = {
  name: "Amy",
  sort: "FE",
  term: 2;
};

omit

특정 타입에서 지정된 속성을 제외한 나머지 속성을 가지는 새로운 타입을 생성하는 타입입니다.
Omit<T,K>로 표현 👉 T에서 모든 프로퍼티를 선택한 다음 K를 제거한 타입을 구성합니다.

interface Mobi {
  name: string;
  age: number;
  isMember: boolean;
}

type MobiPreview = Omit<Mobi, "isMember">;

const mobi: MobiPreview = {
  name: "Chestnut",
  age: 19,
};

pick

특정 타입에서 지정된 속성만을 선택하여 새로운 타입을 생성합니다.
Pick<T,K>로 표현 👉 T에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.

interface Mobi {
  name: string;
  age: number;
  isMember: boolean;
}

type MobiInfo = Pick<Mobi, "name" | "age">;

const Mobi: MobiPreview = {
  name: "Chestnut",
  age: 19,
};

extract

(Exclude와 반대되는 개념)
첫번째 제네릭 타입 T에 대하여 제네릭 타입 U 중 할당 가능한 타입을 할당합니다.
Extract<T,U> 👉 T에서 U에 할당 할 수 있는 모든 속성을 추출하여 타입을 구성
type Extract<T, U> = T extends U ? T : never 👉 T타입에서 U타입과 겹치늩 타입만을 추출

type Animal = "Cat" | "Dog" | "Pig" | "Cow";
type Pet = "Cat" | "Dog";

type myPet = Extract<Animal, Pet>;

return type

ReturnType< T > 으로 표현 👉 함수 T의 반환 타입으로 구성된 타입을 만듦

declare function Peanuts(): { name: string; age: number };

type MobiType0 = ReturnType<() => string>;
type MobiType1 = ReturnType<(s: string) => void>;
type MobiType2 = ReturnType<<Peanuts>() => Peanuts>;
type MobiType3 = ReturnType<<Peanuts extends MobiStudy, MobiStudy extends number[]>() => Peanuts>;
type MobiType4 = ReturnType<typeof Peanuts>;
type MobiType5 = ReturnType<any>;

특정 함수의 출력을 다른 함수에서 가져와야 하는 상황에서 매우 유용하게 쓰일 수 있습니다.
sendDate의 리턴 결과를 Data로 타이핑하여 전달 후 사용하고 있습니다.

function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}

type Data = {
    a: string,
    b: string
}

function consoleData(data:Data) {
    console.log(JSON.stringify(data));
}

let stringifyNumbers = sendData(1, 2);
consoleData(stringifyNumbers);

만약 sendData의 출력 타입이 바뀌면 Data 타입도 바꿔줘야 할 것입니다.
이런 케이스를 막기 위해, 두 개의 타입을 동기화 해줍니다.

function sendData(a: number, b: number) {
    return {
        a: `${a}`,
        b: `${b}`
    }
}

type Data = ReturnType<typeof sendData> // ReturnData 타입은 sendData의 반환 타입이 자동 지정
                       
// The same as writing:
type Data = {
     a: string,
     b: string
}

optional

  interface SignUpData {
  email: string;
  password: string;
  nickname: string;
  name: string;
  age?: number;
  phone?: number;
  location?: string;
}

type Mobi = {
	name: string;
  	term: number;
  	isOperator?: boolean;
  	isDirector?:boolean;
}

type MobiOperator = {
	name: string;
  	term: number;
  	isOperator: true;
}

const Jane:MobiOperator = {
	name: "Jane",
  	term: 1,
  	isOperator: true,
}

satisfies

유니온 타입과 호환되는 타입의 메소드로 호출 시도 시 정적 에러 발생 X
정확히 props의 타입을 추론, value의 메소드를 사용합니다.
타입 추론과 오타 검사를 동시에 할 수 있어 객체의 타입 검사용으로 사용됩니다.

  const palette = {
  purple: [100, 9, 240],
  navy: [31, 12, 188],
  blue: [12, 202, 162],
} satisfies Record<"purple" | "navy" | "blue", [number, number, number]>;

const grade = {
  a: 90,
  b: "B",
  c: 70,
  f: 60,
} satisfies Record<"a" | "b" | "c" | "f", number | string>;

Type Assertion (타입 단언) 👉 변수의 타입을 개발자가 명시적으로 지정하는 방법
타입을 단언하는 방식에는 크게 3가지가 있습니다.
TypeScript는 타입 추론을 통해 대부분의 상황에서 타입을 추론할 수 있기 때문에,
명시적인 타입 단언이 필요한 경우를 제외하고는 사용을 최소화하는 것이 좋다는 것에 유의하며 사용하는게 좋을 것 같습니다.

[ Type Assertion 방식 ]
1. <> 👉 JSX 문법이랑 겹쳐서 자주 사용 X
2. as
3. satisfies

type annotation 👉 타입에 주석을 다는 방법
Annotate는 "주석을 달다" 라는 사전적인 뜻을 가지고 있습니다.
타입스크립트에서는 변수, 함수, 함수 반환값의 데이터 타입을 지정하기 위해 "타입 어노테이션"을 사용합니다.
한 번 식별자를 특정 타입으로 annotated 하면 해당 타입만 사용할 수 있게 됩니다.
다른 타입을 사용하게 되면 타입스크립트 컴파일러가 에러를 던집니다.

// 변수에 타입 지정하기
let a:number;
a = "string";   //error
a = 20;   // o

function greetings(a: number){
  console.log(a)
}
hello(10) // o

function hello(a: number){
  console.log(a)
}
hello("world") //error

1️⃣ 간단한 타입 좁히기
어노테이션 지정, typeof 조건문을 사용해 간단히 타입을 좁힐 수 있습니다.

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

const paletteRGB: Record<Colors, string | RGB> = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
};

paletteRGB.red.map(0); // ❌ 👉 타입이 string이 올지 RGB가 올지 확정 지을 수 없기 때문에 map 사용 불가
paletteRGB.green.toUpperCase(); // ❌ 👉 타입이 string이 올지 RGB가 올지 확정 지을 수 없기 때문에 toUpperCase 사용 불가

// 따라서 typeof 조건문 활용
if (typeof paletteRGB.green === "string") {
  paletteRGB.green.toUpperCase();
}

매번 조건문을 쓰기 번거롭다면 satisfies 사용해서 해소할 수 있습니다.

//  satisfies 사용으로 타입을 좁혀 조건문 없이 해당 타입에 맞는 메서드 사용 가능
const paletteRGB = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255],
} satisfies Record<Colors, string | RGB>;
paletteRGB.green.toUpperCase(); 

2️⃣ 간결한 타입 체크
2-1. 어노테이션으로 했을 때

// 타입 지정
interface Data {
  a: "A" | "B" | "C" | "D";
  b: number;
  c: string;
  d: string[];
}
// Partial로 타입을 선택적으로 가져온 baseData1
const smallData: Partial<Data> = {
  //Partial<Data>
  a: "A",
  b: 1,
};

const smallData: Data = {
  ...smallData, // smallData의 타입은 a,b가 아니라 Partial타입으로 판단하기 때문에 사용 불가능
   c: "string",
  d: ["array"],
 };

2-2. satisfies 사용

const smallData2 = {
  a: "A",
  b: 1,
} satisfies Partial<Data>;

const smallData2: Data = {
  ...smallData2, // satisfies사용으로 Data 타입의 a,b를 만족하기 때문에 사용 가능
  c: "string",
  d: ["array"],
};

3️⃣ 안전한 타입 단언
3-1. as를 썼을 때

interface Developer {
  name: string;
  nickname: string;
  major: "frontend" | "backend"; 
}

// 에러가 날 상황인데 as 때문에 그냥 통과된다
// as : 타입을 점검하지 않음
const dev = {
  name: "Peter",
  nickname: "Peanut",
} as User;

3-2. satisfies 사용

const dev = {
  name: "Peter",
  nickname: "Peanut",
} satisfies Developer as Developer; // 에러 발생시켜 줌
// satisfies사용으로 타입이 만족하는지 확인한 다음 as로 단언하기 때문에 안전하게 타입을 단언 할 수 있음

generic

재사용성이 높은 컴포넌트를 만들 때 자주 활용됩니다.
특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 많이 사용합니다.

T 꺾쇠 안에 넣는 타입으로 모든 T가 해당 타입으로 바뀌게 됩니다.

  // 제네릭 타입을 기본으로 쓰는 방법
type MyProfile<T> = {
  hobby: Array<T>;
};

// extends generic type
type StudentType = {
  fullName: string;
  nickName: string;
  age: number;
};

const StudentDetail = <T extends StudentType>(detail: T) => ({
  fullName: "TopDragon",
  nickName: "Peanut",
  age: 20,
  isDirector: true,
});

---

references
return type >> https://itchallenger.tistory.com/638