1

valueの型を指定したオブジェクトがあります。

export type SingleTextEditorParamList = {
  title: string;
  value: string | undefined;
  onSubmit: (text: string) => Promise<void>;
  note?: React.ReactNode;
};

const SingleTextEditorParams: Record<string, SingleTextEditorParamList> = {
  a: {...省略},
  b: {...省略},
  c: {...省略},
  d: {...省略} 
};

SingleTextEditorParamsからa|b|c|dの型を作ることは可能でしょうか?


type SingleTextEditorParamKeys = keyof typeof SingleTextEditorParams;

これだとstringになってしまいます。

const SingleTextEditorParams: {[key: string]: SingleTextEditorParamList} = {省略}

これも試しましたがstring | numberになりました。

type SingleTextEditorParamKeys = a|b|c|d;

const SingleTextEditorParams: {[key in SingleTextEditorParamKeys]: SingleTextEditorParamList} = {省略}

ってすると、キーが増えた時、二箇所にキーを追加するのが冗長なので嫌だなと思いまして。もし方法があったら教えてください。

3 件の回答 3

2

型アノテーションをつけない SingleTextEditorParams (仮に UntypedSingleTextEditorParams とします) を先に作り、
SingleTextEditorParamKeyskeyof typeof UntypedSingleTextEditorParams とするのはいかがですか。

const UntypedSingleTextEditorParams = {
    a: ...,
    b: ...,
    c: ...,
    d: ...,
};

type SingleTextEditorParamKeys =
    keyof typeof UntypedSingleTextEditorParams;

const SingleTextEditorParams
    : Record<SingleTextEditorParamKeys, SingleTextEditorParamList>
    = UntypedSingleTextEditorParams;
2
  • 試してみましたがこの方法だとUntypedSingleTextEditorParamsを定義する時のオブジェクトの値の型チェックが効かないですね(よくみたら当たり前ですが)。やっぱりキーは型の宣言とオブジェクトの宣言二箇所に書かないとダメそうですかね。 Commented 2022年8月12日 5:24
  • @MasamotoMiyata UntypedSingleTextEditorParams を SingleTextEditorParams に束縛するときに型チェック効きませんか?
    – orangecat
    Commented 2022年8月12日 6:32
2

まず:Record<string, SingleTextEditorParamList>{[key: string]: SingleTextEditorParamList}とほとんど一緒です。Recordの意味については公式ドキュメントが詳しいのでそちらをご覧ください。


問題を解決するためには単にSingleTextEditorParamsの型注釈を外し、type SingleTextEditorParamKeys = keyof typeof SingleTextEditorParamsを追加すると良いです。現在のSingleTextEditorParamsRecord<string, SingleTextEditorParamList>となっているので、keyof typeof SingleTextEditorParamsの結果はstringとなります。

1
  • わかりづらくてすいません。そこは記載が漏れていました。型注釈を外せば作れるのは分かっていたのですが、SingleTextEditorParamsの各要素の型チェックが無くなっちゃうので、それを残したまま、キーを2度書かずに済む方法を探していました。@orangecatさんのやり方でいけそうですね。試してみます。 Commented 2022年8月10日 2:20
1

直接的な方法は無いようです。

キーの型だけ推論する構文は無い

質問の動作を実現するには、下記のように、プロパティの値の型は明示(Foo)しつつ、キーの型は代入するオブジェクトリテラルから推論する、という構文が必要です。

const fooRec: Record<ここを推論, Foo> = {
    a: { prop: "string" },
    b: { prop: "string" },
    c: { prop: "string" },
}

しかし、このような構文はありません。issue にて要望はいくつか出されています。

ジェネリック関数の呼び出しを利用する方法

代替案として、既存の回答にあるように、型を記述せずにすべて推論させる方法があります。この場合、型チェックは変数の使用時に行われるので、エラーが出る箇所などが少し理想と異なります。

できるだけオブジェクトリテラルを書く場所で型チェックを行ないたい場合は、ジェネリック関数の呼び出しを利用する方法があります。ジェネリック関数の呼び出しでは、引数の型チェックを行いつつ、ジェネリック部は推論させることができるので、都合がよいです。

例:

type Foo = {
    prop: string
}

// Record のキーの型を T とし、呼び出し箇所で推論する
function initFooRec<T extends string>(x: Record<T, Foo>): Record<T, Foo> {
    return x
}

// fooRec は Record<"a" | "b" | "c", Foo>
const fooRec = initFooRec({
    a: { prop: "string" },
    b: { prop: "string" },
    c: { prop: "string" },

    // 下のように Foo 型ではない値を入れると、エラーとして検出できる
    // d: { prop: "string", x: 123 },
})

// FooRecKeys は  "a" | "b" | "c"
type FooRecKeys = keyof typeof fooRec

キーの型を推論するのに使う initFooRec は引数をそのまま返すだけの恒等関数としています。実行時の処理があるならば加えてもよいでしょう。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。