<div id="readability-page-1" class="page"><div role="banner"> <div> <h4>24 Aug 2023</h4> Reading time ~1 minute  </div> <h2 id="typescript에서-특정-key를-가진-타입-생성">Typescript에서 특정 key를 가진 타입 생성</h2> <blockquote> 약속된 키만 가진 클래스를 생성하려다 실패했습니다. 검색을 해보니, Type이나, Record를 사용하라고 되어 있네요. </blockquote> <h2 id="type을-이용한-처리">type을 이용한 처리</h2> <div><pre><code>type DayOfTheWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";

type ChoresMap = { [DAY in DayOfTheWeek]: string };

const chores: ChoresMap = { // ERROR! Property 'saturday' is missing in type '...'
 "sunday": "do the dishes",
 "monday": "walk the dog",
 "tuesday": "water the plants",
 "wednesday": "take out the trash",
 "thursday": "clean your room",
 "friday": "mow the lawn",
};
</code></pre></div> <h2 id="record-를-이용한-처리"><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type">Record</a> 를 이용한 처리</h2> <blockquote> Record는 프로퍼티 키가 Keys이고 프로퍼티 값이 Type인 객체 유형을 생성합니다. 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑하는 데 사용할 수 있습니다. </blockquote> <div><pre><code>interface CatInfo {
 age: number;
 breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record&lt;CatName, CatInfo&gt; = {
 miffy: { age: 10, breed: "Persian" },
 boris: { age: 5, breed: "Maine Coon" },
 mordred: { age: 16, breed: "British Shorthair" },
}; 
</code></pre></div> <h2 id="옵션-key-처리">옵션 key 처리</h2> <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type">Record</a>은 key를 필수 값으로 만듭니다. 이를 <code>옵션</code>으로 처리 하기 위해서는 <code>Partial</code>을 이용합니다. 코드는 아래와 같습니다. <div><pre><code>// type
type DayOfTheWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";

type ChoresMap = { [DAY in DayOfTheWeek]: string };

const chores: Partial&lt;ChoresMap&gt; = { // Partial 을 이용한 옵션 처리
 "sunday": "do the dishes",
 "monday": "walk the dog",
};

// Record
interface CatInfo {
 age: number;
 breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Partial&lt;Record&lt;CatName, CatInfo&gt;&gt; = { // Partial 을 이용한 옵션 처리
 miffy: { age: 10, breed: "Persian" },
 boris: { age: 5, breed: "Maine Coon" },
};
</code></pre></div> <h2 id="참고자료">참고자료</h2> <ul> <li><a href="https://stackoverflow.com/questions/13315131/enforcing-the-type-of-the-indexed-members-of-a-typescript-object">Enforcing the type of the indexed members of a Typescript object?</a></li> <li><a href="https://stackoverflow.com/questions/53276792/define-a-list-of-optional-keys-for-typescript-record">Define a list of optional keys for Typescript Record</a></li> </ul> </div></div>

lahuman

Daniel Lim

Typescript에서 특정 key를 가진 타입 생성
약속된 키만 가진 클래스를 생성하려다 실패했습니다. 검색을 해보니, Type이나, Record를 사용하라고 되어 있네요.
type을 이용한 처리
type DayOfTheWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";
type ChoresMap = { [DAY in DayOfTheWeek]: string };
const chores: ChoresMap = { // ERROR! Property 'saturday' is missing in type '...'
 "sunday": "do the dishes",
 "monday": "walk the dog",
 "tuesday": "water the plants",
 "wednesday": "take out the trash",
 "thursday": "clean your room",
 "friday": "mow the lawn",
};
Record 를 이용한 처리
Record는 프로퍼티 키가 Keys이고 프로퍼티 값이 Type인 객체 유형을 생성합니다. 이 유틸리티는 타입의 프로퍼티를 다른 타입에 매핑하는 데 사용할 수 있습니다.
interface CatInfo {
 age: number;
 breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Record<CatName, CatInfo> = {
 miffy: { age: 10, breed: "Persian" },
 boris: { age: 5, breed: "Maine Coon" },
 mordred: { age: 16, breed: "British Shorthair" },
}; 
옵션 key 처리
Record은 key를 필수 값으로 만듭니다.
이를 옵션으로 처리 하기 위해서는 Partial을 이용합니다.
코드는 아래와 같습니다.
// type
type DayOfTheWeek = "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday";
type ChoresMap = { [DAY in DayOfTheWeek]: string };
const chores: Partial<ChoresMap> = { // Partial 을 이용한 옵션 처리
 "sunday": "do the dishes",
 "monday": "walk the dog",
};
// Record
interface CatInfo {
 age: number;
 breed: string;
}
 
type CatName = "miffy" | "boris" | "mordred";
 
const cats: Partial<Record<CatName, CatInfo>> = { // Partial 을 이용한 옵션 처리
 miffy: { age: 10, breed: "Persian" },
 boris: { age: 5, breed: "Maine Coon" },
};
참고자료
Enforcing the type of the indexed members of a Typescript object?
Define a list of optional keys for Typescript Record

Typescript에서 특정 key를 가진 타입 생성

댓글