ν”„λ‘ νŠΈμ—”λ“œ πŸ‘©πŸ»‍πŸ’»

[νƒ€μž…μŠ€ν¬λ¦½νŠΈ] typeof, keyof, νƒ€μž…κ°€λ“œ

μ½”λ”©ν•˜λŠ” 희루 2024. 9. 10. 23:53

 

 

✨ typeof μ—°μ‚°μž

- νƒ€μž… μ»¨ν…μŠ€νŠΈμ—μ„œ λ³€μˆ˜λ‚˜ ν”„λ‘œνΌν‹°μ˜ νƒ€μž…μ„ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ νƒ€μž… μ»¨ν…μŠ€νŠΈμ—μ„œ μ‚¬μš©ν•  수 μžˆλŠ” typeof μ—°μ‚°μžλ₯Ό μΆ”κ°€ν•œλ‹€.

- ν”Όμ—°μ‚°μžμ˜ 평가 μ „ μžλ£Œν˜•μ„ λ‚˜νƒ€λ‚΄λŠ” λ¬Έμžμ—΄μ„ λ°˜ν™˜

console.log(typeof 42);
// Expected output: "number"

console.log(typeof 'blubber');
// Expected output: "string"

console.log(typeof true);
// Expected output: "boolean"
let s = 'hello'; //s의 νƒ€μž…μ€ string

//string이라고 ν‘œκΈ°ν•˜μ§€ μ•Šκ³  typeof sλ‘œλ„ ν‘œν˜„ κ°€λŠ₯
let n: typeof s = "world";

 

 

- 이λ₯Ό κ°μ²΄νƒ€μž…μœΌλ‘œλ„ ν™œμš©κ°€λŠ₯

const fruit = {
	red: 'apple',
	yellow: 'banana',
  	purple: 'grape'
}

type Fruit = typeof fruit;

//즉, λ‹€μŒκ³Ό κ°™λ‹€
type Fruit {
	red: string;
    yellow: string,
    purple: string
}

const fruit2: Fruit = {
	red: 'cherry',
  	yellow: 'lemon',
  	purple: 'plum'
}

 

 

 

✨keyof μ—°μ‚°μž

- 객체 νƒ€μž…μ˜ ν”„λ‘œνΌν‹° keyλ₯Ό μœ λ‹ˆμ˜¨ νƒ€μž…μœΌλ‘œ κ΅¬μ„±ν•΄μ£ΌλŠ” μ—°μ‚°μž

πŸ“Œ μœ λ‹ˆμ˜¨ νƒ€μž…(Union Type)
- μžλ°”μŠ€ν¬λ¦½νŠΈ or μ—°μ‚°μž(||)와 같이 'A'μ΄κ±°λ‚˜ 'B'λΌλŠ” 뜻의 μ˜λ―Έν•˜λŠ” νƒ€μž…

 

 

type Point = { x: number; y: number};
type P = keyof point; //'X' | 'Y'

 

interface Car {
  brand: string;
  model: string;
  year: number;
}

type CarKey = keyof Car;
const carKey: CarKey = 'brand';
console.log(carKey); //"brand"

- CarKey에 keyof μ—°μ‚°μžλ‘œ Car νƒ€μž…μ„ μ§€μ •ν–ˆμœΌλ‹ˆ CarKey νƒ€μž…μ€ Car의 key 값듀인 'brand' | 'model' | 'year'κ°€ λœλ‹€. λ”°λΌμ„œ carkey λ³€μˆ˜μ— brandλ₯Ό ν• λ‹Ήν•  수 μžˆλ‹€.

 

 

type fruit = {
	red: 'apple',
    yellow: 'banana',
    purple: 'grape'
}

//갹체 νƒ€μž…μ˜ ν”„λ‘œνΌν‹° key둜만 ꡬ성 -> 'red' | 'yellow' | 'purple'κ³Ό 동일
type Color = keyof fruit;

