코딩하는라민

[TypeScript] 초과 속성 검사 (Excess Property Checks) 본문

Core/TypeScript

[TypeScript] 초과 속성 검사 (Excess Property Checks)

코딩하는라민 2023. 5. 30. 19:28
728x90
반응형

[TypeScript] 초과 속성 검사 (Excess Property Checks)

 

 

📌 초과 속성 검사(Excess Property Checks)

초과 속성 검사란 객체 리터럴을 사용하여 새로운 객체를 생성할 때, 타입스크립트가 추가로 정의되지 않은 속성을 감지하는 기능을 말한다. 이 기능은 구조적 타이핑(structural typing) 개념에 기반한다.

 

✏️ 객체 리터럴의 타입 검사

type Person = {
    name: string;
    age: number;
};

const me: Person = {
    name: "ramin",
    age: 20,
    hobby: "game", // Error
}

위 코드에서 "hobby" 속성은 "Person" 타입에 정의되어 있지 않다.

이 경우 타입스크립트는 초과 속성 검사를 수행하여 이를 감지하고 다음과 같은 오류를 발생시킨다.

Object literal may only specify known properties, and 'hobby' does not exist in type 'person'.

 

✏️ 함수 매개변수의 타입 검사

객체의 속성을 동적으로 추가하는 경우에도 초과 속성 검사가 작동한다. 이를 통해 런타임에서 잠재적인 오류를 사전에 감지할 수 있다.

type Person = {
    name: string;
    age: number;
};

function sayHi(person: Person) {
    console.log(`Hi! my name is ${person.name}.`);
}

const person = {
    name: "ramin",
    age: 27,
    hobbies: "coding",
};

sayHi(person); // Error

Person 타입이 있고, person을 매개변수로 가지는 sayHi라는 함수가 있다. 이 함수의 매개변수 person 은 Person 타입을 가지고 있고, person 이라는 name, age, hobbies 속성을 가진 새로운 객체를 정의해주었다.

이 세 개의 프로퍼티를 가진 person 을 sayHi 함수에 인자로 전달해주면 초과속성 검사가 발생하고 오류가 발생하게 된다. person 에는 hobbies 라는 속성이 있는데 Person 타입에는 hobbies 속성이 정의되어있지 않기 때문이다.

 

📌 초과 속성 검사 우회

초과 속성 검사 우회는 권장되지 않는다. 하지만 초과 속성 검사를 우회해야 하는 상황이 발생할 수 있다.

 

✏️ 객체를 새로운 변수에 할당

구조적 타이핑의 예제처럼 기존 객체 리터럴을 제공하면 초과 속성 검사를 우회할 수 있다.

초과 속성 검사는 객체 타입으로 선언된 위치에서 생성되는 객체 리터럴에 대해서만 일어난다!

type Person = {
    name: string;
    age: number;
};

const you: Person = {
    name: "choi",
    age: 30,
    hobbies: "trip",
}

const extraProperty: Person = you; // Ok

 

✏️ 인덱스 시그니처(Index Signature)

인덱스 시그니처를 활용하면 객체의 속성을 동적으로 처리할 수 있으며, 초과 속성 검사를 우회할 수 있다.

// 인덱스 시그니처의 형태
{
    [인덱스_타입]: 속성_타입;
}

 

[key: string] 은 인덱스 시그니처를 정의하는 부분이다. 이를 통해 문자열 키를 가지는 모든 속성에 대해 타입을 any 로 지정하고 있다. 

type Person = {
    name: string;
    age: number;
    [key: string]: any;
}

const friend01: Person = {
    name: "dana",
    age: 29,
    hobbies: "sleep",
}

const friend02: Person = {
    name: "Udin",
    age: 27,
    todo: "work",
}

객체의 모든 속성이 인덱스 시그니처의 타입과 일치하지 않을 경우, 타입 안정성이 약화될 수 있으므로 신중하게 사용해야 한다.

 

 

 


참고 : 참고 : 러닝 타입스크립트를 읽고, ChatGPT의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.

 

728x90
반응형