質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

556閲覧

Array<string>の値から動的に型を生成する事は可能でしょうか?

fijino

総合スコア136

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2021/11/09 00:19

Typescript

1const currencies = ["CNY", "EUR", "GBP", "JPY", "KRW", "USD"] as const; 2type Currency = typeof currencies[number]; // 'CNY' | 'EUR' | 'GBP' | 'JPY' | 'KRW' | 'USD'

上記のように定義する事で配列の値から型を生成する事ができます
これを動的に生成する方法はあるでしょうか?

Typescript

1interface AAAA { 2 [key: string] : Array<string> | Array<boolean>; 3} 4 5type BBBB<T> = { 6 [P in keyof T]: T[P] extends Array<string> ? string : boolean // ★stringの場合 値から動的に型を生成したい 7} 8 9function func<T extends AAAA>(input : T): BBBB<T> { 10 : 11} 12 13const result = func({ 14 str: ["aa", "bb"], 15 bol: [true], 16});

たとえば、上記のようにfuncを呼んだときの戻り値BBBB型は以下のようにしたいです

Typescript

1{ 2 str: 'aa' || 'bb', // ★ 現状はstringになるので値から型を生成したい 3 bol: boolean, 4}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

例えばこのように書いたら

ts

1type Input = { 2 [key: string]: string[] | boolean[]; 3}; 4 5type UnpackInput<T extends Input> = { 6 [K in keyof T]: T[K][number]; 7}; 8 9function unpack<T extends Input>(_input: T): UnpackInput<T> { 10 return {} as any; 11} 12 13const result = unpack({ 14 str: ["aa", "bb"], 15 bol: [true], 16});

こうなることを期待しますが、

ts

1result.str; // (property) str: "aa" | "bb" <- こうはならない 2result.bol; // (property) bol: true

実際はstrの中身が不変であることを保証していないため、stringとして扱われてしまいます。

ts

1result.str; // (property) str: string <- stringにされてしまう 2result.bol; // (property) bol: true

一番シンプルな方法は引数の配列の型をreadonly修飾子でReadonlyArrayにし、関数を呼び出す際に配列にas constと書き加えることです。

ts

1type Input = { 2 [key: string]: readonly string[] | readonly boolean[]; 3}; 4 5type UnpackInput<T extends Input> = { 6 [K in keyof T]: T[K][number]; 7}; 8 9function unpack<T extends Input>(_input: T): UnpackInput<T> { 10 return {} as any; 11} 12 13const result = unpack({ 14 str: ["aa", "bb"] as const, 15 bol: [true], 16}); 17 18result.str; // (property) str: "aa" | "bb" <- "aa" | "bb" を残してくれる 19result.bol; // (property) bol: true

しかし関数を呼び出す度にas constと書き加えるのは面倒ですし、万が一書き忘れたとしてもコンパイラは注意してくれません。そこで、もう一つの選択肢としてtscの特性を悪用活用したNarrow型ハックと呼ばれる方法があります。

ts

1/** Narrow型の実装の一例 */ 2type Narrow<T> = { [K in keyof T]: Narrow<T[K]> } | T;

Narrow型を使うことでオブジェクトの中身にreadonly修飾子をつけ、呼び出し時にas constアサーションをつけた時のような結果を得ることができます。

ts

1type Input = { 2 [key: string]: string[] | boolean[]; 3}; 4 5type UnpackInput<T extends Input> = { 6 [K in keyof T]: T[K][number]; 7}; 8 9function unpack<T extends Input>(input: Narrow<T>): UnpackInput<T> { 10 return {} as any; 11} 12 13const result = unpack({ 14 str: ["aa", "bb"], 15 bol: [true], 16}); 17 18result.str; // (property) str: "aa" | "bb" <- "aa" | "bb" を残してくれる 19result.bol; // (property) bol: true

黒魔術に抵抗がなければ後者をお勧めしますが、そうでなければeslint用のルールを書いてas constを繰り返し書く方法が良いでしょう。

追記

上記Narrow型は例としてのシンプルさを優先するため、あらゆるエッジケースについて一才の考慮をしていません。実際の開発ではmillsp/ts-toolbeltにあるような真面目な実装を用いることをお勧めします。

投稿2021/11/09 03:58

編集2021/11/09 04:47
itepechi

総合スコア248

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fijino

2021/11/09 10:22

ご回答ありがとうございます おかげ様で解決できましたが、まだ十分理解できていないので後は自分で調べて理解したいと思います ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問