호박고구마

keyof

정의

객체 타입의 키들을 유니언 타입으로 반환함. 객체의 모든 키를 타입 수준에서 다루고자 할 때 유용하게 사용

keyof 주의점

하지만 typeof를 사용할땐 주의점이 필요하다. 간혹 type에 사용하지 않고, const나 let과 같은 변수에 사용하는데, 이와 같은 경우에는 에러가 발생하므로 주의하자.

결론 : keyof는 변수 or 객체 리터럴에는 할당이 불가능함, type에만 할당가능함

type에만 할당 가능 예제1)

const obj = { a: 1, b: 2, c: 3,}; 
type TypeOfObj = typeof obj; // { a: number, b: number, c: number }
type Key = keyof typeof obj; // "a" | "b" | "c"

type에만 할당 가능 예제2)

type obj = { a: number, b: string};
type Key = keyof obj // "a" | "b"

변수 or 객체 리터럴의 할당 못하는 경우의 예제)

const obj = { a: 1, b: 2, c: 3,}; // const는 변수
type Key = keyof obj // X 오류 발생

typeof

정의

반적인 자바스크립트 변수의 런타임 타입을 반환하는 데 사용한다. 타입스크립트에서 변수나 객체의 타입을 추론하는 데 주로 사용한다.

일반적인 자바스크립트에서 사용

const numberValue = 42;
console.log(typeof numberValue); // "number"

타입스크립트에서의 사용

예제1)

const user = {
    username: "alice",
    email: "alice@example.com",
};

type UserType = typeof user; // { username: string; email: string; }\\

예제2)

const obj = { a: 1, b: 2, c: 3,}; 
type TypeOfObj = typeof obj; // { a: number, b: number, c: number }

오늘부터 우아한 타입스크립트 책을 읽고 정리를 하려한다. 앞에 부분은 조금 넘어가고 타입 챕터에 대한 요약분을 남겨두겠다.

타입

자바스크립트에서의 자료형

• undefined
• null
• Boolean
• String
• Symbol
• Numeric(Number + BigInt)
• Object

정적 타입 언어 vs 동적 타입 언어

정적 타입 언어

• 모든 변수의 타입이 컴파일타임에 결정
• Java, C, Typescript가 이에 해당함
• 컴파일 타임에 에러를 확인함

동적 타입 언어

• 변수 타입이 런타임에 결정됨
• 파이썬, 자바스크립트가 대표적

암묵적 타입 + 강타입과 약타입

암묵적 타입

• 개발자가 의도적으로 타입을 명시하거나 바꾸지 않았는데도, 컴파일러 또는 엔진 등에 의해서 런타임에 타입이 자동으로 변경되는 것을 암묵적 타입 변환이라함

강타입

• 서로 다른 타입을 갖는 값끼리 연산 시도하면 컴파일러 or 인터프리터에서 에러가 발생함

약타입

• 서로 다른 타입을 갖는 값 끼리 연산 할 때 컴파일러 또는 인터프리터가 내부적으로 특정 값의 타입을 반환하여 연산을 수행한 후 값을 도출함

타입스크립트의 컴파일 방식

타입스크립트가 탄생한 이유

• 런타임에 사전에 미리 에러를 잡아내기 위하여 탄생함

그래서 타입스크립트가 컴파일하는 방식이 뭔데?

• 타입스크립트를 컴파일하면 타입이 모두 제거된 자바스크립트의 소스코드만 있음
• 즉, 타입스크립트는 자바스크립트에 타입이라는 레이어를 끼얹는 언어이며, 확장언어 라고도 함

Type instantiation is excessively deep and possibly infinite 에러 발생

리액트에서 tailwind-styled-components 라이브러리를 사용하는 과정에서 에러가 발생했다.

tailwind styled components에 props를 전달하는 과정에서, 에러가 발생했는데 구글을 검색해보니
타입스크립트의 버전으로 인해 발생한 것으로 확인되었다.

현재 내가 사용했던 타입스크립트의 버전은 4.8.4이였는데, 3.4.3로 변경하니 다시 잘 작동이 되었고, Props에 변수도 전달이 잘 되었다.

버전을 낮으면 해결되는 걸로 보여진다. (참고 URL)