TypeScriptとJavaScript:違いを理解する

ワールドワイドウェブは基本的にJavaScript、HTML、CSSで動作します。残念ながら、JavaScriptには、開発者が大規模なアプリケーションに使用するのに役立ついくつかの機能がありません。TypeScriptを入力します。

JavaScriptとは何ですか?

JavaScriptは、Netscape NavigatorWebブラウザのスクリプト言語として始まりました。Brendan Eichは、1995年に10日間にわたってプロトタイプを作成しました。JavaScriptという名前はSun MicrosystemのJava言語にちなんでいますが、2つの言語はまったく異なり、名前の類似性により、長年にわたって大きな混乱が生じています。大幅に進化したJavaScriptは、現在すべての最新のWebブラウザーでサポートされています。

Netscape Navigatorにクライアント側のJavaScriptが導入された直後に、WebサーバーのNetscape EnterpriseServerとMicrosoftIISにサーバー側のJavaScriptが導入されました。約13年後、Ryan DahlはNode.jsを、ブラウザーやWebサーバーに依存しないオープンソースのクロスプラットフォームのJavaScriptランタイム環境として導入しました。

JavaScript言語

JavaScriptはマルチパラダイム言語です。Cファミリーの言語のように、中括弧の構文とセミコロンがあります。弱く動的な型付けがあり、解釈されるか、(より頻繁に)ジャストインタイムでコンパイルされます。一般に、JavaScriptはシングルスレッドですが、マルチスレッドを実行するWeb Workers APIがあり、イベント、非同期関数呼び出し、およびコールバックがあります。

JavaScriptは、C ++、Java、およびC#で使用されるクラス継承ではなく、プロトタイプを使用したオブジェクト指向プログラミングをサポートしclassますが、2015年にJavaScript ES6に構文が追加されました。JavaScriptは、クロージャー、再帰、ラムダ(匿名関数)などの機能プログラミングもサポートします。

JavaScript ES6より前は、言語には末尾呼び出しの最適化がありませんでした。厳密モード'use strict')をオンにして有効にする必要がありますが、実装はブラウザごとに異なります。厳密モードでは、JavaScriptのセマンティクスも変更され、通常はサイレントなエラーがいくつか変更されてエラーがスローされます。

「ES6」の指定とは何ですか?標準化されたJavaScript言語の名前は、ECMA International標準化団体にちなんでECMAScript(ES)です。ES6はECMAScript2015(ES2015)とも呼ばれます。ES2020は現在ドラフト標準です。

JavaScript言語のフレーバーを提供する簡単な例として、日中か夕方かを判断し、ブラウザーのドキュメントオブジェクトにある名前付きWeb要素に適切な挨拶を動的に配置するコードを次に示します。

var hour = new Date()。getHours();

varグリーティング;

if(時間<18){

  あいさつ= "おはよう";

} そうしないと {

  あいさつ= "こんばんは";

}

document.getElementById( "demo")。innerHTML =挨拶;

JavaScriptエコシステム

多数のJavaScriptAPIがあります。document上記のコードのAPIのように、ブラウザによって提供されるものもあれば、サードパーティによって提供されるものもあります。一部のAPIはクライアント側の使用法に適用され、一部はサーバー側の使用法に適用され、一部はデスクトップの使用法に適用され、一部は複数の環境に適用されます。

ブラウザAPIには、ドキュメントオブジェクトモデル(DOM)とブラウザオブジェクトモデル(BOM)、Geolocation、Canvas(グラフィックス)、WebGL(GPUアクセラレーショングラフィックス)、HTMLMediaElement(オーディオとビデオ)、およびWebRTC(リアルタイム通信)が含まれます。

サードパーティのAPIがたくさんあります。一部は、Googleマップなどの完全なアプリケーションへのインターフェースです。その他には、jQueryなどのJavaScriptHTML5およびCSSプログラミングを容易にするユーティリティがあります。Expressのように、特定の目的のためのアプリケーションフレームワークもあります。Expressの場合、目的はNode.js上にWebおよびモバイルアプリケーションサーバーを構築することです。Expressの上に、他の多くのフレームワークが構築されています。2016年に、私は動物園のようなものになりつつあるものを理解するために22のJavaScriptフレームワークについて議論しました。これらのフレームワークの多くはまだ何らかの形で存在していますが、いくつかは道に迷っています。

