๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
TS

[TS] : utility type

by ๊ถŒ์Šพํ–„ 2023. 8. 22.

 

TS utility type

 

Partial<T>

Partial<T> ํƒ€์ž…์€ ํƒ€์ž… T์˜ ๋ชจ๋“  ์†์„ฑ์„ ์„ ํƒ์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ค€๋‹ค.

์ด๋ฅผ ํ†ตํ•ด ๊ธฐ์กด ํƒ€์ž…์˜ ์ผ๋ถ€ ์†์„ฑ๋งŒ ์ œ๊ณตํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ์‰ฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

 

Partial<T> ์‚ฌ์šฉ ์‚ฌ๋ก€

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

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};

const person: Person = { name: "Spartan", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });

Person์ด๋ผ๋Š” ์ธํ„ฐํŽ˜์ด์Šค๋Š” name, age๋ผ๋Š” ์†์„ฑ์œผ๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ๋‹ค.
updatePerson ๋ณด๋ฉด ๋‘ ๋ฒˆ์งธ ์ธ์ž๋กœ Partial<Person> ํƒ€์ž…์˜ fields๋ผ๋Š” ์ธ์ž๋ฅผ ๋ฐ›๋Š”๋‹ค.

์ด field๋ผ๋Š” ์ธ์ž๊ฐ€ ๊ตฌ์„ฑ์ด ๋  ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ์˜ ์ˆ˜ ๋‹ค์Œ์ด ์žˆ๋‹ค.

name์ด๋ผ๋Š” ์†์„ฑ๋งŒ ์žˆ์–ด๋„ ๋˜๊ณ ,
age๋ผ๋Š” ์†์„ฑ๋งŒ ์žˆ์–ด๋„ ๋œ๋‹ค.
name, age๋ผ๋Š” ์†์„ฑ์ด ๋‘˜ ๋‹ค ์žˆ์–ด๋„ ๋œ๋‹ค.

๋‹ค๋งŒ, ์ด ๋ฐ–์˜ ์ƒํ™ฉ์€ ํ—ˆ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

์˜ˆ๋กœ, {name, gender} ์™€ ๊ฐ™์ด ๊ธฐ์กด์— ์—†๋Š” ์†์„ฑ์„ ๋„ฃ์–ด์„œ๋Š” ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์ด๋ ‡๊ฒŒ Partial<T> ํƒ€์ž…์œผ๋กœ ์œ ์—ฐํ•˜๊ฒŒ ํƒ€์ž…์˜ ์†์„ฑ์„ ์„ ํƒํ•ด์„œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

 

Required<T>

Partial<T> ํƒ€์ž…๊ณผ๋Š” ๋ฐ˜๋Œ€๋กœ Required<T> ํƒ€์ž…์€ ํƒ€์ž… T์˜ ๋ชจ๋“  ์†์„ฑ์„ ํ•„์ˆ˜์ ์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค!

T ํƒ€์ž… ๊ฐ์ฒด์— ์ •์˜๋œ ๋ชจ๋“  ์†์„ฑ์ด ๋ฐ˜๋“œ์‹œ ์ „๋ถ€ ์ œ๊ณต์ด ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ด์•ผ ๋œ๋‹ค๋Š” ๋œป์ด๋‹ค.

 

Required<T> ์‚ฌ์šฉ ์‚ฌ๋ก€

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

Person์ด๋ผ๋Š” ์ธํ„ฐํŽ˜์ด์Šค์— address๋ผ๋Š” ์†์„ฑ์„ ์ถ”๊ฐ€ํ–ˆ๋‹ค.

address ์˜ ? ๊ฐ€ ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋Š” ์„ ํƒ์  ์†์„ฑ์ด๋ž€ ๋œป์ด๋‹ค.

์žˆ์–ด๋„ ๋˜๊ณ  ์—†์–ด๋„ ๋˜๋Š” ์นœ๊ตฌ๋ผ๋Š” ๋œป.

ํ•˜์ง€๋งŒ, address๋ฅผ ํ•„์ˆ˜์ ์œผ๋กœ ๋ฐ›์•„์•ผ ํ•˜๋Š” ์ œ์•ฝ์‚ฌํ•ญ์ด ์žˆ๋‹ค๊ณ  ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ณ€๊ฒฝ ํ•  ์ˆ˜ ์žˆ๋‹ค.

type RequiredPerson = Required<Person>;

์ด๋ ‡๊ฒŒ Required<T> ํƒ€์ž…์„ ํ†ตํ•ด ์„ ์–ธํ•˜๋ฉด ์„ ํƒ ์†์„ฑ ๊ฐ’์ธ address ์ž…๋ ฅ๋„ ํ•„์ˆ˜๊ฐ€ ๋˜์•ผํ•œ๋‹ค.

 

Readonly<T>

