`i18next.Template Literal Types를 사용하여 t()`의 매개변수를 구속합니다.

이른바 i18next

i18next는 국제화에 대응하는 프로그램 라이브러리이다.init에 대응하는locale의 사전을 읽은 후 사전의 키를 i18n.t() 건네주면 locale 기반의value를 되돌려줍니다.

import i18next from 'i18next';

const en = {
  address: 'address',
  animals: {
    cat: 'cat',
  },
};

const ja = {
  address: '住所',
  animals: {
    cat: '猫'
  },
};

const resources = {
  'en-US': {
    translation: en,
  },
  ja: {
    translation: ja,
  },
};

i18next.init({
  lng: 'ja',
  resources,
});

i18next.t('address')
// => ja だと住所
// => en-US だとaddress

i18next.t('animals.cat')
// => ja だと猫 
// => en-US だとcat

i18next.t()가 받아들인 키의 유형은string|string[]이다.이번에 이곳의 유형은 실제 존재하는 사전의 키에만 국한하여 지정된 사전에 존재하지 않는 키의 사고를 방지하고 IDE에서 보충적이고 효과적인 상태를 달성하는 것을 목표로 한다.

string의value를 가져오는 키의 종류를 정의합니다

type RecursiveRecord = {
  [key in string]: string | RecursiveRecord;
};

type PickKeys<T extends RecursiveRecord, K = keyof T> = K extends string
  ? T[K] extends string
    ? K
    : `${K}.${PickKeys<Extract<T[K], RecursiveRecord>>}`
  : never;

RecursiveRecord인지string인지RecursiveRecord자신을value로 저장한object의 유형인지, 사전 파일의 유형을 구상했다.PickKeys는RecursiveRecord에서stringvalue가 있는 키를 추출하는 유형입니다.T[K]는string의 경우 키로 직접 되돌아오고T[K]는RecursiveRecord의 경우 키와value의object를PickKeys의 파일.로 join 같은templateliteral을 진행한다.사전 파일의 형식을generics 형식으로 이 PickKeys 형식에 전달하면 유효한 키의 유니온을 매개 변수로 사용할 수 있습니다 i18next.t().

type I18nDictionary = { 
  address: string;
  animals: {
    cat: string;
    dog: string;
  };
};

type I18nKey = PickKeys<I18nDictionary>;

wrapper function 만들기

방금 정의한 I18nKey 형식을 사용하여 i18next.t() 의 wrapper function을 정의합니다.

import i18n, { TFunctionResult, TOptions } from 'i18next';

const translate = (key: I18nKey|I18nKey[], options?: TOptions) => {
  return i18next.t<TFunctionResult, I18nKey>(key, options);
};

translate()의 매개 변수를 입력했을 때key의 유형이 보충되었습니다.