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

推薦する

CentOS の MySQL に MariaDB をインストールするときに発生する方法と問題

以前にインストールしたmariadbを削除する1. rpm -qa | grep mariadb を...

mysql 5.7.11 winx64 初期パスワード変更

公式サイトからMySQL-5.7.11-winx64の圧縮版をダウンロード。インストール後、パスワー...

CSS により、子コンテナが親要素を超えます (子コンテナは親コンテナ内で浮動します)

序文場合によっては、次の図のような浮動効果の要件が必要になります。 成し遂げる標準的な通常の状況では...

スタイルをより標準化するための CSS の書き方に関する 5 つのヒント

1. CSSをアルファベット順に並べるアルファベット順ではありません:コードをコピーコードは次のとお...

nginxを使用して取得したIPアドレスが127.0.0.1である問題を解決する

IPツールを取得 lombok.extern.slf4j.Slf4j をインポートします。 org....

Avue でカスタム検索バーを実装し、検索イベントをクリアする実践

目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...

Vue.js ソースコード解析のカスタム手順の詳細な説明

序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...

docker compose を使用してハーバープライベートウェアハウスをインストールする詳細なチュートリアル

概要港とは何ですか?英語の単語の意味は「港」です。 Harborはコンテナ(貨物)を保管するために使...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

Vue 2つのフィールドの共同検証によりパスワード変更機能を実現

目次1. はじめに2. ソリューションの実装2.1 実装コード2.2 コードの説明2.3 検証結果1...

セマンティック HTML 構造の利点は何ですか?

1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...

Nginx を使用して IP アドレスが悪意を持って解決されるのを防ぐ方法

Nginxを使用する目的Alibaba Cloud ECS クラウド サーバーを使用して、まずは著者...

dockerネットワーク双方向接続の詳細な説明

Dockerネットワークを見るdocker ネットワーク ls [root@master ~]# d...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...