JavaScriptよりもTypeScriptを選ぶべき理由

BY admin
|

TypeScriptはここ数年、人気が高まっています。 これは、2020年に最も有望な5つの言語の中で言及されています。 最大のフロントエンドフレームワークの1つであるAngularは、TypeScriptを使用しています。 JSプログラマの約60％がすでにTypeScriptを使用しており、22％が試してみたいと考えています。 どうして？

歴史的に、JavaScriptはインターネット上のwebページやアプリをスクリプト化するための主要な言語として終わっています。 Nodeのようなフレームワークでフロントエンドとバックエンドの両方でJavaScriptを使用できるようになりました。jsとデノ。

しかし、JavaScriptは現代のweb上のもののような大規模で複雑なシステムを作成するために作られましたか？ いいえ。.

この記事では、その解決策–TypeScript–を紹介し、JavaScriptコードに型を追加するパスに向けて始めます。

ここでは、私たちがカバーするポイントのいくつかです:

  • TypeScriptとは何ですか？
  • 型とは何ですか、そしてそれらはTSでどのように機能しますか？
  • JavaScriptとTypeScript: どちらを選ぶ？
  • TypeScriptを始める方法。
  • TypeScriptを勉強するためのさらなるリソース。

TypeScriptとは何ですか？

簡単に言うと、TypeScriptはjavascriptのスーパーセットであり、オプションの型付けを持ち、プレーンなJavaScriptにコンパイルされます。簡単な言葉で言えば、TypeScriptは技術的にはいつでも静的型付けを備えたJavaScriptです。

さて、静的型付けをJavaScriptに追加する理由は何でしょうか？

私は少なくとも三つをリストすることができます:

  • 古典的な'undefined' is not a function.
  • のような巧みに隠された忍者のエラーを避けることができます。
  • 複雑で大規模なシステムに自分自身を向けることは、もはや悪夢ではありません。

実際には、すべてのJavaScriptのバグの15％がTypeScriptで検出できることが研究で示されています。

動的型付けの自由は、プログラマの作業の効率を低下させるだけでなく、コードの新しい行を追加するコストの増加により、開発を停止させる可能性があるバグにつながることがよくあります。

したがって、JavaScriptが型やコンパイル時のエラーチェックのようなものを組み込むことができないため、企業や大規模なコードベースのサーバー側コードには悪 彼らのキャッチフレーズが言うように、TypeScriptはスケールのJavaScriptです。TypeScriptを使用するために何を学ぶ必要がありますか？

TypeScriptは本質的にJSリンターです。 または、コンパイラが理解できるドキュメントを含むJS。

したがって、CoffeeScript（構文糖を追加する）やPureScript（JavaScriptのようには見えない）のような他の言語とは対照的に、TypeScriptコードを書くために多くを学ぶ必要はありません。TSの

型はオプションであり、すべてのJSファイルは有効なTypeScriptファイルです。 最初のファイルに型エラーがある場合、コンパイラは文句を言いますが、以前と同じように動作するJavaScriptファイルを返します。 どこにいても、TypeScriptはそこであなたに会い、徐々にスキルを身につけるのは簡単です。

TypeScriptはフロントエンドまたはバックエンドで使用されていますか？

TypeScriptはJavaScriptにコンパイルされます。 したがって、tsは、フロントエンドとバックエンドの両方で、JSが使用できる場所であればどこでも使用できます。

JavaScriptは、アプリやwebページのフロントエンド用のスクリプトを実装するための最も一般的な言語です。 したがって、TypeScriptはまったく同じ目的で使用できますが、サーバー側の複雑なエンタープライズプロジェクトでは輝いています。

Serokellでは、webフロントエンドのほとんどがTypeScriptで実装されています。

型とは何ですか、そしてそれらはTSでどのように機能しますか？

タイプの簡単な紹介

型は、データをどのように使用するかをコードで記述することによって、正しいプログラムを実行する前に正しくないプログラムを伝える方法です。 それらは、数値や文字列のような単純な型から、問題領域のために完全にモデル化された複雑な構造までさまざまです。

プログラミング言語は、静的型付けと動的型付けの二つのカテゴリに分類されます。

静的型付けを使用する言語では、変数の型はコンパイル時に認識されている必要があります。 変数を宣言する場合、それが数値、文字列、またはブール値であるかどうかをコンパイラによって知る（または推論できる）必要があります。 Javaを考えてみてください。

動的型付けを持つ言語では、これは必ずしもそうではありません。 変数の型は、プログラムを実行しているときにのみ認識されます。 Pythonを考えてみてください。

TypeScriptは静的型付けをサポートできますが、JavaScriptはサポートしません。