あり、多くの30万人以上の多くのJavaScriptのモジュールは、。これに対処するために、Node.jsのデフォルトのパッケージマネージャーであるnpmなどのパッケージマネージャーを使用します

npmの代替案の1つは、Facebookから提供されたYarnであり、確定的なインストールの利点を主張しています。同様のツールには、ノードモジュールではなくフロントエンドコンポーネントを管理するBower(Twitterから)が含まれます。エンダー、それ自体をnpmの妹と呼びます。jspmは、npmでサポートされている古いデファクトスタンダードであるCommonJSモジュールではなく、ESモジュール(モジュールの新しいECMA標準)を使用します。

Webpackは、JavaScriptモジュールをブラウザーの静的アセットにバンドルします。Browserifyを使用すると、開発者はブラウザーで使用するためにコンパイルするNode.jsスタイルのモジュールを作成できます。Gruntはファイル指向のJavaScriptタスクランナーであり、gulpはストリーミングビルドシステムおよびJavaScriptタスクランナーです。うなり声と一口のどちらを選ぶかは決定的ではありません。特定のプロジェクト用に設定された方をインストールして使用しました。

コンパイルがない場合にJavaScriptコードの信頼性を高めるために、リンターを使用します。この用語は、標準のUnixユーティリティであるC言語のlintツールに由来します。JavaScriptリンターには、JSLint、JSHint、およびESLintが含まれます。タスクランナーまたはIDEを使用して、コード変更後にリンターの実行を自動化できます。繰り返しになりますが、リンターの中からの選択は明確ではなく、特定のプロジェクト用に設定されたものを使用します。

エディターとIDEについて言えば、最近では2019年に6つのJavaScript IDEと10のJavaScriptエディターをレビューしました。私の一番の選択は、Sublime Text(非常に高速なエディター)、Visual Studio Code(構成可能なエディター/ IDE)、およびWebStorm(IDE)でした。

トランスパイラーを使用すると、CoffeeScriptやTypeScriptなどの他の言語をJavaScriptに翻訳したり、最新のJavaScript(ES2015コードなど)を(ほぼ)すべてのブラウザーで実行される基本的なJavaScriptに翻訳したりできます。(Internet Explorerの初期バージョンでは、すべての賭けが無効になっています。)最新のJavaScriptの最も一般的なトランスパイラーはBabelです。

TypeScriptとは何ですか?

TypeScriptは、プレーンJavaScript(ES3以降。構成可能)にコンパイルされるJavaScriptの型付きスーパーセットです。オープンソースのTypeScriptコマンドラインコンパイラは、Node.jsパッケージとしてインストールできます。TypeScriptのサポートは、Visual Studio2017とVisualStudio 2019、Visual Studio Code、およびWebStormに付属しており、Sublime Text、Atom、Eclipse、Emacs、およびVimに追加できます。TypeScriptコンパイラ/トランスパイラーtscはTypeScriptで書かれています。

TypeScriptは、オプションのタイプ、クラス、およびモジュールをJavaScriptに追加し、任意のブラウザー、任意のホスト、任意のOSの大規模なJavaScriptアプリケーション用のツールをサポートします。TypeScriptの他の多くの勝利の中で、人気のあるAngularフレームワークがTypeScriptで刷新されました。

タイプを使用すると、JavaScript開発者は、JavaScriptアプリケーションを開発するときに、静的チェックやコードリファクタリングなどの生産性の高い開発ツールとプラクティスを使用できます。

型はオプションであり、型推論により、いくつかの型注釈がコードの静的検証に大きな違いをもたらすことができます。タイプを使用すると、ソフトウェアコンポーネント間のインターフェイスを定義し、既存のJavaScriptライブラリの動作に関する洞察を得ることができます。

