inflearn logo
강의

講義

知識共有

実践練習で身につける高度なタイプスクリプト技術

Brand型を活用したObjectアプローチ

이게 된다는걸 어떻게 판단할 수 있나요?

解決済みの質問

60

csh0012319063

投稿した質問数 9

0

const db: { [postId: PostId]: Post; [userId: UserId]: User; } = {};

이 강의를 보지 않고 이게 된다는걸 판단할려면 어떻게 판단할 수 있나요?

모호한 질문 죄송합니다. 구체적으로 질문하고 싶은데 내공이 부족한 것 같습니다.

typescript

回答 2

1

aftercamp

안녕하세요 답변이 늦었습니다.

제가 질문 의도를 이해를 못했는데 그냥 질문 그대로 답변을 드리자면

 

https://www.typescriptlang.org/play/?#code/MYewdgzgLgBAJgIwFwwN4wNoAcTQJJwoAKuUBAusaQNyYCuEApgE4EoCqTrclMnLtAL4wAvGkHUgA

이런 타입스크립트 플레이그라운드에서 타입이 맞냐 아니냐를 확인가능합니다. 그리고 굳이 타입에러를 없애겠다고 하면

type PostId = `post_${string}`;
  type UserId = `user_${string}`;

  type Post = {
    title: string;
    content: string;
  };

  type User = {
    name: string;
    email: string;
  };

  const db: { [postId: PostId]: Post; [userId: UserId]: User } = {};

  // 사용 예시
  db["post_1"] = { title: "Hello", content: "World" };
  db["user_1"] = { name: "Kim", email: "kim@example.com" };

이렇게 하면 되지 않을까 싶습니다.

0

csh0012319063

우선 답변 감사합니다.

강의 내용이 너무 좋고 배워가는게 많지만, 강의를 보지 않더라도 이런게 있고 사용가능하다는걸 판단할 수 있도록 연습을 해야된다고 생각해서 질문을 드리게 되었습니다.

 

  1. 인덱스 시그니처의 키 타입에 브랜드 타입이 사용가능하다는 판단을 어떻게 할 수 있는지 궁금합니다.
    인덱스 시그니처의 키 타입에 들어갈 수 있는 타입들이 string, number, symbol, 템플릿 리터럴, 해당 타입들의 조합인걸로 알고있는데 브랜드 타입을 사용하는게 생소한 것 같습니다.
    type Brand<K, T> = T & { __brand: K }; 처럼 &를 사용하기 때문에요.

  2. 객체 리터럴 내부에 인덱스 시그니처를 동시에 두개 사용하는 판단을 어떻게 할 수 있는지 궁금합니다.
    원래는 하나만 사용가능한걸로 알고있는데, 두개를 쓸수있다는 발상을 어떻게 할 수 있는지 궁금합니다.

  3. 알게 된 사용 방식은 실제 예시 코드를 작성해서 되는지 안되는지 확인하면 된다는걸로 이해했습니다.

 

 

1

aftercamp

안녕하세요 답변이 늦어서 죄송합니다.

 

  1. 결국 PostId는 string의 서브타입입니다. 제 생각의 흐름은 "아 PostId도 결국 string의 서브타입 (엄청 구체적인 타입, string이면서 _brand 속성도 가진 타입)이구나! 인덱스 시그니처 타입은 string | symbol | number... 가능하니까 string, symbol 등등 서브타입은 모두 가능하겠네?" 입니다. 원하시는 답변이 되셨을까요?

 type PostId = string & { __brand: "PostId" };
  1. 음 이건 저도 찾아보니까 타입스크립트 4.4부터 가능했더라고요. 아래 링크는 예시입니다. https://www.typescriptlang.org/play/?#code/AQ4FwTwBwU2AFA9gZzMAvMA3gKFOASzABsYAuYVAJwIDsBzAbj1AGNFawZOLq6mWAX2YtIsYAFVkMKhmwsQtAIYBbcpTA0GzfDBVKCxXpv47gwlgHpLwQC7jgGJrggDBbALl0A6Ny3a1UwJRSxgAG0AaxgICgADKBQwAH0AEiw+BkFIgF0KJF9BOSwLKxtbQGCawBHm4EACFuBADCHgQAjxwAHJ4EApUcARccAZOoB+YEAfdsADmuBAFNnAAw6vDl8AIwCFYLCI4GjYxOSTVIys2LMQUPCogFdpKmWU+jTMyUPGEGtgQAplwBZF22BATprADTmm5sAeccAJpvahPOEQA

    참조: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html
    "final note on index signatures is that they now permit union types" 이 문장으로 찾아보세요!

