JavaScript DEVSのための基本的なタイプスクリプト洞察

私は仕事を始めたので、今まで数ヶ月間、私は習字を学びました.私のフロントエンド、バックエンド、およびインフラストラクチャコードは、typescriptで書かれており、私は非常にモノレポとの私のアプリケーションのこれらの部分の間のインターフェイスを共有お楽しみください.
TypesScriptはJavaScriptに優れた追加ですが、いくつかのことは私の頭に入るためにいくつかの時間がかかった、そのうちの1つは、ユニオン型である.
これは静的なタイピングに使われている人々にとって明白なようですが、私にとっては、最初は明らかではありませんでした

型注釈
TypesScriptの基本的な特徴の一つはJavaScriptタイプに基づいているが、JavaScriptのために後で目に見えないタイプであなたの変数と機能に注釈を付けることです.
ツールESBuild は、すべてのTypeScript固有の構文を捨て、残りのJavaScriptをバンドルします.

const x: string = getText()

なる

const x = getText()

今、これはすべての良いと良いですが、それはJavaScriptで直接的な同等を持っていないすべての型と混乱します.

The any 種類
The any タイプクラシックですこれは、両方の目を閉じるし、あなたが欲しいものを聞かせて入力します.あなたがJavaScriptを理解するならば、時々、1つの線を書くことはより簡単ですany TypeScriptで正しく入力される10行より.
多くの場合、開始するには良いany 型チェッカーをシャットダウンするには、JavaScriptを使用してコードをプログラムし、後で実際の型を散布します.
この例では、someKey 何も最初にチェックすることなくフィールド.あれはx is undefined またはobject または何でも;私は気にしないと私は気にしないタイプスクリプトを教えてください.

function f(x: any) {
  return x.someKey
}

それはJavaScriptでは同等ではありません.まあ、任意のタイプ、haha.
これは静的なタイピングで一般的に理解するために難しいことの一つに私たちをもたらします.後で、それはより明白です、しかし、私はそれがすでにそうであると思いますany .
タイプスクリプトには、実行時に複数のJavaScriptタイプにマップされるタイプがありますany , または、単体で明示的に.
それは私を悩まなかったany すべてのタイプの特定のケースであるが、後で、それはユニオンタイプで私を捨てました.

ユニオンタイプ
ユニオンタイプは、実行時に一度に複数の型ですany ; 違いは、ユニオン型はすべて定義済みの特定の型だけではありません.

type StringOrNumber = string | number

The StringOrNumber 型のみを使用することができますstring とnumber を使用できます.それ以外の場合は、手動でstring or number コンテキスト.
この例で選択した名前とタイプは、これを明白にしますが、これは実際のコードベースではよくありません.
型は任意の名前を持つことができ、組合は任意のタイプ、さらにジェネリックを含めることができます.
JavaScript開発者として、私はタイプが未知であるという事実に慣れていました、そして、私はそれをチェックしなければなりませんでしたany または何が起こっていたかを知っていて、おそらくいくつかの機能をラップしているクラスで作業していたのでしょう.
これは、フレームワークやライブラリによって供給されたユニオンを使用して私のために理解しやすい.確かに、ある日、私は彼らの定義を見て、彼らがどれくらい単純かによって困惑しました、しかし、私は最初に混乱しました.
しかし、ユニオンタイプはどちらもありません.つのケースで複数の型を使用できるランタイムの前に、それらはあなたに教えます、しかし、ユニオンタイプ自体は全く実行時に存在しません.授業が無いStringOrNumber ; があるstring or number .
次に、この機能をモジュールとジェネリックのような別の構文で結合し、StringOrNumber , 物事はさらにJavaScriptのプリプの混乱を得る.

type Result<T> = T | Promise<T>

最初に、私は困惑していましたT はそうです、確かにResult 一般的ですが、なぜそれは話す名前を取得しませんか?Then Result これ以上話すことはないT のいずれか.しかし、あなたは何をするつもりですか?一般的な名前が必要です.
変数付きの変数Result<string> を含めることができますstring またはPromise<string> , 解決する約束string .
決してないResult ; 名前があっても実行時には存在しませんResult それのように見えるStringOrNumber ). それは価値や価値を約束するクラスのようなものではない.それは実行時になくなります.
これをJavaScriptで明示的にチェックしたいなら、あなたは何をしているかを知っていてT とは異なるPromise<T> または何らかの形でラップしますが、これはtypescriptでは必要ありません.それはあなたが書く前に考えるように強制するので、ランタイムコストを持つ抽象化を実装する必要はありません.
確かに、それを使用する前に何をチェックする必要がありますが、任意の新しいクラスの方法や何かを学ぶために学ぶ必要はありません.

結論
タイプ定義を見てください、不可解で、あまりに一般的であるか、あなたが過去に実装したかもしれないクラスのように聞こえる若干の名前によってだまされないでください.
そして、常に(少なくともほとんどの) typescriptがJavaScriptであり、実行時に全く離れてしまうことを心に留めておいてください.
実行時に存在しない型は、JavaScriptについて既に知っている以上のことを学ぶ必要はありません.