맵의 일부만 구현하고 싶을 때: TypeScript Partial

과목별 문제들을 매핑하는 객체를 만들던 중이었다.

 

import englishQuestions from '../../__fixtures__/questions/starred/english';
import generalQuestions from '../../__fixtures__/questions/starred/general';
import { SubjectName } from './types';

type QuestionsType = {
  starred: Record<SubjectName, any[]>;
};

const questions: QuestionsType = {
  starred: {
    general: generalQuestions,
    english: englishQuestions,
  },
};

export default questions;

 

이런 식으로 Record를 사용하면 javascript에서 처럼 이렇게 사용할 수 있다.

const curQuestions = questions.starred[curSubject];

 

그런데 SubjectName이라는 type이 저 두 과목밖에 없는게 아니라서 나머지 과목들을 입력해줘야 한다는 TS 에러가 떴다.

export type SubjectName =
  | 'general'
  | 'korean'
  | 'mathematics'
  | 'socialStudies'
  | 'science'
  | 'english'
  | 'music'
  | 'art'
  | 'physicalEducation'
  | 'ethics'
  | 'practicalArts';

 

근데 아직 그 과목들은 구현을 안해놨다.

두 과목만 구현하고 싶은데 이 때 쓸 수 있는 것이 Partial이다.

 

import englishQuestions from '../../__fixtures__/questions/starred/english';
import generalQuestions from '../../__fixtures__/questions/starred/general';
import { SubjectName } from './types';

type QuestionsType = {
  starred: Partial<Record<SubjectName, any[]>>;
};

const questions: QuestionsType = {
  starred: {
    general: generalQuestions,
    english: englishQuestions,
  },
};

export default questions;

 

이렇게 구현해주면 과목들 일부만 구현해도 된다. 개꿀