[νμ μ€ν¬λ¦½νΈ] typeof, keyof, νμ κ°λ
β¨ 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}μΌλ‘ μΆλ‘ λ¨
}
}