TypeScriptとは何ですか?強く型付けされたJavaScript

TypeScriptとは何ですか?TypeScriptが定義されています

TypeScriptは、一般的なJavaScriptプログラミング言語のバリエーションであり、エンタープライズ開発に重要ないくつかの重要な機能を追加します。特に、TypeScriptは強く型付けされています。つまり、変数やその他のデータ構造は、プログラマーによって文字列やブール値などの特定の型であると宣言でき、TypeScriptはそれらの値の有効性をチェックします。これは、緩く型付けされているJavaScriptでは不可能です。

TypeScriptの強い型付けにより、特に大規模なエンタープライズ規模のコードベースを扱う場合に、開発者をより効率的にするのに役立つ多くの機能が可能になります。TypeScriptは、JavaScriptのように解釈されるのではなく、コンパイルされます。つまり、実行前にエラーをキャッチできます。バックグラウンドのインクリメンタルコンパイルを実行するIDEは、コーディングプロセス中にこのようなエラーを見つけることができます。

JavaScriptとのこの重要な違いにもかかわらず、TypeScriptはJavaScriptを実行できる場所であればどこでも実行できます。これは、TypeScriptがバイナリ実行可能ファイルではなく、標準のJavaScriptにコンパイルされるためです。詳細については、詳しく見ていきましょう。

TypeScriptとJavaScript 

TypeScriptはJavaScriptのスーパーセットです。正しいJavaScriptコードは正しいTypeScriptコードでもありますが、TypeScriptにはJavaScriptの一部ではない言語機能もあります。 TypeScriptに固有の最も顕著な機能(TypeScriptに名前を付けた機能)は、前述のように、強い型付けです。TypeScript変数は、文字列、数値、ブール値などの型に関連付けられ、コンパイラにデータの種類を通知します。それは保持することができます。さらに、TypeScriptは型推論をサポートし、キャッチオール任意の型を含みます。つまり、変数にプログラマーが明示的に型を割り当てる必要はありません。これについてはすぐに詳しく説明します。 

TypeScriptは、オブジェクト指向プログラミング(JavaScript)用にも設計されています。 JavaScriptでは直感的ではない継承やアクセス制御などの概念は、TypeScriptで簡単に実装できます。さらに、TypeScriptを使用すると、JavaScriptの世界ではほとんど意味のない概念であるインターフェイスを実装できます。

とは言うものの、JavaScriptでもコーディングできないTypeScriptでコーディングできる機能はありません。これは、TypeScriptが従来の意味でコンパイルされていないためです。たとえば、C ++は、指定されたハードウェアで実行できるバイナリ実行可能ファイルにコンパイルされます。代わりに、TypeScriptコンパイラはTypeScriptコードを機能的に同等のJavaScriptにトランスコードします。 GitConnectedに関するSeanMaxwellのこの記事には、オブジェクト指向のTypeScriptコードスニペットとそれに相当するJavaScriptの優れた例がいくつかあります。結果として得られるJavaScriptは、WebブラウザーからNode.jsを備えたサーバーまで、JavaScriptコードを実行できる場所ならどこでも実行できます。

それで、TypeScriptが結局のところJavaScriptコードを生成するためのただの素晴らしい方法であるなら、なぜそれを気にするのでしょうか?その質問に答えるには、TypeScriptがどこから来たのか、そしてそれが何のために使われているのかを調べる必要があります。

TypeScriptは何に使用されますか?

TypeScriptは、Microsoft内で開発された後、2012年にオープンソースとしてリリースされました。(ソフトウェアの巨人はプロジェクトのスチュワード兼メイン開発者のままです。)当時からのこのZDNetの記事は、なぜそれが起こったのかについて興味深い見方を示しています。マイクロソフト製品をJavaScriptで維持します。」

当時、MicrosoftはBingMapsをGoogleMapsの競合製品としてスケールアップし、OfficeスイートのWebバージョンを提供しようとしていました。そして、JavaScriptがタスクの主要な開発言語でした。しかし、開発者は、本質的に、JavaScriptを使用してMicrosoftの主力製品の規模でアプリを作成することは困難であることに気づきました。そこで彼らは、JavaScript環境で実行するエンタープライズレベルのアプリケーションを簡単に構築できるようにTypeScriptを開発しました。これが、TypeScriptプロジェクトの公式サイトにある言語のキャッチフレーズである「スケーリングするJavaScript」の背後にある精神です。

