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)の違いについて簡単に説明します。

推薦する

MySQL はパスワード強度の検証をオフにします

パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...

Linux でハードディスクのサイズを確認し、ハードディスクをマウントする方法

Linux には、マウントされたハードディスクとマウントされていないハードディスクの 2 種類のハー...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

JavaScript ベースのシンプルなカルーセルの実装

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策

Alibaba Cloud ServerがFTPに接続できないFileZilla 425 データ接続...

Zen Coding 簡単で素早いHTMLの書き方

禅コーディングテキストエディタプラグインです。 Zen Coding を使用するテキスト エディター...

VUE+CanvasはシンプルなGobangゲームの全プロセスを実現します

序文レイアウトの点では、Gobang はランダムな動きを目的とするゲームよりも実装がはるかに簡単で、...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

Docker MySQLコンテナデータベースへの変更が有効にならない問題を解決する

公式の MySQL イメージを使用するには、構成ファイル、DB データ ファイル ディレクトリなどの...

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

HTMLページのネイティブVIDEOタグはダウンロードボタン機能を隠します

Web プロジェクトを作成しているときに、紹介ビデオが別にある紹介ページに遭遇しました。この短いビデ...

Vueはカルーセルのフレームレート再生を実装します

この記事の例では、カルーセルのフレームレート再生を実現するためのVueの具体的なコードを参考までに共...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

vue3 のさまざまな構文形式を比較したサンプルコード

デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...