TypeScriptの静的型付けのために、あなたはもっと努力する必要があります:

  • 未定義の変数を導入する(コンパイル時の警告ヘルプ)
  • それらに数字を持つ二つの文字列を合計する(のような”4″ + “20” = “420”)
  • 数値をトリミングするなど、許可されていないものに対して操作を行います。

静的型システムでは、独自の複合型を作成できます。 これにより、エンジニアは自分の意図をより詳細に表現することができます。

明示的な型もコードを自己文書化します: それらはあなたの変数および機能が意図されているものが一致し、コンピュータが周囲の文脈を覚えることを大事にすることを可能にすることを

TypeScriptのタイプ

TypeScriptには、Boolean、Number、String、Array、Tupleなどのさまざまな基本型があります。 これらのうちのいくつかはJSには存在しません。TypeScriptのドキュメントでそれらについての詳細を学ぶことができます。

これらに加えて、TSの表現力を紹介するために機能したい他のタイプがいくつかあります:

いずれか&不明

any as a typeは、あなたが望むものをカバーすることができますが、unknownはそのタイプセーフな対応物です。

型システムをエスケープしたいときはいつでも、anyを使用すると、任意のJavaScript変数を割り当てることができます。 これは、まだチェックされておらず、型が不明な着信変数（たとえば、サードパーティのApiから）をモデル化するために頻繁に使用されます。

Unknownはanyとよく似ていますが、明示的に型チェックされる前に変数に対して操作を実行することはできません。

Voidは、何も返さない関数の戻り値の型など、返された値がない場合に使用されます。

Neverは、例外をスローする関数のように、決して発生してはならない何かの戻り値の型です。

&

これらを使用すると、ロジックに合わせてカスタムタイプを作成できます。

交差型を使用すると、いくつかの基本型を1つの型にまとめることができます。 たとえば、name: stringとphone_number: numberを持つカスタムタイプPersonを作成できます。 それは言うことと同じです：私は私のタイプがこれとそれであることを望みます。

共用体型を使用すると、型が複数の基本型のいずれかを取ることができます。 たとえば、result: stringまたはundefinedのいずれかを返すクエリがあるとします。 それは言っていることと同じです：私は自分のタイプをthisまたはthatにしたい。

型をスペースとして考えると、これらの型はすべてすぐに意味があります。

TypeScriptの型は、暗黙的と明示的の両方にすることができます。 型を明示的に記述しない場合、コンパイラは型推論を使用して使用している型を推測します。

ただし、それらを明示的に記述すると、コードを読む他の開発者を助けたり、コンパイラが見ているものが見えるようにするなどの利点が得られます。

TypeScriptとJavaScript

それは実用的であることを支払う。 このグラフを見てみましょう:

（出典）

これのかなりの原因は、Microsoft（それを作成した）やGoogleのような企業によるTypeScriptのサポートですが、正当な理由でサポートされています。

JavaScriptよりもTypeScriptを選択する3つの理由

1. TypeScriptはより信頼性が高い

JavaScriptとは対照的に、TypeScriptコードはより信頼性が高く、リファクタリングが簡単です。 これにより、開発者はエラーを回避し、書き換えをはるかに簡単に行うことができます。

型は、JavaScriptコードベースに潜入する可能性のある愚かなエラーのほとんどを無効にし、新しいコードを書いてリファクタリングするときにすべての小さなミスを修正するための迅速なフィードバックループを作成します。

2. TypeScriptはより明示的です

型を明示的にすることは、システムがどのように正確に構築され、そのさまざまな部分がどのように相互作用するかに焦点を当てています。 大規模なシステムでは、文脈を念頭に置いて、システムの残りの部分を抽象化できることが重要です。 タイプは私達がそれをすることを可能にする。

3. TypeScriptとJavaScriptは実質的に交換可能ですが、なぜそうではありませんか？

JavaScriptはTypeScriptのサブセットであるため、TypeScriptコードで必要なすべてのJavaScriptライブラリとコードを使用できます。

最も人気のあるJavaScriptライブラリは、2020年に型を持っています–間違いなくTypedは、あなたがそれらとの相互作用をより型安全にするために使用できる多くの異なるJavaScriptライブラリのための型を持つリポジトリです。

これは、JavaScriptコードベースでTypeScriptを徐々に採用し、最初に個々のモジュールに型を追加してから、既知の宇宙を消費するように拡張できることを意味します。

JavaScriptチームやJavaScriptリポジトリを使って、すぐに慣用的なTypeScriptに切り替えることはできません。 トレードオフがあり、あなたがしなければならない先行時間の犠牲があります。

長期的には型について明示的に与える節約について議論することができますが、短期的にはそれらを追加するのに時間がかかります。 これは間違いなく大したことではありませんが、JavaScriptを支持する議論です。

したがって、あなた自身の使用のために小さなプロジェクトやプロトタイプのためのTypeScriptを選択しないかもしれません。

