객체의 프로퍼티에 접근, Index signature

const a = "Hello World"
// ⭐ 컴파일러는 이 변수를 string이 아닌 조금 더 좁은 타입으로 선언한 것으로 추론한다.(Literal Narrowing)
// ⭐ a의 타입은 string 타입보다 훨씬 구체적인 "Hello World" 타입이다.

let b = "Hello World"        
// ⭐ b변수는 let으로 선언되어 재할당될 수 있을 경우 어떤 문자열이든 넣을 수 있으며 그 경우의 수가 무한대
// ⭐ 그렇기 때문에 컴파일러는 이 변수를 string타입으로 추론한다.

const c: string = "Hello World"
//c 변수는 명시적으로 string 으로 선언했으므로 string 타입이다.

const obj = {
   foo: "hello"
}

let propertyName = "foo"  //propertyName는 string 타입(let) 

console.log(obj[propertyName])
// 💣💣 컴파일 에러!
//에러가 발생한 이유는 string literal 타입만 허용되는 곳(객체의 key)에 string 타입을 사용했기 때문

const obj = {
  foo: "hello",
}

const propertyName = "foo"

console.log(obj[propertyName]) // ok!
console.log(obj["foo"]) // ok!
// ⭐⭐ 정상 컴파일
//⭐⭐ "foo"와 propertyName 모두 string literal type

<function handleEvent(event:string) {} // 이벤트 이름을 string 타입으로 받는다면
handleEvent("click") 
handleEvent("clock")  // compile error : 오타. 컴파일 타임에 발견할 수 없다.
handleEvent("hover")  // compile error : 유효하지 않은 이벤트 이름. 컴파일 타임에 발견할 수 없다

type EventType = "mouseout" | "mouseover" | "click" //string literal 타입들의 조합
function handleEvent(event:EventType) {} 
handleEvent("click")
handleEvent("hover") //compile error : EventType이라는 타입에 해당 string literal이 정의되지 않았기 떄문

string 타입으로 객체의 프로퍼티에 접근하는 방법은?

interface Person {
  [key: string]: string | number;
}

const person: Person = {}

person['name'] = '공공';
person['나이'] = 19;

동적으로 Object에 property 추가

자바스크립트

타입스크립트

Index signature의 단점

• 모든 키를 허용한다.
따라서, 객체에 없는 키를 사용하더라도 타입 체크에서 에러가 나지 않는다.

• 특정 키가 필요하지 않다. { }와 같이 빈 객체도 할당이 된다.

• 키마다 다른 타입을 가질 수 없다.
따라서, 값의 타입을 유니온 타입을 사용해 확장시켜야 한다.

• 타입스크립트의 언어 서비스를 제공받을 수 없다.

Record 타입

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Mapped 타입

type Vec3D = { [k in 'x' | 'y' | 'z']: number }

type ExternalType = {
  [key: string]: string | undefined;
}

참고자료

TypeScript | Index Signature - string key로 객체에 접근하기

JSX 파일을 TSX확장자로 바꾸어 작업을 하면서 객체를 활용하고 프로퍼티에 접근, 프로퍼티를 추가하는데에 자바스크립트와 타입스크립트 간에 차이가 있다는 것을 새롭게 알게되어 아래에 정리해보고자 한다. 먼저, 타입스크립트 오류 메시지 중 읽어봐도 감이 안잡혔던 오류를 해결한 방법을 통해 객체 활용 시 자바스크립트와 타입스크립트의 차이점에 대해 말하면 좋을 것 같다.

https://velog.io/@yyeonjju/TypeScript-Index-Signature-string-key%EB%A1%9C-%EA%B0%9D%EC%B2%B4%EC%97%90-%EC%A0%91%EA%B7%BC%ED%95%98%EA%B8%B0

인덱스 서명(Index Signature)

Object에 들어있는 다른 어떤 JavaScript 객체 참조도 문자열 로 액세스할 수 있습니다.

https://radlohead.gitbook.io/typescript-deep-dive/type-system/index-signatures

[이펙티브 타입스크립트+15] 동적 데이터에 인덱스 시그니처 사용하기

2장 타입스크립트의 타입 시스템 아이템 15 | 동적 데이터에 인덱스 시그니처 사용하기 3줄 요약 1. 가능하다면 인덱스 시그니처 사용을 피하자. 2. keys를 알고 있다면 Record 타입 혹은 매핑된 타입 사용을 고려해보자. 3. 외부에서 받아오는 것과 같이 keys가 변동될 수 있다면 인덱스 시그니처 사용을 고려해보자. 참고) 이펙티브 타입스크립트는 타입스크립트의 기본 그 이상을 다룹니다.

https://junghyunkim.tistory.com/m/entry/%EC%9D%B4%ED%8E%99%ED%8B%B0%EB%B8%8C-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B815-%EB%8F%99%EC%A0%81-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%97%90-%EC%9D%B8%EB%8D%B1%EC%8A%A4-%EC%8B%9C%EA%B7%B8%EB%8B%88%EC%B2%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

TypeScript에서 string key로 객체에 접근하기

TypeScript는 JavaScript의 관점에서 벗어나지 못한 상태로 접했을 때 매우 이상하게 느껴질 때가 있다. 이 포스트에서는 그런한 점 중 하나였던 index signatures에 대해서 이해하기 쉽게 설명하고자 한다. TypeScript는 기본적으로 객체의 프로퍼티를 읽을 때, string 타입의 key 사용을 허용하지 않는다. TypeScript가 처음이라면 아래 코드가 컴파일 에러를 만든다는 사실에 충격을 먹을 수도 있다.

https://soopdop.github.io/2020/12/01/index-signatures-in-typescript/