TypeScriptとJavaScript:違いを理解する

world wide webは基本的にJavaScript、HTML、CSSで動作します。 残念ながら、JavaScriptには、開発者が大規模なアプリケーションに使用するのに役立ついくつかの機能が欠けています。 TypeScriptを入力します。

JavaScriptとは何ですか?

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

JavaScript言語

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

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

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

“ES6″の指定は何ですか? 標準化されたJavaScript言語の名前は、ECMA国際標準化機関にちなんでECMAScript(ES)であり、ES6はECMAScript2015(ES2015)とも呼ばれています。 ES2020は現在、ドラフト標準です。

JavaScript言語の風味を与える簡単な例として、昼か夜かを決定し、ブラウザのdocumentオブジェクトにある名前付きweb要素に適切な挨拶を動的に配置するコード:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

JavaScriptエコシステム

多数のJavaScript Apiがあります。 いくつかは、上記のコードのdocumentAPIのようにブラウザによって提供され、いくつかは第三者によって提供されます。 一部のApiは、クライアント側の使用、一部はサーバー側の使用、一部はデスクトップの使用、一部は複数の環境に適用されます。

ブラウザApiには、ドキュメントオブジェクトモデル(DOM)とブラウザオブジェクトモデル(BOM)、地理位置情報、Canvas(グラフィックス)、WebGL(GPUアクセラレーショングラフィックス)、HTMLMediaElement(オーディオとビデオ)、WebRTC(リアルタイムコミュニケーション)が含まれています。

サードパーティのApiがたくさんあります。 いくつかは、Googleマップなどの完全なアプリケーションへのインターフェイスです。 他のものは、jQueryのようなJavaScript HTML5とCSSのプログラミングを容易にするユーティリティです。 Expressのように、特定の目的のためのアプリケーションフレームワークであるものもあります。js”を発表した。 他の多くのフレームワークがExpressの上に構築されています。 2016年には、動物園のようなものになっていることを理解するために、22のJavaScriptフレームワークについて議論しました。

さらに多くのJavaScriptモジュールがあり、300,000を超えています。 これに対処するために、Nodeのデフォルトのパッケージマネージャーであるnpmなどのパッケージマネージャーを使用します。js”を発表した。

npmの代替案の1つは、Facebookから来たYarnであり、決定論的インストールの利点を主張しています。

npmの代替案の1つはYarnです。 同様のツールには、Nodeモジュールではなくフロントエンドコンポーネントを管理するBower(Twitterから)、npmの妹と呼ぶEnder、npmでサポートされている古い事実上の標準であるCommonJSモジュールではなくESモジュール(モジュールの新しいECMA標準)を使用するjspmなどがある。

WebpackはJavaScriptモジュールをブラウザ用の静的アセットにバンドルします。 Browserifyは、開発者がノードを書くことができます。ブラウザで使用するためにコンパイルされるjsスタイルのモジュール。 Gruntはファイル指向のJavaScriptタスクランナーであり、gulpはストリーミングビルドシステムとJavaScriptタスクランナーです。 Gruntとgulpの間の選択は決定的ではありません。 私は両方をインストールし、指定されたプロジェクトのために設定されたものを使用しています。

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

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

Transpilerを使用すると、CoffeeScriptやTypeScriptなどの他の言語をJavaScriptに翻訳したり、最新のJavaScript(ES2015コードなど)を(ほぼ)任意のブラウザで実行される基本的なJavaScriptに翻訳できます。 (Internet Explorerの初期のバージョンでは、すべてのベットはオフです。)現代のJavaScriptのための最も一般的なトランスパイラはBabelです。

TypeScriptとは何ですか?

TypeScriptは、プレーンなJavaScriptにコンパイルされるjavascriptの型指定されたスーパーセットです(ES3以上、設定可能です)。 オープンソースのTypeScriptコマンドラインコンパイラは、ノードとしてインストールできます。jsパッケージ。 TypeScriptのサポートには、Visual Studio2017とVisual Studio2019、Visual Studio Code、WebStormが付属しており、Sublime Text、Atom、Eclipse、Emacs、およびVimに追加できます。 TypeScriptコンパイラ/トランスパイラtscはTypeScriptで記述されています。

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

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

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

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

TypeScript言語

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

TypeScript in5minutesチュートリアルでは、利点を明確にしています。 出発点は、純粋なJavaScriptとaです。tsエクステンション:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

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

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

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

これをコンパイルして出力されたJavaScriptを見ると、TypeScriptのクラスは、普通のJavaScript ES3で使用されているのと同じプロトタイプベースの継承の省略形に過ぎない プロパティperson.firstNameおよびperson.lastNameは、Studentクラスコンストラクタでpublic属性が検出されたときにコンパイラによって自動的に生成され、Personインターフェイスにも引き継がれ TypeScriptの型注釈の最も良い利点の1つは、Visual Studio Codeなどのツールで認識されることです。

IDG

VS Codeで編集するときにコードにエラーがある場合、問題タブにエラーメッ:

IDG

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

とりわけ、モジュールベースのrequire()またはdefine()ステートメントをTypeScript importステートメントに変更し、使用するライブラリモジュールの宣言ファイルを追加する必要があ また、TypeScriptexport文を使用してモジュールのエクスポートを書き直す必要があります。 TypeScriptはNodeのようなCommonJSモジュールをサポートしています。jsはそうです。

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

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

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

Anders HejlsbergがTypeScriptについて議論するのを見る価値があります。 あなたが彼から聞くように、TypeScriptはスケールのJavaScriptです。

コメントを残す

メールアドレスが公開されることはありません。