const fuitOne: Color = 'red'
const fruitTwo: color = 'yellow'
const fruitThree: Color = 'purple'

 

- λ§Œμ•½ νƒ€μž…μ΄ μ•„λ‹ˆλΌ μ‹€μ œ 객체의 ν”„λ‘œνΌν‹°μ˜ key λ˜λŠ” 값을 νƒ€μž…μœΌλ‘œ μ‚¬μš©ν•˜κ³  싢은 경우라면, ν•΄λ‹Ή 객체λ₯Ό μƒμˆ˜λ‘œ λ§Œλ“€μ–΄ keyof μ—°μ‚°μžμ™€ ν•¨κ»˜ μ‚¬μš©ν•  수 μžˆλ‹€.

 

 

πŸ“Œ 객체 keyλ₯Ό μƒμˆ˜ νƒ€μž…μœΌλ‘œ

const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

type Type = keyof typeof countryCode

const κΉ€μ½”λ”© ꡭ적: Type = 'korea'
const λ°•ν•΄μ»€μ˜ ꡭ적: Type = 'kapan'

 - typeofλŠ” μ‹€μ œ 객체λ₯Ό 객체 νƒ€μž…μœΌλ‘œ λ³€ν™˜ν•΄μ£Όκ³ , keyofλŠ” λ³€ν™˜λœ 객체 νƒ€μž…μ˜ keyλ₯Ό μœ λ‹ˆμ˜¨ νƒ€μž…μœΌλ‘œ λ³€ν™˜ν•΄μ€€λ‹€. 

- ν•΄λ‹Ή 객체의 ν‚€κ°’μœΌλ‘œ 이루어진 μœ λ‹ˆμ˜¨ νƒ€μž…μ„ 얻을 수 μžˆλ‹€.

 

 

 

πŸ“Œ 객체 key의 값을 μƒμˆ˜ νƒ€μž…μœΌλ‘œ

const countryCode = {
	korea: 'KR',
  	japan: 'JP'
} as const

type Type = typeof countryCode[keyof typeof countryCode]

const κΉ€μ½”λ”©μ˜κ΅­μ : Type = countryCode.korea
const λ°•ν•΄μ»€μ˜κ΅­μ : Type = countryCode.japan

- λ‹€λ₯Έ 참고자료λ₯Ό 보면, 객체의 값을 νƒ€μž…μœΌλ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 이μͺ½μ„ 더 많이 ν™œμš©ν•˜λŠ” 것 κ°™λ‹€.

 

 

 

πŸ“• ν™œμš©ν•œ μ˜ˆμ‹œ

export type FontSizeTypes = typeof fontSize
export type FontWeightTypes = typeof fontWeight
export type ColorTypes = typeof color

- 객체의 ν”„λ‘œμ²˜ν‹° keyλ₯Ό props둜 전달할 경우, μœ„μ—μ„œ exportν•œ 객체 νƒ€μž…μ„ μ‚¬μš©ν•΄ ν•΄λ‹Ή propsλ₯Ό 전달받은 ν•΄λ‹Ή μ»΄ν¬λ„ŒνŠΈμ—μ„œ νŒŒλΌλ―Έν„°μ˜ νƒ€μž…μ„ μ§€μ •ν•  λ•Œ μ‚¬μš©ν•  수 μžˆλ‹€. 이 λ•Œ keyof μ—°μ‚°μžλ₯Ό μ‚¬μš©ν•΄ key μœ λ‹ˆμ˜¨ νƒ€μž…μœΌλ‘œ λ§Œλ“€ 수 μžˆλ‹€.

 

export interface Props {
	fontWeight: keyof FontWeightTypes
}

 

 

 


 

 

βœ¨νƒ€μž…κ°€λ“œ

- νƒ€μž…μŠ€ν¬λ¦½νŠΈμ—μ„œ λ³€μˆ˜μ˜ νƒ€μž…μ„ μ’νžˆλŠ” 데 μ‚¬μš©λ˜λŠ” λ©”μ»€λ‹ˆμ¦˜