0

csh0012319063

이해됐습니다 감사합니다!

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다. 정중한 몽구스님.

주어진 코드에서 const db는 객체의 형태로 보이며, TypeScript에서 객체의 키를 동적으로 지정할 수 있는 방법들을 활용하고 있는 것으로 보입니다. 이때 [postId: PostId][userId: UserId]는 TypeScript의 인덱스 시그니처를 나타냅니다.

TypeScript에서는 객체의 키 타입을 특정하여 인터페이스를 정의할 수 있습니다. 예를 들어, 객체의 키를 PostId 타입과 UserId 타입으로 각각 지정하고, 그에 대한 값 타입을 Post와 User로 정의한 것입니다. 하지만, TypeScript에서 인덱스 시그니처는 동일한 타입으로만 선언될 수 있습니다. 다양한 타입을 키로 사용하고 여러 타입을 값으로 사용하려면 두 번 이상 선언이 필요합니다.

이런 점에서 const db 선언은 오류가 발생할 가능성이 있습니다. 실제로 사용할 때 각각의 ID 타입을 다른 방식으로 처리하거나 접근 방법을 다시 설정해야 할 수도 있습니다.

비슷한 주제나 문제에 대한 강의나 FAQ가 있다면 아래와 같이 이전의 질문들을 참조해보실 수 있습니다:

이러한 방식으로 해당 코드가 가능할지 결정하기 위해서는 TypeScript의 문법 규칙을 잘 알고 있어야 합니다. TypeScript 문서를 참조하시거나 관련 강의를 통해 조금 더 구체적인 타입 시스템의 동작을 이해하실 것을 권장 드립니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

연습문제 강의 확인 부탁드립니다.

0

80

2

object key 질문드립니다.

0

66

1

행운 닉네임 등록부탁드립니다!

0

136

2

각 강의에 대한 설명 링크 404에러

0

69

2

행운문제 닉네임 등록 요청드립니다

0

64

2

블로그 링크 문제

1

122

1

제네릭과 사용자 정의 타입 가드에 관한 질문

1

168

1

제네릭 타입 제한을 하는것이 어떤 장점이 있을까요 ?

1

140

1

행운문제 닉네임 등록 신청합니다!

0

111

2

행운문제 테스트 유저 이름 입력 요청

0

129

2

행운문제 닉네임 입력 요청

1

158

2

행운문제 테스트 유저 이름 입력 요청

1

140

2

설명 블로그에 대한 질문

2

128

3

행운동전!

0

115

2

행운문제 테스트 유저 이름 입력 요청

0

122

1

행운 테스트 문제 400 에러

0

177

2

행운 테스트 문제 (존재하지 않는 유저입니다.)

1

203

2

행운테스트 동전이용!!

0

209

2

연습문제 링크 이슈

2

223

3

화살표 함수와 일반 함수의 매개변수 추론 관련

1

308

2

제네릭을 활용해서 정답을 맞춰보았습니다!

1

332

2

cache 강의 질문

1

211

1

Record의 제네릭은 자동적으로 바뀌나요?

0

379

2

extends와 = 의 차이는 무엇인가요?

1

222

1