일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 비전공자
- 웹디자인기능사실기
- jQuery
- Supabase
- 코드공유
- 타입스크립트
- 리액트
- JavaScript
- 세로메뉴바
- 웹디실기
- 코딩독학
- 프론트엔드
- 연산자
- PROJECT
- CSS
- web
- 슬라이드전환
- git
- 자바스크립트
- 웹디자인기능사
- HTML
- 깃
- JS
- 실기
- 웹퍼블리셔
- 렛츠기릿자바스크립트
- 생활코딩
- react
- github
- 정보처리기사
- Today
- Total
코딩하는라민
[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의 도움을 받아 학습한 내용을 간단하게 정리한 내용입니다.
잘못된 부분이나 문제되는 점이 있으면 댓글 부탁드립니다.
'Core > TypeScript' 카테고리의 다른 글
[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &) (0) | 2023.05.31 |
---|---|
[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) (3) | 2023.05.30 |
[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) (3) | 2023.05.29 |
[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? (0) | 2023.05.28 |
[TypeScript] 리터럴 타입(literal types) (0) | 2023.05.26 |