- νƒ€μž…κ°€λ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λ³€μˆ˜μ˜ νƒ€μž…μ„ 더 ꡬ체적인 νƒ€μž…μœΌλ‘œ μ’νžˆκ±°λ‚˜ 확인할 수 μžˆλ‹€.

- 일반적인 νƒ€μž… κ°€λ“œ ν˜•νƒœλŠ” typeof, instanceof, in, μ‚¬μš©μž μ •μ˜ ν•¨μˆ˜κ°€ μžˆλ‹€.

 

 

πŸ“Œ νƒ€μž…κ°€λ“œ 문법
typeof A : A νƒ€μž…μ„ λ¬Έμžμ—΄λ‘œ λ°˜ν™˜
A instance B : B의 ν”„λ‘œν† νƒ€μž… 체인에 Aκ°€ ν¬ν•¨λ˜μ—ˆλŠ”μ§€ boolean λ°˜ν™˜
a in A: A의 속성 쀑에 aκ°€ μžˆλŠ” boolean λ°˜ν™˜

 

 

 

πŸ“• typeof μ‚¬μš©ν•œ νƒ€μž…κ°€λ“œ

function getNumber(value: string | number) : void {
	if(typeof value === 'string') {
    	console.log(value.length);
     } else {
     	console.log(value);
     }
}

 

 

 

 

πŸ“•instanceofλ₯Ό μ‚¬μš©ν•œ νƒ€μž…κ°€λ“œ

λ§Œμ•½ μ•„λž˜ μ½”λ“œμ˜ id와 같이 κ³΅ν†΅λœ 속성을 in νƒ€μž…κ°€λ“œλ‘œ ν™œμš©ν•˜κ²Œ 되면 νƒ€μž…κ°€λ“œμ˜ 역할을 ν•˜μ§€ λͺ»ν•œλ‹€.
interface Book {
  id: number;
  rank: number;
}

interface OnlineLecture {
  id: string;
  url: string;
}

function learnCourse(material: Book | OnlineLecture) : number|string {
	if(rank in material) {
    	return material.rank; 
    } else {
    	return material.url;
    }
    
    if(id in material) {
    	console.log(material.id);
    }
}

 

 

 

 

πŸ“Œνƒ€μž… κ°€λ“œ ν•¨μˆ˜(μ‚¬μš©μž μ •μ˜ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œ νƒ€μž… κ°€λ“œ)

- 이 ν•¨μˆ˜λŠ” λ¬Έλ²•μ΄λ‚˜ κ΅¬ν˜„λœ ν•¨μˆ˜κ°€ μ•„λ‹ˆλΌ μ‚¬μš©μžκ°€ 직접 νƒ€μž…μ„ κ΅¬λ³„ν•˜κΈ° μœ„ν•œ ν•¨μˆ˜λ₯Ό λ§Œλ“œλŠ” 것을 의미

- is 문법을 ν™œμš©

λ‘κ°œ interfaceκ°€ κ³΅ν†΅μœΌλ‘œ idλΌλŠ” 속성을 κ°€μ§€κ²Œ 되면 inμœΌλ‘œλŠ” ꡬ별할 수 μ—†λ‹€. κ·Έλž˜μ„œ νƒ€μž… κ°€λ“œ ν•¨μˆ˜λ₯Ό 톡해 ꡬ체적으둜 νƒ€μž…μ„ ꡬ별할 수 μžˆλ‹€.

 

 

interface Car {
  brand: string;
  speed: number;
}

function isCar(vehicle: any): vehicle is Car {
  return 'brand' in vehicle && 'speed' in vehicle;
}

function displayVehicleInfo(vehicle: Car | { type: string}) : void {
  if( isCar(vehicle)){
    console.log(vehicle.brand, vehicle.speed);
  } else {
    console.log(vehicle.type); //vehicle은 {type: string}으둜 좔둠됨
  }
}

 

 

참고자료1

참고자료2