TypeScriptがこの種の作業にバニラJavaScriptよりも優れているのはなぜですか?オブジェクト指向プログラミングのメリットについては永遠に議論することができますが、実際には、大企業のプロジェクトに取り組む多くのソフトウェア開発者はそれに慣れており、プロジェクトのサイズが膨らむにつれてコードの再利用に役立ちます。また、ツールが開発者の生産性を高めることができる範囲を無視してはなりません。前述のように、ほとんどのエンタープライズIDEはバックグラウンドのインクリメンタルコンパイルをサポートしており、作業中にエラーを見つけることができます。 (コードが構文的に正しい限り、それでもトランスパイルされますが、結果のJavaScriptは正しく機能しない可能性があります。エラーチェックはスペルチェックと同等であると考えてください。)これらのIDEは、コードを深く理解するときにコードをリファクタリングするのにも役立ちます。事業。

つまり、TypeScriptは、Javaなどの言語のエンタープライズ機能とツールが必要であるが、JavaScript環境で実行するコードが必要な場合に使用されます。理論的には、TypeScriptコンパイラが自分で生成する標準のJavaScriptを作成することもできますが、時間がかかり、大規模なチームが集合的に理解してデバッグするのはコードベースが難しくなります。

ああ、TypeScriptにはもう1つの巧妙なトリックがあります。特定のJavaScriptランタイム環境、ブラウザー、さらには言語バージョンをターゲットにするようにコンパイラーを設定できます。整形式のJavaScriptコードもTypeScriptコードであるため、たとえば、ECMAScript 2015仕様に記述されたコードを取得し、そのコードを、のレガシーバージョンに準拠するJavaScriptコードにコンパイルすることができます。言語。

TypeScriptをインストールする

TypeScriptで遊び始める準備はできましたか?言語のインストールは簡単です。開発マシンですでにNode.jsを使用している場合は、Node.jsパッケージマネージャーであるNPMを使用してインストールできます。5分の公式TypeScriptチュートリアルでは、プロセスを順を追って説明します。

TypeScriptは、選択したIDEへのプラグインとしてインストールすることもできます。これにより、上記で説明したツールの利点が得られ、TypeScriptをJavaScriptにコンパイルするプロセスも処理されます。TypeScriptはMicrosoftによって開発されたため、VisualStudioおよびVisualStudioCodeで利用できる高品質のプラグインがあるのは当然のことです。しかし、オープンソースプロジェクトとして、TypeScriptは、EclipseのようなオープンソースIDEからVimのような由緒あるテキストエディタに至るまで、あらゆる場所で採用されてきました。また、プロジェクト全体をGitHubから参照してダウンロードできます。

TypeScript構文

TypeScriptがインストールされると、探索を開始する準備が整います。つまり、TypeScript構文の基本を理解する必要があります。JavaScriptはTypeScriptの基盤であるため、始める前にJavaScriptに精通している必要があります。間違いなく、あなたの主な関心事は、言語をユニークにするTypeScript固有の機能でしょう。ここでハイポイントに触れます。

TypeScriptタイプ