テストとタイプ

テストとタイプの議論に簡単に触れるには、これらの両方が異なるクラスのバグをキャッチするので、両方を無党派のような方法で行うのが理にか

静的型システムの利点を維持しながら、単体テストとTSを使用したプロパティベースのテストなどのより高度な技術の両方を使用できます。

それを要約すると、ここでは両方の言語の簡単な比較があります:

TypeScript JavaScript
TSはオブジェクト指向スクリプト言語 JSはオブジェクト指向スクリプト言語です
依存言語(JavaScriptにコンパイルされます) 独立言語(解釈および実行が可能です) 独立言語(解釈および実行が可能です))
コンパイルされた言語、ブラウザで直接実行することはできません 解釈された言語、webブラウザで直接実行することはできません
静的に型指定することができます 動的に型指定することができます
より良い 構造化された簡潔な あなたは型システムによって制限されていないので、より柔軟性があります
を持っています。ts拡張子 を持っています。js拡張子
Anders Hejlsberg（c＃のデザイナー）によってMicrosoftで作成され、Brendan Eich（Netscape）によって作成され、ECMA（European Computer Manufacturers Association）によって管理されているMicrosoft によって管理されています。
複雑なプロジェクトのための公正な選択 小さく、簡単なプロジェクトを使用することよい

TypeScriptクイックスタートガイド

TypeScriptコンパイラ

TSコードをコンパイルするには、tsc（TypeScriptコンパイラの略）をインストールする必要があります。 それを行う最も簡単な方法は、端末を使用することです。 これは、次のコマンドを使用してnpmを介して簡単に行うことができます:Visual Studio CodeでTypeScriptを使用する場合は、webサイトに便利なガイドがあります。

tscをインストールしたら、tsc filename.tsでファイルをコンパイルできます。

JavaScriptからTypeScriptへのファイルの移行

奇妙な動作のために、次のJavaScriptファイルをTypeScriptに変更したいとしましょう:

function my_sum(a, b) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

良い知らせだ どのJSファイルも技術的には有効なTypeScriptファイルなので、ファイル拡張子を切り替えるだけで素晴らしいスタートができます。tsから。js”を発表した。TypeScriptには型推論があり、それはあなたがそれらを追加せずにあなたが使用する型のいくつかを自動的に推論することができることを意味します。 この場合、関数はany型の2つの変数を合計すると想定していますが、これは真ですが、今はあまり役に立ちません。

数値のみを合計したい場合は、my_sumに型シグネチャを追加して数値のみを受け入れるようにすることができます。

function my_sum(a: number, b: number) { return a + b; }let a = 4; let b = "5";my_sum(a, b);

今、TypeScriptは私たちにエラーを提供します。

Argument of type 'string' is not assignable to parameter of type 'number'.

エラーがどこにあるかを見つけた良いこと。 :)このようなエラーをさらにエスケープするには、変数に型定義を追加することもできます。TypeScriptは、何ができるのか、どのように役立つのかという点で非常に柔軟です。 既存のJavaScriptコードベースをTypeScriptに移動する方法、またはTypeScriptを使用してJSコードを改善する方法の簡単な例については、このガイドをお読みください。

ブラウザでTypeScriptを使用するには？

ブラウザでTypeScriptを実行するには、TypeScriptコンパイラ（tsc）を使用してJavaScriptに変換する必要があります。 この場合、tscは新しいものを作成します。jsファイルに基づいています。これは、JavaScriptファイルを使用できる任意の方法で使用できます。

TypeScriptディープダイブ

この無料のwebリソースには、すでにここで説明したセクションの詳細な説明を含む、TypeScriptから始めるために必要なものがすべて含まれています。

TypeScriptをゼロから学ぶ！

TypeScriptのすべての基本的な機能、いくつかのJSフレームワークと対話するためにそれを使用する方法、およびJavascriptを書いている間TypeScriptの力を使用する方法を経

Exercismは、新しいプログラミング言語でコードを書く練習に最適なリソースです。 慣用的なコードに向かってあなたを操縦しますメンター,楽しい練習タスクの多く–このウェブサイトについて好きではないものは何もありません.

全体的に、TypeScriptは、あなたがその完全な能力にそれを使用していない場合でも、あなたのツールセットに持っている素晴らしいツールです。 それは小さな開始し、ゆっくりと成長し、学習し、あなたが行くように新しい機能を追加するのは簡単です。 TypeScriptは実用的で初心者に歓迎されているので、恐れる必要はありません。

この記事があなたのTypeScriptの旅に役立つことを願っています。 あなたが助けをしたいか、いくつかの質問がある場合は、TwitterやFacebookのような私たちのソーシャルメディア上でそれらを尋ねるようにしてください。