TypeScriptで、文字列リテラルによる型推論と、明示的な型指定を併用したい

Question

前提

まず、「指定されたキーに値を詰めたオブジェクトを生成する関数」を生成する関数がJavaScriptであります。

const makeObject = key => val => ({[key]: val})

この関数を素直にTypeScriptにすると、以下のようなジェネリクスが出来上がります。

const makeObject = <T, K extends string>(key: K) => (val: T) => ({[key]: val})

実現したいこと

上の型付けの場合、makeObjectの型引数は「2つとも指定するか、両方を推論させるか」ということになってしまいます。Kにはリテラルを与えて型が明らかな場面も多いので、Kは推論に任せてTだけを指定させたいのです。

問題点・試したこと

そのままmakeObject<number>('key')と書くと、Expected 2 type arguments, but got 1.と個数が足りずエラーとなります。

K extends string = ''のように適当なデフォルト型を与える手段を取ってみると、Argument of type '"key"' is not assignable to parameter of type '""'.と型の不一致でエラーとなってしまいます。

その他

最終的に「型引数1つ、リテラル1つの指定で結果の関数が得られる」関数を書けるなら、makeObjectの型指定を変えるだけでなく、makeObject自体の構造を変える手段も問題ないです。

補足情報（FW/ツールのバージョンなど）

"typescript": "^5.7.2"

Comments

[utm.]

これではだめなのですか？

const get = (index: number) => <T>(array: T[]) => array[index];
// num2 に正しく number 型がつく
const num2 = get(1)(numArr);

コピペ元:
https://qiita.com/uhyo/items/6acb7f4ee73287d5dac0#%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AA%E3%82%AF%E3%82%B9%E3%81%A8%E3%82%AB%E3%83%AA%E3%83%BC%E5%8C%96%E3%81%95%E3%82%8C%E3%81%9F%E9%96%A2%E6%95%B0%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E6%B3%A8%E6%84%8F

[maisumakun]

> これではだめなのですか？

求めるものと全くの別物に見えます。まず、関数の結果としてオブジェクトが得られていません。

[utm.]

1-1. teratailはサポートセンターではなく、思考するエンジニアの為のQ&Aコミュニティです

1-2. 投稿前に検索し、できるところまで自分でやってみましょう

2. 質問をする前に自分で何がわからないのかを把握しましょう

2-1. 今置かれている状況を整理し、わかっている範囲とわからない範囲を明確にしましょう

質問するときのヒント
https://teratail.com/help/question-tips

[maisumakun]

えっと、何がしたいのでしょうか？

的はずれなものを的外れという、質問者にはそれすら許されないものなのでしょうか？

> 質問するときのヒント

質問について不足したと感じる点があるのでしたら、そこの明示をお願いいたします。

[utm.]

カリー化の際に二つ目の関数について、ジェネリック型を指定したいという質問趣旨かと思ったのですが、
そうではなく、動的関数の生成(メタプログラミング)をしたいという趣旨の質問なのですか？

私が最初のコメントでいいたかったのは、まず自分で調べたのか？ということです。
質問文にはそういうことを記載するものではないのでしょうか？

「求めるものと全くの別物に見えます。」とだけ返されても、考えることを放棄して答えだけをもらいたいようにしか見えませんが。
逆にどういう利用方法をしたいのですか？

[maisumakun]

> カリー化の際に二つ目の関数について、ジェネリック型を指定したいという質問趣旨かと思ったのですが、

すみません、最初のコメント時点でもう少し説明をいただきたかったです。

> 「求めるものと全くの別物に見えます。」とだけ返されても、考えることを放棄して答えだけをもらいたいようにしか見えませんが。

もとの質問に則さない形で適当に貼り付けただけのコメントに見えたので、そのような返答となってしまいました。失礼いたしました。

Answer 1

こんにちは。

TypeScript は個人的に避けていて専門外なので、TS 特有の型テクとは無縁ですが、
単純に T の型は明示的に指定し K は推論させたいという要件だと、T の型だけ指定した generic function を呼び出し、その戻り値で K の generic function を返せばできそうな気がしました。
playground で入力してみたらできたっぽいのが以下ですが、これで要件を満たしているかどうかは分かりません。

const makeObject = <T,>() => <K extends string>(key: K) => (val: T) => ({[key]: val})

const makeNumberObject = makeObject<number>();
const obj = makeNumberObject("key")(123);

Comments

[maisumakun]

いったん関数で切り離すのは1つの手段ですね。

（あと、自分が提示したコード時点からの問題ですが、返り値として得られるオブジェクトにas {[key in K]: T}のように振っておかないと、キーの型が決まらないという問題があったことに気づきました）

Answer 2

こういう解法もあるかと思います。

考えのベースとして、
引数の部分の型を指定したいので、それ自体を引数として公開します
(val: User) => val
を受け取る関数を作る。(Userはtypeでエイリアスがつけられているとする)
*以下のソースでは実際には引数の型を見るので、上記の書き方以外も許容されます。

// 元のコード
const nativMakeObject = key => val => ({[key]: val})

// TSように作成したコード
const TSMakeObject = <T extends (...args: any[]) => any, K extends string>(func:T ,key: K) => (val: ReturnType<T>) => ({[key]: val})
// 以下は同じ意味
// const TSMakeObject = <T extends (...args: any[]) => any, K extends string>(func: T,key: K) => (val: ReturnType<typeof func>) => ({[key]: val})

// 使用例
const object101 = TSMakeObject(String, "key")("val"); // { "key": "hello" }
console.log(object101);

const object2 = TSMakeObject(String,"customKey2")(42);     // error: 42 は Stringではない
const object3 = TSMakeObject(Boolean,"customKey3")(true);   // { "key": true }

type User = { name: string; age: number };
// 本来はこう使う。Stringなどで、省略できるのはクラスがコンストラクターを生成するため、糖衣構文のようなものと考えてよい。
const object4 = TSMakeObject((val : User) => val, "key")({name: "Jon" , age: 22 }); // { "key": {"name": "Jon" , "age": 22 }}
console.log(object4);


console.log(TSMakeObject(String, "key")("val"));
console.log(nativMakeObject("key")("val"));

//こっちのほうが呼び出しの際分かりやすい気がする (引数の順序を左右入れ替えているだけ)
// const TSMakeObject2 = <K extends string, T extends (...args: any[]) => any>(key: K, func: T) => (val: ReturnType<T>) => ({[key]: val})

// const object201 = TSMakeObject2("key", String)("val"); // { "key": "hello" }
// console.log(object201);


// 共通化などを前提にした処理が糖衣構文で埋め込まれていると、行が長くなる、式の評価順序が直感的ではないなどの理由より
// リプレイスの際にコードリーディングが大変になるリスクをはらんでいるため、理解して使用する
// function TSMakeObject3<K extends string, T extends (...args: any[]) => any>(key: K, func: T) {
//     return function (val: ReturnType<T>) {
//         return {[key]: val}
//     } 
// } 

// // 使用例
// const object301 = TSMakeObject2("key", String)("val"); // { "key": "hello" }
// console.log(object301);