明らかに、TypeScriptの最も重要な構文機能は型システムです。この言語は、いくつかの基本的なタイプをサポートしています。

  • ブール値:単純なtrue / false値。
  • 数値:TypeScriptでは、JavaScriptと同様に、すべての数値は浮動小数点値であり、個別の整数はありません。TypeScriptは、10進数、16進数、2進数、および8進数のリテラルをサポートします。
  • 文字列:テキストデータの文字列。データを設定するときに、一重引用符または二重引用符を使用して文字列を囲むことができます。バッククォート(`)を使用して文字列を複数の行で囲むこともできます${ expr }。また、構文が。の文字列に式を埋め込むこともできます。
  • 配列とタプル:これらのタイプを使用すると、指定した順序で複数の値を格納できます。配列では、個々の値はすべて同じデータ型ですが、タプルでは、​​それらは異種である可能性があります。TypeScriptforEach()メソッドは、配列内の各要素で関数を呼び出すために使用されます。
  • 列挙型:C#の同じ名前の型と同様に、TypeScript列挙型を使用すると、人間が読める形式の名前を一連の数値に割り当てることができます。
  • Any:これは変数のタイプであり、最終的にどの値になるかを事前に知る必要はありません。たとえば、ユーザー入力やサードパーティライブラリから値を取得する場合があります。
  • オブジェクト:これは、プリミティブ型ではないものを表す型です。TypeScriptのオブジェクト指向の性質にとって不可欠です。

型を変数に明示的に割り当てるには、2つの異なる方法があります。1つ目は山かっこ構文です。

someValue:any;

strLength:number =(someValue).length;

そして2番目はas構文です:

someValue:any = "これは文字列です";

strLength:number =(someValue as string).length;

TypeScriptドキュメントから取得したこれらのコードスニペットは、機能的に同等です。どちらもsomeValue型の変数として定義し、その値としてany割り当て"this is a string"、次に数値strLengthとして定義し、その値としての内容の長さを割り当てsomeValueます。

TypeScriptタイプは、推論によって設定することもできます。つまり、xの型を確立せずにxの値を7に設定すると、コンパイラーはxを数値と見なします。状況によっては、コンパイラーがany型を推測する場合がありますが、コンパイルフラグを使用して、型を推測しないようにすることができます。

TypeScript型システムは非常に豊富で、この記事の範囲を超えています。高度なユーティリティタイプがいくつかあります。これらには、変数がいくつかの指定された型の1つになることを確立できる共用体型と、既存の型に基づいて作成できる型であるマップ型が含まれます。この型では、既存の型の各プロパティを同じものに変換します。仕方。たとえば、数値またはブール値になりたいが、文字列などにはしたくない変数の共用体型を作成できます。または、配列内のすべての要素を読み取り専用に設定するマップ型を作成することもできます。

TypeScriptインターフェース

ほとんどのオブジェクト指向言語と同様に、TypeScriptには、ユーザーが独自の型を定義できるインターフェイスがあります。インターフェイスは、オブジェクトが持つプロパティと、それらのプロパティに関連付けられたタイプを確立します。TypeScriptインターフェイスはオプションのプロパティを持つことができます。構文の詳細については、TypeScriptのドキュメントを確認してください。  

TypeScriptジェネリック

TypeScriptは、ジェネリックスの概念をJavaやC#などのオブジェクト指向言語とも共有しています。(C ++の同等の機能はテンプレートと呼ばれます。) TypeScriptでは、ジェネリックコンポーネントは、コード内のどこで呼び出されるかに応じて、1つだけでなく、さまざまなタイプで機能します。これはTypeScriptドキュメントからの非常に簡単な例です。まず、引数を取り、すぐにそれを返すこの関数について考えてみます。

関数identity(arg:any):any {

    引数を返す;

}

関数はany型で定義されているため、スローするように選択した型の引数を受け入れます。ただし、返されるのはそのanyタイプになります。ジェネリックスを使用した関数のバージョンは次のとおりです。

関数の恒等式(引数:T):T {

    引数を返す;

}

このコードには、入力引数の型をキャプチャし、後で使用できるように格納する型変数が含まれていTます。

大企業プロジェクトでコードの再利用を可能にするための鍵となるジェネリックには、さらに多くのことがあります。詳細については、TypeScriptのドキュメントを確認してください。

TypeScriptクラス 

オブジェクト指向プログラミングでは、クラスは機能を継承し、オブジェクトの構成要素として機能します。JavaScriptは従来、クラスを使用せず、代わりに関数とプロトタイプベースの継承に依存していましたが、この概念はECMAScript2015バージョンの標準の一部として言語に追加されました。クラスはすでにTypeScriptの一部でしたが、現在TypeScriptはJavaScriptと同じ構文を使用しています。TypeScriptのコンパイラの利点の1つは、JavaScriptクラスを含むコードを2015年以前の標準に準拠するレガシーJavaScriptコードに変換できることです。

TypeScriptの日付

TypeScriptで日付と時刻を取得および設定するために使用できるメソッドとオブジェクトは多数あり、ほとんどがJavaScriptから継承されています。JavaTPointには、これがどのように機能するかについての優れた要約があります。

TypeScriptチュートリアル 

もっと深く行く準備はできましたか?これらのTypeScriptチュートリアルを理解してください。

  • TypeScriptをまだインストールしていない場合は、TypeScriptを5分でインストールするプロセスを順を追って説明します。
  • このVisualStudio Codeチュートリアルは、IDEがTypeScript開発の生産性を実際にどのように向上させるかを示しています。
  • 初心者のためのTypeScriptチュートリアル:Missing Guideは、JavaScriptの経験がかなり限られている場合でも役立つ、非常に徹底的な入門書です。

TypeScriptをReactで使用する方法、Facebookによって開発されたUIを構築するためのJavaScriptライブラリを学習したい場合は、Ross BulatのReactとReduxでTypeScriptを使用する方法、およびTypeScriptドキュメントのReactとwebpackのセクションを確認してください。幸せな学習!