[解決済み] オブジェクトの型は「不明」です typescript generics
2022-03-06 15:05:47
質問
ある関数を引数として受け取り、新しい関数を返すという簡単な関数があります。この関数は
Object is of type 'unknown'
返された関数を呼び出すと
const makeFunction = <T>(callback: (someParam: number, options: T) => any) => {
return (options: T) => {
const param = 4;
return callback(param, options)
}
}
上記のコードはtypescriptでは問題ないのですが、関数を呼び出すとエラーが発生します。
makeFunction((param, options) => {
const a = options.optionsValue //(parameter) options: unknown, Object is of type 'unknown'
})({optionsValue: 'some value'})
解決方法は?
この定義からTSがどのように型を推論できるかを考える必要がある。TSは2つの場所から型を理解することができる。
- 明示的な汎用型セット
- 関数の第2引数の型
あなたの使用例では、これらのどの場所でも型を指定していないので、このような結果になります。
unknown
なぜなら、TSはどのようにあなたが必要とする引数の型を知ることができるからです。TSに型を理解する可能性を与えるために、あなたはorを行うことができます。
によって明示的にジェネリックを設定する。
makeFunction<YourType>((param, options) => {...))
コールバック関数をあらかじめ定義しておくなどして、コールバック関数の型を設定する。
const f = (a: number, b: {a: string}) => b // here types are set
makeFunction(f)({a: 'some value'}) // makeFunction is able to infer the types by f
また、インラインで次のようにすることもできます。
((param: number, options: MyType))
コメント後の回答
options
は動的である。
以下のような動作が必要なのではないでしょうか。
const makeFunction = <F extends (someParam: number, options: any) => any>(callback: F) => {
return (options: Parameters<F>[1]) => {
const param = 4;
return callback(param, options)
}
}
const f = (a: number, b: {a: string}) => b
makeFunction(f)({ a: 'a' })
const g = (a: number, b: {b: number}) => b
makeFunction(g)({b: 1})
私たちは、ほとんど何も言いません。
-
F
はバイナリ関数から拡張された関数であり、その型を直接推論することができます。 -
Parameters<F>[1]
は、与えられた関数の第2引数の型です。F
タイプ
関連
-
[解決済み] TSLintの "文字列リテラルによるオブジェクトアクセス "を回避するためのコードの書き換え方法
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] モジュール 'module-name' の宣言ファイルが見つかりませんでした。'/path/to/module-name.js' は暗黙のうちに 'any' 型を持っています。
-
[解決済み] Typescript オブジェクトのインデックス付きメンバの型を強制する?
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み] オプションのパラメータを省略しながら、他のオプションのパラメータを渡すには?
-
[解決済み】TypeScriptのインターフェースと型について
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] as "というキーワードは何を意味するのでしょうか?
-
[解決済み] TypeScriptで、「extends keyof」と「in keyof」はどういう意味ですか?
-
[解決済み] Typescript ReferenceError: exports が定義されていません。
-
[解決済み] ReactとTypescript、Axiosのレスポンスにはどの型?
-
[解決済み] モジュール 'module-name' の宣言ファイルが見つかりませんでした。'/path/to/module-name.js' は暗黙のうちに 'any' 型を持っています。
-
[解決済み] オプションのパラメータを省略しながら、他のオプションのパラメータを渡すには?
-
[解決済み] AngularでNameServiceのプロバイダがない
-
[解決済み] noImplicitAnyフラグを有効にしてtypescriptをコンパイルすると、"Index signature of object type implicitly has an 'any' type "というエラーが発生しますが、どうすれば防ぐことができますか?
-
[解決済み】TypeScriptで型をnullableとして宣言する方法は?
-
[解決済み】TypescriptのArray<Type> VS Type[]について