TypeScriptは、ECMAScript 2015の機能や、非同期関数やデコレータなどの将来の提案を含む、最新の進化するJavaScript機能のサポートを提供し、堅牢なコンポーネントの構築を支援します。

TypeScript言語

TypeScript言語は、JavaScriptを有効なものとして受け入れますが、型注釈、コンパイル時の型チェック、クラス、およびモジュールの追加オプションを提供します。これらはすべて、堅牢なソフトウェアを作成しようとしているときに非常に役立ちます。プレーンJavaScriptは実行時にのみエラーを生成し、プログラムがエラーのあるパスにたまたま到達した場合にのみエラーを生成します。

TypeScript in 5 minutesチュートリアルは、利点を明確にします。出発点は、拡張子が.tsの純粋なJavaScriptです。

関数greeter(人){

  「こんにちは」+人を返します。

}

let user = "Jane User";

document.body.textContent = greeter(user);

これをtscでコンパイルすると、拡張子が.jsの同一のファイルが生成されます。

チュートリアルでは、このコードを段階的に変更person:stringし、関数定義に型アノテーションを追加し、コンパイルし、コンパイラによる型チェックをテストし、person型のインターフェイスを追加し、最後にのクラスを追加しStudentます。最終的なコードは次のとおりです。

クラス学生{

    fullName:文字列;

    コンストラクター(publicfirstName:string、public middleInitial:string、

        public lastName:string){

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

インターフェイスPerson {

    firstName:文字列;

    lastName:文字列;

}

関数greeter(人:人){

    return "Hello、" + person.firstName + "" + person.lastName;

}

let user = new Student( "Jane"、 "M。"、 "User");

document.body.textContent = greeter(user);

これをコンパイルして発行されたJavaScriptを見ると、TypeScriptのクラスは、プレーンJavaScriptES3で使用されているのと同じプロトタイプベースの継承の省略形にすぎないことがわかります。プロパティperson.firstNameperson.lastNamepublicStudentクラスコンストラクターで属性を確認するとコンパイラーによって自動的に生成され、Personインターフェイスにも引き継がれることに注意してください。TypeScriptの型注釈の最も優れた利点の1つは、Visual StudioCodeなどのツールによって認識されることです。

VS Codeで編集するときにコードにエラーがある場合、次のようにインスタンス化して行の終わりを削除すると、[問題]タブにエラーメッセージが表示されますStudent

JavaScriptからの移行チュートリアルでは、既存のJavaScriptプロジェクトをアップグレードする方法について詳しく説明します。セットアップ手順をスキップして、メソッドの要点は、.jsファイルの名前を一度に1つずつ.tsに変更することです。(ファイルでReactが使用する拡張子であるJSXを使用している場合は、ファイルの名前を.tsではなく.tsxに変更する必要があります。)次に、エラーチェックを強化し、エラーを修正します。

特に、モジュールベースのステートメントrequire()またはdefine()ステートメントをTypeScriptインポートステートメントに変更し、使用するライブラリモジュールの宣言ファイルを追加する必要があります。TypeScriptexportステートメントを使用してモジュールエクスポートを書き直す必要もあります。TypeScriptは、Node.jsと同様に、CommonJSモジュールをサポートします。

引数の数が間違っているというエラーが発生した場合は、TypeScript関数のオーバーロードシグネチャを作成できます。これはJavaScriptに欠けている重要な機能です。最後に、独自の関数に型を追加し、必要に応じてインターフェイスまたはクラスを使用する必要があります。

通常、パブリックドメインのJavaScriptライブラリ用に独自の宣言ファイルを作成する必要はありません。DefinitelyTypedは宣言ファイルのリポジトリであり、すべてnpmを使用してアクセスできます。TypeSearchページを使用して宣言を見つけることができます。

すべてのJavaScriptファイルをTypeScriptに変換し、タイプを強化し、エラーを排除すると、はるかに堅牢なコードベースが得られます。テスターまたはユーザーから報告されたランタイムエラーを常に修正する代わりに、最も一般的なエラーを静的に検出できます。

AndersHejlsbergがTypeScriptについて議論するのを見る価値があります。彼から聞いたように、TypeScriptはスケーリングするJavaScriptです。