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 5.7.30 のインストールとアップグレードの問題に関する詳細なチュートリアル

くさびコンピュータにインストールされている MySQL のバージョンが比較的古く、おそらくバージョン...

Vue はシェイク機能を実装します (ios13.3 以降と互換性があります)

最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...

クロスオリジン画像リソース権限(CORS 対応画像)

HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...

Tomcat ソースコード起動コンソールの中国語文字化けのデバッグプロセス記録

問題を見つける今日はTomcatのソースコードを勉強するつもりなので、公式サイトからTomcatのソ...

Dockerイメージストレージoverlayfsの使用

1. 概要Docker のイメージはレイヤーで設計されています。各レイヤーは「レイヤー」と呼ばれます...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

WindowsでMysql5.7.17のインストールと起動に失敗する問題を解決する

マシンに初めて MySQL をインストールします。オペレーティングシステムはwin7ですmysqlの...

nginxでイメージサーバーを構築する手順の詳しい説明(ルートとエイリアスの違い)

インストール手順は省略します( yum -y install nginx;を使用して直接インストール...

MySQL テーブルをコピーする 3 つの方法 (要約)

テーブル構造とそのデータをコピーする次のステートメントは、データを新しいテーブルにコピーします。注:...

Vue フィルターの実装と適用シナリオの詳細な説明

1. 簡単な紹介Vue.js を使用すると、一般的なテキストの書式設定に使用できる独自のフィルターを...

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。...

MySQL Index Pushdown (ICP) とは何かを理解するための記事

目次1. はじめに2. 原則III. 実践3.1 インデックスプッシュダウンを使用しない3.2 イン...

Mapper SQL ステートメント フィールドとエンティティ クラス属性名の関係は何ですか?

背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...

CentOS6で定期的にjarプログラムを実行するスクリプトをcrontabで実行する

1. 簡単なJavaプログラムを書く パブリッククラステストシェル{ パブリック静的voidメイン(...

Nexus を使用して jar パッケージをプライベート サーバーに追加する方法

なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...