後で忘れないように、キーワード infer をメモしておきます。ちょっと分かりにくいですね。 推測するinfer は TypeScript 2.8 で追加された新しいキーワードです。 infer は条件型の extends 句で使用して、実際のブランチでこの推論された型変数を参照し、推論する型を推論することができます。 例えば、関数の戻り値の型を推測するにはinferを使用します。 型 ReturnType<T> = T は (...args: any[]) を拡張します => R ? R : any を推論します。 タイプ fn = () => 数値 type fnReturnType = ReturnType<fn> // 数値 この例では、 形式 T extends U ? X : Y は条件付き型です。 infer R は推論される戻り値の型を表します。T が関数 (...args: any[]) => infer R の場合、関数の戻り値 R を返し、それ以外の場合は any を返します。 事例:理解を深める約束を破る // プロミスレスポンス型 type PromiseResType<T> = T extends Promise<infer R> ? R : T // 非同期関数 strPromise() { を検証する '文字列プロミス' を返す } インターフェース Person { 名前: 文字列; 年齢: 番号; } 非同期関数 personPromise() { 戻る { 名前: 'p', 年齢: 12 } を人として } type StrPromise = ReturnType<typeof strPromise> // Promise<string> // 逆型 StrPromiseRes = PromiseResType<StrPromise> // str type PersonPromise = ReturnType<typeof personPromise> // Promise<Person> // 逆型 PersonPromiseRes = PromiseResType<PersonPromise> // Person 逆関数入力タイプ 型 Fn<A extends any[]> = (...args: A) => any 型 FnArgs<T> = T は Fn<infer A> ? A を拡張します: any 関数 strFn (名前: 文字列) { } type StrFn = FnArgs<typeof strFn> // [文字列] タプルを結合します。例: [文字列、数値] -> 文字列 | 数値 type ElementOf<T> = T extends Array<infer E> ? E : なし タイプTTuple = [文字列、数値]; type ToUnion = ElementOf<ATuple>; // 文字列 | 数値 新しいオペレーター // パラメータの型を取得します。 type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never; // インスタンス型を取得します。 type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any; クラス TestClass { コンストラクタ( 公開名: 文字列、 公開文字列: 数値 ){} } type Params = ConstructorParameters<typeof TestClass>; // [文字列、数値] type Instance = InstanceType<typeof TestClass>; // TestClass 反応 - リデューサー //関数 useReducer<R extends Reducer<any, any>, I>( を定義します。 減速機: R、 // ReducerState推論型initializerArg: I & ReducerState<R>, 初期化子: (引数: I & ReducerState<R>) => ReducerState<R> ): [ReducerState<R>、Dispatch<ReducerAction<R>>]; // 推論 推論 type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : 一度もない; // リデューサー型 type Reducer<S, A> = (prevState: S, action: A) => S; // リデューサーを使用する const リデューサー = (x: 数値) => x + 1; const [状態、ディスパッチ] = useReducer(リデューサー、''); // "" 型の引数は 'number' 型のパラメータに割り当てることができません。 vue3 - 参照 エクスポートインターフェースRef<T = any> { [isRefSymbol]: 真 値: T } 関数 ref<T>(値: T): T は Ref を拡張します ? T: Ref<UnwrapRef<T>> エクスポート型UnwrapRef<T> = { cRef : T は ComputedRef<infer V> ? を拡張します UnwrapRef<V> : T ref: T は Ref<infer V> を拡張しますか? UnwrapRef<V> : T 配列: T オブジェクト: { [T のキーの K]: UnwrapRef<T[K]> } }[TはComputedRef<any>を拡張します ? 'cRef' : T は Array<any> を拡張します ? '配列' : T は Ref | 関数 | コレクションタイプ | 基本タイプを拡張します ? 'ref' // アンラップすべきでない型を除外する : T はオブジェクトを拡張しますか? 'object' : 'ref'] // const count = ref({ を使用 foo: ref('1')、 バー: ref(2) }) // 推論されたconst count: Ref<{ foo: 文字列; バー: 番号; }> const count = ref(2) // Ref<数値> const count = ref(ref(2)) // Ref<数値> 参照するTypeScript の infer キーワードを理解する Vue3 フォロー You Yuxi が TypeScript Ref 型をゼロから学ぶ TypeScript (V) の使用 ---- 推論 これで、Typescript での infer キーワードの使用に関する詳細な理解に関するこの記事は終了です。Typescript infer キーワードの関連コンテンツの詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Alibaba Cloud Server に Tomcat をインストールして設定し、外部ネットワーク アクセス ポートを追加するチュートリアル
>>: 3つの主要データベース(Mysql、SqlServer、Oracle)の違いについて簡単に説明します。
以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...
公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...
序文場合によっては、次の図のような浮動効果の要件が必要になります。 成し遂げる標準的な通常の状況では...
1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...
IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...
概要港とは何ですか?英語の単語の意味は「港」です。 Harborはコンテナ(貨物)を保管するために使...
目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...
効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...
目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...
1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...
Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...
Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...
必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...