Readonly<T> ํƒ€์ž…์€ ํƒ€์ž… T์˜ ๋ชจ๋“  ์†์„ฑ์„ ์ฝ๊ธฐ ์ „์šฉ(read-only)์œผ๋กœ ๋งŒ๋“ค์–ด์ค€๋‹ค.

์ด๋ฅผ ํ†ตํ•ด readonly ํƒ€์ž…์˜ ์†์„ฑ๋“ค๋กœ ๊ตฌ์„ฑ๋œ ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ์–ด๋„ ๋ถˆ๋ณ€ ๊ฐ์ฒด๋กœ ์ทจ๊ธ‰ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

Readonly<T> ์‚ฌ์šฉ ์‚ฌ๋ก€

interface DatabaseConfig {
  host: string;
  readonly port: number;
}

const mutableConfig: DatabaseConfig = {
  host: "localhost",
  port: 3306,
};

const immutableConfig: Readonly<DatabaseConfig> = {
  host: "localhost",
  port: 3306,
};

mutableConfig.host = "somewhere";
immutableConfig.host = "somewhere"; // ์˜ค๋ฅ˜!

์œ„์˜ ์ฝ”๋“œ์—์„œ ์ธํ„ฐํŽ˜์ด์Šค DatabaseConfig๋Š” ๋ถˆ๋ณ€ ๊ฐ์ฒด๋ผ๊ณ  ํ•  ์ˆ˜๊ฐ€ ์—†๋‹ค.
์ด์œ ๋Š” host๊ฐ€ readonly๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

host์—๋„ readonly๋ฅผ ์ ์šฉ์‹œํ‚จ๋‹ค๋ฉด ๋ถˆ๋ณ€๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

 

Pick<T, K>

Pick<T, K> ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์€ ํƒ€์ž… T์—์„œ K ์†์„ฑ๋“ค๋งŒ ์„ ํƒํ•˜์—ฌ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค!

์ด๋ฅผ ํ†ตํ•ด ํƒ€์ž…์˜ ์ผ๋ถ€ ์†์„ฑ๋งŒ์„ ํฌํ•จํ•˜๋Š” ๊ฐ์ฒด๋ฅผ ์‰ฝ๊ฒŒ ์ƒ์„ฑํ•  ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

 

Pick<T, K> ์‚ฌ์šฉ ์‚ฌ๋ก€

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

type SubsetPerson = Pick<Person, "name" | "age">;

const person: SubsetPerson = { name: "Spartan", age: 30 };

SubsetPerson์€ Person์ด๋ผ๋Š” ์ธํ„ฐํŽ˜์ด์Šค์—์„œ name, age ์†์„ฑ๋งŒ ์„ ํƒํ•ด์„œ ๊ตฌ์„ฑ๋œ ์ƒˆ๋กœ์šด ํƒ€์ž…์ด๋‹ค.
์ด๋Ÿฐ์‹์œผ๋กœ ์›ํ•˜๋Š” ์†์„ฑ๊ฐ’์„ pick ํ•ด์„œ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

Omit<T, K>

Omit<T, K> ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…์€ ํƒ€์ž… T์—์„œ K ์†์„ฑ๋“ค๋งŒ ์ œ์™ธํ•œ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ๋งŒ๋“ ๋‹ค.

Pick<T, K> ์œ ํ‹ธ๋ฆฌํ‹ฐ ํƒ€์ž…๊ณผ๋Š” ๋™์ž‘์ด ๋ฐ˜๋Œ€!!

์ด๋ฅผ ํ†ตํ•ด ๊ธฐ์กด ํƒ€์ž…์—์„œ ํŠน์ • ์†์„ฑ์„ ์ œ๊ฑฐํ•œ ์ƒˆ๋กœ์šด ํƒ€์ž… ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

 

Omit<T, K> ์‚ฌ์šฉ ์‚ฌ๋ก€

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

type SubsetPerson = Omit<Person, "address">;

const person: SubsetPerson = { name: "Alice", age: 30 };

์—ฌ๊ธฐ์„œ SubsetPerson ํƒ€์ž…์€ Person ํƒ€์ž…์—์„œ address ์†์„ฑ๋งŒ ์ œ์™ธํ•œ ์ƒˆ๋กœ์šด ํƒ€์ž…์ž…๋‹ˆ๋‹ค!

 

์ž‘์—…์„ ํ•˜๋ฉด์„œ pick ๊ณผ partial, read only ๋„ˆ๋ฌด๋‚˜๋„ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ์ •๋ฆฌ๋ฅผ ํ•ด๋ณธ๋‹ค.

 

 

#ts #utilitytype #partial #pick #readonly #omit #required

'TS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[TS] : ์ ‘๊ทผ ์ œํ•œ์ž  (0) 2023.08.22
[TS] : any unknown union  (0) 2023.08.21
[TS] : tuple enum  (0) 2023.08.18
[TS] : .d.ts  (0) 2023.08.17
[TS] : tsconfig.json  (0) 2023.08.17