新しいタイプのスクリプトについての学習

7369 ワード

growth typescript beginners learning テキストリンク

Typescriptの言語入門

あなたがコードを書く世界にあなたの旅を始めるとき、あなたが学ぶ言語のニュアンスはあなたが遭遇する最も難しいもののうちの1つであるでしょう.私の頭を変数型の概念の周りに包み、JavaScriptの他のどのように相互に作用したかの違いを思い出しながら、最初は大きなチャレンジでした.時間が経つにつれてルールが明確になり、JavaScriptコードのより堅牢なブロックを書くことでより快適に感じ始めました.私は後に経験しました、主にエラー処理を通して、JavaScriptがあなたが書くことができることで非常に寛大であり、エラーを投げることなく不適当な表現を構築するのを許すでしょう.率直に言って、私はライン2または200までさらに動くことができる前に、何かが1行目に正しく設定されないと警告するのを好みます.私はデバッグの時間を介して苦しんでいる、特定のベストプラクティスを巻き込む、私は潜在的なエラーをキャッチすることができる前に発生します.新しい言語を開発している開発者としての進化を続けると、JavaScriptが許すエラーのいくつかから保護するためにTypesScriptに向けられました.このブログは、そのルーツから始まっているよりよく理解しているタイプスクリプトへの私のダイビングです.

どのようなスクリプトですか？

TypesScript(TS)は、オープンソースであり、JavaScript(JS)の構文上のスーパーセットであることを意図したマイクロソフトによって維持される静的スクリプト言語です.これは、TSドキュメントから転載された非常に技術的な定義ですが、それはまだ私のような初心者のためのさらなる解体を必要とするものは何のための明確な理解を得るために、どのようにJSとは異なる.静的スクリプティングは、開発者が書いたコードを確実にするために言語が強制するような、規則をチェックする形式や規則の集合を指します.静的型付け言語は、コンパイル時に型制約を強制するものであり、開発者がそれらのコードで利用される前に使用する言語の構成要素(変数、式、関数など)のデータ型を定義するよう要求します.静的スクリプティングは、コードが実行される前に、コンピュータによって実行される前に書き込まれるようにデバッグすることができます.コードが実行される前にバグを捕まえることは、あなたが書くプログラムのより良い適切な機能を確実にします.tsが原始データ型とどのように相互作用するかを調べましょう.

例1


var name: string = "James Thomas";

// explicit data typing

上記は静的スクリプト言語の例です.コード内で割り当てられる前に、変数のデータ型を明示的に定義します.TSは、より厳密に型付けされた指定のため、余分なオプション機能を持っています.「強く型付けられた」という語は単にこの言語で宣言された変数が特定のデータ型に束縛されるという事実に言及します.変数はデータ型の値に代入されなければなりません.データ型の値は、明示的に定義されています.このオプションの機能は、まだコンパイラによって静的なタイピングエラープロトコルのセキュリティを提供している間、書かれた変数のダイナミックなタイピングを考慮に入れます.「推論されたタイピング」は、事前の明示的な定義なしで変数データ型を決定する言語の能力です.

例2


var name = "James Thomas";

// inferred data typing

上記の変数定義はバニラJSのように見えますが、変数はコードの後で使用されて、言語のタイピング規則に従わないとき、起こります.変数が構文的に不適切な方法で使用されている場合、コンパイラは最初のコード例で明示的に定義されているかのようにエラーをスローします.

例3


var number = 36;

number = "James Thomas";

// Error: Type 'string' is not assignable to type 'number'. (2322)

そこで、いくつかの原始データ型でTSがどのように動作するかを見てきましたが、静的な入力パラメータを複雑なデータ型に適用する方法を探る必要があります.

タイプスクリプトは複雑なデータ型とどのように相互作用するか？

複雑なデータが原始的な値を含むことができるので、TSによって使用される静的型付け規則は少し異なった方法で複雑なデータ型と対話しなければなりません.複雑なデータとのこの静的なタイピング相互作用を容易にするために、TSは「インターフェース」と呼ばれているものを含みます.インターフェイスは、後で定義され、コードで使用される複雑なデータ型のすべての要素の定義の青写真または契約と見なされます.これらのTSインターフェイスはES 6クラスコンストラクタと同じように動作します.ここで新たにインスタンス化されたクラスインスタンスは常に親コンストラクタで定義されたプロパティとメソッドを含みます.
side note =＞tsはクラスを含んでいますが、インターフェイスは私にとって言語の新しい側面ですので、私は理解を深めるためにここで強調します.
インターフェイスとクラスの主な違いは、インターフェイスが含まれている要素の宣言を含むだけでなく、作成された各新しいエンティティが継承する値やメソッドの機能ではないことです.「実体」がインターフェースを参照している間、「インスタンス」を明確にすることはクラスを意味します.つまり、インターフェイスを使用すると、開発者は後でインターフェイスによって概説された複雑なデータ型の要素を定義する必要があります.

例4

interface Student {
    firstName: string,
    lastName: string,
    className: string,
    answerRoll: ()=>string
}

// this interface defines the types of all Student objects to come

上のコード例を見て、学生オブジェクトが含まなければならないすべての要素を定義する学生インターフェイスとして、私たちのTSインターフェースを見ます.このインターフェイスは、我々のコードで使用するための学生オブジェクトを作成するときに続く私たちの青写真です.インターフェイスとクラスの別の重要な違いは、インターフェイスエンティティが新しいキーワードでインスタンス化されていないことです.構文は、オブジェクトとそのすべての要素をまだ定義しなければならない点で異なります.

例5

 var senior: Student = {
    firstName: “James”,
    lastName: “Thomas”,
    className: “McLaren”,
    answerRoll: ()=>string => {return “Here, ready to code!”}
}

// new Student object

インターフェイスを介して新しいエンティティを作成するこの方法は、単に“new”キーワードとクラスコンストラクター関数を使用するのと比較して少し面倒なようですが、ペイオフはコンパイル時になります.TSがJSにコンパイルされているので、コンパイラがインターフェイスを読み込むと無視されます.コンパイル時の結果をコンパイルするコードが少なくなり、コードの実行時に影響を与えません.それは私の本では大きな給料です.