Typescript での infer キーワードの使用に関する詳細な理解

Typescript での infer キーワードの使用に関する詳細な理解

後で忘れないように、キーワード 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React+TypeScriptプロジェクト構築事例解説
  • TypeScript 関数の定義と使用例のチュートリアル
  • 1つの記事でTypeScriptのデータ型について学ぶ
  • Typescript の as、疑問符、感嘆符の詳細な説明
  • webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます
  • TypeScript の Enum が問題となる理由
  • TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル
  • TypeScript インターフェース定義ケースチュートリアル

<<:  Alibaba Cloud Server に Tomcat をインストールして設定し、外部ネットワーク アクセス ポートを追加するチュートリアル

>>:  3つの主要データベース(Mysql、SqlServer、Oracle)の違いについて簡単に説明します。

推薦する

VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明

1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

MySQL に接続する際に Navicat for MySQL が 2005 エラーを報告する問題を解決する

前回の記事では、Navicat for Mysql 接続エラー 1251 (接続失敗) の問題を解決...

MySQL データ型 DECIMAL の使用方法の詳細な説明

MySQL DECIMALデータ型は、データベースに正確な数値を保存するために使用されます。会計シス...

Baidu百科事典UIの開発動向について議論する

<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

mysql8でルートユーザーのパスワードをリセットする手順を完了します

序文最近、多くの新しい同僚がこの質問をしてきました。特に、homebrew を通じて自動的にインスト...

HTML+CSS をベースにした素敵なフリップログインおよび登録インターフェースを作成します

素敵なフリップログインと登録インターフェースを作成する序文最近、ネットワーク ディスクを構築しようと...

HTML の順序なしリストタグと順序付きリストタグの使用例

1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...

Docker ケース分析: Redis サービスの構築

目次1 マウントディレクトリとファイルを作成する2 Redisイメージを取得する3 コンテナを作成し...

CocosCreator Typescriptでテトリスゲームを作る

目次1. はじめに2. 解決すべきいくつかの重要な問題3.最後に書く1. はじめに最近、Cocos ...