🤷概念学習:3.Typescriptって何ですか?(1) ( basic type, Inference, assertion, guard)



TypeScriptとは?


What is TypeScript?
タイプスクリプトは、JavaScriptに静的タイプ定義(static type definitions)を追加して構築されたオープンソースプログラミング言語です.
(Microsoftによる開発と管理)
静的言語とは?

  • タイプスクリプトコードはjavascriptコンパイラまたはラベルからjavascriptに変換されます.これはtranspileとも呼ばれます.(変換ファイル:ある特定の言語で作成されたソースコードを別のソースコードに変換)

  • タイプスクリプトは、JavaScriptが実行する任意の場所で実行されます.(In a browser, on Node.JS or in your apps.)

  • タイプスクリプトはJavaScriptの親セットであり、ECMAの最新基準を十分にサポートしています.ES 7以下の基準を含むタイプの特徴があります.タイプスクリプトはES 5を含む集合であるため、既存のES 5 JavaScript構文を使用することができる.また、ES 6の新機能を利用するためには、Babelなどの独立した変換器を使用することなく、既存のJavaScriptエンジンでES 6の新機能を使用することができます.
  • Type Scriptのメリット


    静的タイプ言語(static type language)なので、コンパイルに少し時間がかかっても安定性が保証されます.JavaScriptはダイナミックタイプ言語(Dynamic Type Language)であるため、ランタイム速度は速いが、タイプ安定性は保証されない.タイプスクリプトは、JavaScriptのこれらの欠点を補うために作成されます.そこで、MSはタイプスクリプトに「拡張JavaScript thispect(拡張JavaScript)」というスローガンを作成した.

    Basic Type


    Basic typejavascriptでよく使われる簡単な単位データがあります.
    Boolean(boolean), Number(number), String(string), Array(number[], Array)
    👉 ほとんどのプログラミング言語で使われているので、pass!
  • Tuple:固定数とタイプを持つ配列を表すことができる.
  • // Declare a tuple type
    let x: [string, number];
    // Initialize it
    x = ["hello", 10]; // OK
    // Initialize it incorrectly
    x = [10, "hello"]; // Error
  • Enum:関連する定数セットにおなじみの名前(列挙タイプ)を付ける
  • enum Color {
      Red,
      Green,
      Blue,
    }
    let c: Color = Color.Green;
  • Unknown:知らないタイプ(知らないならtypeofでチェックすべき)
  • if (typeof maybe === "string"){}
  • Any:どのタイプでもOK
  • const temp:any = 4
    temp.toString()
    anyに数値を割り当て、文字列関数を任意に呼び出す場合、タイプスクリプトは取得されませんので、注意して使用してください.

  • Void:任意のタイプとは逆に、任意のタイプがない場合、voidオーバーヘッド(主に関数戻りタイプ)

  • NullやUndefindタイプもありますが、あまり役に立ちません

  • Never:エラーまたは無限ループを返し、まったく返さない場合の関数の戻りタイプ.

  • オブジェクト:number、string、boolean、bigint、symbol、null、undefinedではありません.→普通はいらない
  • タイプ差異(タイプ推定)


    タイプスクリプトは、変数を初期化したり、パラメータを渡したり、関数を返したりするときに、明確なタイプが指定されていない場合は、タイプを推定します.
    let x = 3;
    //  ^ = let x: number
    
    let x = [0, 1, null];
    //  ^ = let x: (number | null)[]

    Type assertion


    私が知っているタイプが変数の現在のタイプよりも明確である場合、type assertionを行います.(assertの主張)
    Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” △もしもし、これはどんなタイプか知っています.私を信じてください.
    as-syntaxとangle-括弧として使用できます
    // '나 이거 확실히 문자열인거 알아'하면서 as 로 string이라고 타입 지정하여 length를 사용
    let someValue: unknown = "this is a string";
    // as-syntax
    let strLength: number = (someValue as string).length;
    // angle-bracket
    let strLength: number = (<string>someValue).length;
    JSXと併用する場合は、as-style断言のみを使用します.
    (番号、String、Boolean、SymbolまたはObjectなどの他のタイプはnumber、string、booleanなどとして割り当てることができるようですが、割り当てタイプには使用されません)

    Type guard


    チェックタイプを作成する方法で、タイプを明確にチェックします!
    Type guardを使用すると、条件文でオブジェクトのタイプを縮小できます.
    このリンク家が整然としているので、これを読めばいい.
    (第4条によれば、タイプ断言に比べてtypeguardによる明示的な検証によりメンテナンスコストがさらに削減される!)

    type guard用jsオペレータ

  • typeof使用法:typeof operand
    オペランドタイプをstring(ex)タイプの「blabla」=「string」→true)に戻します.
  • instanceof使用法:object instanceof constructor
    objectがコンストラクション関数のインスタンスである場合、trueを返します.
  • in使用法:prop in object
    propはオブジェクトの属性面trueを返す
  • 参考資料


    今年捨てるべき10の悪い習慣
    Type Script#1タイプのスクリプトとは?