TypeScriptマップと条件付きの型で正しく行われたコンポーネントの反応

当初公開deepu.tech .
あなたはおそらく、それをチェックアウトしない場合は、おそらくtypescriptについて聞いたことがあります.あなたはどのように偉大なタイプの安全性を主張誰かが聞いたことがあります.
タイプスクリプトは大きいです.彼のコードを追放するのが嫌いな誰かとして、私がそうしなければならないならば、私は間違いなくタイプスクリプトでそれをします.あまりにも多くのタイプスクリプトについて言われており、私は追加することができます何も新しいことは本当にありません.しかし、私はタイプセーフティはすべてのタイプ定義でどこでもあなたのコードを醜くすることではないと信じています.そこで、どのようにしてタイプセーフコードをどこでもタイプ宣言を捨てなければならないことなく書くことができますか?
型推論と派生型および動的型のような高度な機能が答えです.エディターとIDEを使用すると、すべての時間を視覚的にすべての時間を見なければならない私たちなしで優雅にタイプを推論したコードを処理するのに十分スマートです.(もちろん、推論された型の上でホバーするときには、通常、型を表示します.
TypeScriptはとても良いタイプの推論を持っています.親指の規則として、常に任意の変数の型を宣言せずに起動することができます.VSCodeのような現代のエディタで、すぐにこれを見ることができます.したがって、あなたのtsconfigを厳格モードに設定してください.コンパイラが文句を言うと、型を宣言し始めます.
さらに、Typescript 2.1と2.8はクールなルックアップタイプの束を導入しました.今、動的に交差型、ユニオンタイプ、インデックス型、マップ型と条件型のようなさまざまなテクニックを使用してタイプを推論することができます.

インデックスタイプ

インデックスの種類を使用すると、インターフェイスの種類や種類をチェックすることができますkeyof T (インデックス型クエリ演算子)T[K] (インデックス付きのアクセス演算子).例えば以下のインターフェイスを取りましょう.

interface Person {
    name: string;
    age: number;
    address: string;
    sayHi: (msg: string) => string;
}

The keyof T 演算子は、型のすべてのキー名のunion型を取得しますT だからkeyof Person 私たちを与える'name' | 'age' | 'address' | sayHi' 結果として.
The T[K] 演算子は、指定したキーの型を取得します.Person['name'] はstring and Person[*keyof* Person] はstring | number | ((msg: string) => string) .

マップ型

マップされた型が何であるかを見てみましょう.私たちは人のためのインターフェイスを以下のように言いましょう.

interface Person {
    name: string;
    age: number;
    address: string;
    sayHi: (msg: string) => string;
}

今、すべてのプロジェクトでは、ほとんど常に一定のインターフェイスのバリエーションを持っている共通の要件です.例えば、以下のような人の読み取り専用版が必要だとしましょう.

interface ReadonlyPerson {
    readonly name: string;
    readonly age: number;
    readonly address: string;
    readonly sayHi: (msg: string) => string;
}

この場合、我々は人インタフェースを複製しなければなりません、そして、我々は手動で彼らを同期させなければなりません.これはマップされた型が便利になるところです.Readonly , これは.

type ReadonlyPerson = Readonly<Person>;

あなたが上で震えるならばReadonlyPerson 次のように推測するタイプを見ることができます.
VSCodeでのタイプビューの推論
それはクールですね.現在、我々は既存のタイプからタイプをつくることができて、同期で彼らを保つことについて心配する必要はありません.どうやって動くのReadonly<Person> どうする?マップされた型を見てみましょう.

type Readonly<T> = {
    readonly [K in keyof T]: T[K];
};

The in TypeScriptからの演算子はここでトリックを行います.既存の型のすべての宣言を新しい型にマップします.The keyof 演算子は、マッピングのためのキーからキーを提供します.独自のマップ型を構築しましょう.
すべての分野が同様に許容可能である読み取り専用の人インターフェースが必要であると言いましょう.以下のようにマップされた型を構築できます.

type ReadonlyNullablePerson = {
    readonly [P in keyof Person]: Person[P] | null;
};

そして以下のように推論される

のは、任意のインターフェイスを使用することができます一般的にしましょう.

type ReadonlyNullable<T> = {
    readonly [K in keyof T]: T[K] | null;
};

type ReadonlyNullablePerson = ReadonlyNullable<Person>;

タイプスクリプトにはReadonly<T> , Partial<T> , Pick<T, K extends keyof T> and Record<K extends string, T> 組み込みの型として.ピックとレコードを使用することができます以下のように、それらを生成するタイプを参照してくださいエディタでそれらをチェックします.

type PersonMinimal = Pick<Person, "name" | "age">;

type RecordedPerson = Record<"name" | "address", string>;

他のすべての場合には、独自のマップ型を構築できます.

条件タイプ

A conditional type selects one of two possible types based on a condition expressed as a type relationship test.

例を見てみましょう.

type Foo<T, U> = T extends U ? string : boolean;

interface Me {}
interface You extends Person {}

type FooBool = Foo<Me, Person>; // will result in boolean
type FooString = Foo<You, Person>; // will result in string

動的に推論される型Foo<T, U> はstring or boolean 最初のジェネリックが拡張されるものによって異なります.
どのように我々は、非機能プロパティだけを含む人から新しい型を推論するためにマップされた型で条件型を混在させることができるかを見てみましょう.

type NonFunctionPropNames<T> = {
    [K in keyof T]: T[K] extends Function ? never : K;
}[keyof T];

type NonFunctionProps<T> = Pick<T, NonFunctionPropNames<T>>;

type PersonProps = NonFunctionProps<Person>;

/* Produces the below type
    type PersonProps = {
        name: string;
        age: number;
        address: string;
    }
    */

最初にインターフェイスからすべての非機能プロパティ名を取得します.次に、選択したマップ型を使用して、インターフェイスから新しいインターフェイスを作成します.
typemcriptには、以下の組み込みの条件型があります.

Exclude<T, U> – から除外するT 割り当てられる型U .

Extract<T, U> – 抜粋T 割り当てられる型U .

NonNullable<T> – 除外するnull and undefined からT .

ReturnType<T> – 関数型の戻り値の型を取得します.

InstanceType<T> – コンストラクタ関数型のインスタンス型を取得します.

使いましょう

これらの先進的なタイプは、それらを一緒に組み合わせるときにさらに強力になります.の反応のいくつかの実用的な使用を見てみましょう.

ES 6における反応成分とRedux還元剤

ES 6で書かれた還元剤で単純な反応成分を見ましょう.インデックスを見てください.以下のコードサンドボックスのJSX :
ご覧のように、プロップタイプライブラリを使用してコンポーネントの小道具を定義します.それは開発中にかなりのオーバーヘッドが含まれているので、最も効率的な方法ではありません.とにかく完全なタイプの安全性を提供しません.

対応するコンポーネントとreduxリダクタのタイプスクリプト

さて、この簡単な例をタイプセーフに変換してタイプセーフにしましょう.インデックスを見てください.以下のコードサンドボックスのTSX :
ご覧の通り、コードはより安全です.また、Prototypeライブラリとすべての型推論なしでは、さらに詳細になります.

先進的なタイプのTypeScriptでコンポーネントとreduxリダラーを反応させる

それでは、この例をより冗長でより安全な形式にするために学んだ高度な型を適用しましょう.インデックスを見てください.以下のコードサンドボックスのTSX :
ご覧の通り、我々はReadonly and ReturnType コンポーネントのより安全であるが、より詳細なバージョンを書くために他のいくつかのタイプ推論技術とともにマッピングすること.

結論

あなたがTypesScriptと反応しているならば、これらはあなたが適用しなければならないテクニックのいくらかです.あなたが反応のためにタイプ・システムを考慮しているならば、さらに、typescriptを見ないでください.それは素晴らしい機能、素晴らしいツール、優れたIDE/エディタのサポートと素晴らしいコミュニティがあります.
私はDevocx 2018のためのタイプスクリプトで話をしました、そして、あなたがここで好きであるならば、あなたはビデオとスライドを見ることができます.
< div >
< hr/>
私の本をチェックアウトしてくださいAmazon and Packt あなたがtypescriptと反応を含むものすごいスタックで完全なスタック開発について学ぶのが好きであるならばp >
あなたがJipsterが好きであるならばGithub .

閉じるこの動画はお気に入りから削除されています.p >
あなたは私についていくことができます.p >
オリジナルで公開Medium 2018年11月19日