Typescriptいくつかの愛憎コンテンツ—タイプガード、ナローイング

著者：神Qスーパーマン
翻訳者：フロントエンドXiaozhi
出典：中

夢や乾物があれば、 WeChatで[Great Move to the World]を検索して、朝の早い時間にまだ皿洗いをしているこのShawanzhiに注目してください。

この記事GitHubhttps ://github.com/qq449245884/xiaozhiが含まれています。完全なテストサイト、資料、および一次メーカーへのインタビュー用の一連の記事があります。

JavaScript自体は弱い言語であるため、開発中の変数のタイプがわからないために苦しむことがよくあります。変数に名前を付けて変数の位置を少し明確にしても、それでもわかりにくいです。この変数がの場合object、何が含まれているのかを知るのが難しくkeyなるため、人々は徐々にTypeScriptをメインの開発ツールとして使用し始めます。

TypeScriptを使用して開発しているときに、TypeScriptが特に煩わしいと感じるかどうかはわかりませんが、これらの型チェックアクションが、発生する可能性のある多くの潜在的なエラーを減らすのに役立つことを知っておくとよいでしょう。開発中にこの種の問題が発生した場合、この問題が発生します。

シーン1

この種の問題が発生したかどうかはわかりません。今日は、この変数がの特定の値とenum一致のですが、TypeScriptは次のように間違ってスプレーしました。

ここに画像の説明を挿入

実際、上記の赤い文字を解決する方法はたくさんあります。1つは@ts-ignore、エラーを解消するために使用する方法です。もちろん、この方法は非常に悪い方法です。TypeScriptに次の行をチェックしないように指示するのと同じです。

ここに画像の説明を挿入

現時点では、別の方法を考えるかもしれません。上記のエラーメッセージは、maleこれによって受信さassignれていないことであるため、次のように強制的にこれます。GENDERtypetype

ここに画像の説明を挿入

しかし、このように書くのはまだ良くありません。つまり、変数の変更を強制しているため、変数の柔軟性が失われます。次に、より便利な方法を紹介し、読み続けましょう。

タイプガード

最初に紹介するのはTypeGuardです。TypeGuardは、その名前が示すように、タイプガードです。ちょうど今、TypeScriptはタイプが異なるためエラーを報告します。タイプガードを作成する限り、TypeScriptにこれを知らせてください。変数は間違いなく私の1つとenum一致valueし、この時点では赤い文字は表示されません。通常、TypeGuardは次functionのようます。

const assertsIsGender = (gender: any) : gender is GENDER => {
    
    
  return Object.values(GENDER).includes(gender)
}

現時点では、genderこの変数がstringタイプごとに変更されていることがわかります。そのGENDERため、退屈してincludes別の判断を下しても、 TypeScriptはエラーを報告しません。

ここでgenderはstring、値を割り当てる前に変数を型に割り当てます。このアクションは非常に重要です。最初に変数の型を割り当てず、次に値を割り当てると、変数をスムーズにtype変更。

ここに画像の説明を挿入

シーン2

APIで返されたデータに遭遇したかどうかはわかりません。データenumのします。

ここに画像の説明を挿入

上記のタイプガードの概念では、現時点での読者は、このエラーメッセージfunctionにます。

ここに画像の説明を挿入

エラーメッセージが消えたのは事実ですが、それがタイプになったことは非常にgender奇妙neverあり、これはタイプガードが行うタイプ保護メカニズムです：ナローイング。

タイプナローイング

ナローイングを土語に変換すると、タイプナローイングになります。TypeScriptの世界では、それぞれenumが基本的に独立しており、相互に交差することはありません。関係図は次のとおりです。

ここに画像の説明を挿入

したがって、2つの列挙型間で型変換を実行するには、存在しない可能性のある型を簡単に生成できます。存在しない可能性のある型の場合、TypeScriptはこの型をとして定義します。このneverとき、TypeGuardの手法を使用するとTypeScriptは、タイプをnever type自動的にenum別絞り込みます。

もちろん、あなたが賢いなら、あなたはこのように考えるかもしれません：それなら私は別のものをfunction return定義するenum、それで私は私のタイプガードの結果が次のように私が望む列挙型にタイプ変換されることを保証できます：

ここに画像の説明を挿入

このように書くことに問題はないようで、私たちが望む結果は型絞りから型変換に変わりましたが、これは実際には型ガードの精神と少し矛盾しています。結局のところ、型ガードは型の代わりに型チェックを行います変換します。型変換をfunction行う再利用性も高くないため、次に、より優れた型変換方法を紹介します。

マッパー列挙型

まず、型変換を再利用する方法を考えることができます。つまりfunction、型への変換A型を作成するという考え方を単純化することもできます。このとき、 TypeScriptでジェネリックジェネリック型を使用する必要があります。このような：B

const createEnumMapper = <T>(mapping: T) => (value: keyof T | null) : T[keyof T] | undefined => {
    
    
  return value === null ? undefined : mapping[value]
}

createEnumMapperこれの関数は1つcurrying functionであり、渡される最初の変数は列挙型自体です。この時点で、TypeScriptのジェネリックスはmyTがenumそれ自体に関連していることを認識します。

これで2つGenericsを正しくペアリングするには、最初に次のように2つenum mappingのペアリングobjectを。enumkey value


const mapper = {
  [BE_GENDER.MALE]: FE_GENDER.MALE,
  [BE_GENDER.FEMALE]: FE_GENDER.FEMALE
}

上記mapperは列挙型valueをとして扱うため、次のようkeyに、を取り込む限りdata、ます。

[外部リンク画像の転送に失敗しました。ソースサイトにヒル防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-uaof0Gel-1645574343364）（/ img / bVcXRjL）]

BE_GENDERこの時点で、 typeの値をtypeの値に正常に変換できたことがわかりますFE_GENDER。また、TypeGuardの概念を使用する必要はありません。

ここに画像の説明を挿入

要約する

今日は、TypeScriptで型をチェックするために使用する方法を紹介しました。将来、読者が同様の問題に遭遇した場合、直接使用する代わりに、Type Guardを使用してさらにチェックすることができます。@ts-ignoreまたはas、これら2つの方法は、型チェックの導入に加えて、はじめに型変換の方法については、今後も問題なく利用できるようになることを願っています。

Shawanzhiです。新年は一緒にブラッシングしましょう。

コードのデプロイ後に存在する可能性のあるバグをリアルタイムで知ることはできません。これらのバグを後で解決するために、ログのデバッグに多くの時間が費やされます。ちなみに、便利なバグ監視ツールであるFundebugをお勧めします。