[TypeScript] 초과 속성 검사 (Excess Property Checks)
[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의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.