初心者向けのタイプスクリプト、パート1：開始

このチュートリアルを「タイプスクリプトとは？」という質問で始めましょう。

TypeScriptは、Plain JavaScriptにコンパイルするJavaScriptのタイプされたスーパーセットです。類推として、JavaScriptがCSSである場合、TypeScriptはSCSSになります。

あなたが記述するすべての有効なJavaScriptコードは、有効なTypeScriptコードでもあります。ただし、TypeScriptを使用すると、静的なタイピングと、すべてのブラウザでサポートされているPlain JavaScriptにコンパイルされる最新の機能を使用できます。 TypeScriptは、JavaScriptをスケーラブルにする問題を解決することを目的としており、かなり良い仕事をしています。

このチュートリアルでは、TypeScriptのさまざまな機能と、それが良いアイデアである理由について読むことから始めます。記事の残りのセクションでは、TypeScriptのインストールと編集と、TypeScriptの構文やその他の重要な機能をサポートする人気のあるテキストエディターをカバーします。

タイプスクリプトが必要なのはなぜですか？

プログラミング言語を使用して、コンピューターに何かをしたい方法を指示します。彼らは基本的にコミュニケーションの媒体として機能します。ただし、コンピューターは、私たちが書いているJavaScript、PHP、またはPythonコードを直接理解していません。私たちが記述する人間の読み取り可能なコードはすべて、最終的にコンピューターが実行して理解できるマシンコードに変換されます。

最新のプログラミング言語は、プログラマーのニーズを念頭に置いて書かれています。これは、さまざまなプログラミング言語が使用される方法のために、さまざまな機能セットで設計されていることを意味します。 JavaScriptは、最小限のコードを作成することで物事を簡単に実行できるように書かれています。

JavaScriptは初期の頃からより人気が高まっており、現在は小規模および大規模なプロジェクトに広く使用されています。小規模なプログラムを作成するときに受け入れられるJavaScriptのいくつかの制限は、多くのチームメンバーとの大規模なプロジェクトに取り組む際に生産性を妨げる可能性があります。

タイプチェックなどのさまざまな機能を追加することにより、これらの制限に対処するためにTypeScriptが作成され、大規模なプロジェクトでコードを変更するときに発生する可能性のあるエラーをすばやくキャッチするのに役立ちます。

なぜタイプスクリプトを学ぶのですか？

TypeScriptを使用したことがない場合は、最終的にJavaScriptにコンパイルするときに、なぜそれを学ぶことを気にする必要があるのか​​疑問に思うかもしれません。

TypeScriptの学習に多くの時間を費やす必要がないことを保証させてください。 TypeScriptとJavaScriptの両方が非常によく似た構文を持っているため、Constキーワードの名前を変更して、再割り当てを通じてその変数の値の変更を防ぐか、その再配列を防止することを指定できます。ただし、これは変数の値が不変であることを意味するものではありません。それを変更する他の方法はまだあります。これが例です：

 const Fruits = ["Apples"、 "Mangoes"、 "Bananas"];<br> const野菜= ["ジャガイモ"、「玉ねぎ」、「キュウリ」];<br><br> fruits.push（ "orange"）;<br> // ["Apples"、 "Mangoes"、 "Bananas"、 "Orange"]]<br><br>果物[0] = "Papayas";<br> // ["Papayas"、 "Mangoes"、 "Bananas"、 "Orange"]]<br><br>果物=野菜//エラー<br>

最後の行まで、上記のコードは完全に有効なJavaScriptであり、エラーをスローしません。未定義で価値があると宣言しました。このアプローチは、オブジェクトのプロパティを動的に追加、削除、または更新できるため、理にかなっています。ただし、エラーや予期しない動作の原因でもあります。これが例です：

 Guy = {<br> 名前：「マリオ」、<br> 年齢：56<br> }<br><br> console.log（guy.name 'is' guy.ahe 'agh'）;<br> //マリオは未定義です。<br>

aheを間違えると、JavaScriptのエラーとは見なされませんが、TypeScriptに巻き込まれていたでしょう。 TypeScriptからJavaScriptに上記のコードをコンパイルしてみてください。PerimeterTriangle（）に関するエラーが表示されます。これにより、三角形の境界として無意味な値が出力されます。

関数境界（a、b、c）{<br> console.log（ `三角形の境界は次のとおりです。$ {abc}`）;<br> }<br><br>境界線（20、30、「ジャガイモ」）;<br> //三角形の境界は50ポテトです<br><br>perimetertriangle（ "Potato"、10）;<br> //三角形の周囲は次のとおりです<br><br>perimetertriangle（）;<br> //三角形の周囲は次のとおりです<br><br>境界線（20、30、50）;<br> //三角形の周囲は次のとおりです。100<br>

上記のコードに変更を加えてtypeScriptからJavaScriptにコンパイルしようとする場合でも、提供されている引数の数が不一致のため、2番目と3番目の関数呼び出しでエラーが発生します。ただし、関数のperimeterTriangle()が受け入れると予想される引数のタイプを指定することにより、関数定義にさらに情報を追加できます。

関数perimetertriangle（a：number、b：number、c：number）{<br> console.log（ `三角形の境界は$ {abc}`）;<br> }<br><br>境界線（20、30、「ジャガイモ」）;<br> //エラー：タイプ番号に割り当てられないタイプ文字列の引数。<br><br> perimetertriangle（ "Potato"、10）;<br> //エラー：3つの引数が予想されましたが、2が取得されました。<br><br> perimetertriangle（）;<br> //エラー：3つの引数が予想されますが、0が取得されました。<br><br>境界線（20、30、50）;<br> //三角形の周囲は100です。<br>

これで、最初の関数呼び出しでさえ、引数タイプの不一致のためにエラーをスローします。 TypeScriptは、このような多くのエラーをキャッチし、長期的に多くの時間を節約するのに役立ちます。

typeScriptをJavaScriptにコンパイルします

.tsファイルにいくつかのタイプスクリプトコードを作成したとします。ブラウザはこのコードを単独で実行できません。ブラウザが理解できるプレーンJavaScriptにタイプスクリプトをコンパイルする必要があります。

IDEを使用している場合、コードはIDE自体のJavaScriptにコンパイルできます。たとえば、Visual Studioを使用すると、TypeScriptコードをJavaScriptに直接コンパイルできます。 tsconfig.jsonファイルを作成する必要があります。ここでは、typeScriptファイルをJavaScriptにコンパイルするためのすべての構成オプションを指定します。

大規模なプロジェクトに取り組んでいないときの最も初心者に優しいアプローチは、ターミナル自体を使用することです。まず、端子内のTypeScriptファイルの場所に移動してから、次のコマンドを実行する必要があります。

 TSC first.ts<br>

これにより、同じ場所にfirst.jsという名前の新しいファイルが作成されます。 first.jsという名前のファイルが既にある場合、上書きされることに注意してください。

現在のディレクトリ内のすべてのファイルをコンパイルする場合は、ワイルドカードの助けを借りてそうすることができます。これは再帰的に機能しないことを忘れないでください。

 tsc *.ts<br>

最後に、単一の行で名前を明示的に提供することにより、いくつかの特定のファイルのみをコンパイルできます。そのような場合、JavaScriptファイルは、対応するファイル名で作成されます。

 tsc first.ts product.ts bot.ts<br>

TypeScriptの2つの数値を掛ける次のプログラムを見てみましょう。

 a：number = 12;<br> b：number = 17;<br><br>関数showproduct（first：number、second：number）：void {<br> console.log（ "製品は：" 1秒 * second）;<br> }<br><br> showproduct（a、b）;<br>

ターゲットバージョンがES6に設定されている場合、上のタイプスクリプトコードは次のJavaScriptコードにコンパイルされます。タイプスクリプトで提供したすべてのタイプ情報が、コンピレーションの後にどのようになくなったかに注意してください。言い換えれば、コードはブラウザで理解できるJavaScriptにコンパイルされますが、多くのバグをキャッチするのに役立つはるかに優れた環境で開発を行うことができます。

 a = 12とします。<br> b = 17とします。<br>関数showproduct（最初、2番目）{<br> console.log（ "製品は：" 1秒 * second）;<br> }<br> showproduct（a、b）;<br>

上記のコードでは、変数aとbのタイプを数字として指定しました。つまり、後でbの値を「Apple」のような文字列に設定しようとすると、TypeScriptが「Apple」がタイプnumberに割り当てられないというエラーが表示されることを意味します。あなたのコードは引き続きJavaScriptにコンパイルされますが、このエラーメッセージはあなたが間違いを犯し、ランタイム中に問題を回避するのに役立つことをあなたに知らせることができます。

Visual Studioコードのエラーメッセージを表示するスクリーンショットは次のとおりです。

上記の例は、タイプスクリプトがコードの可能性のあるエラーに関するヒントを与える方法を示しています。これは非常に基本的な例でしたが、非常に大きなプログラムを作成している場合、このようなメッセージは、エラーの可能性が低い堅牢なコードを作成するのに役立ちます。

最終的な考え

このシリーズの開始チュートリアルは、さまざまなタイプスクリプト機能の非常に簡単な概要を提供し、開発に使用できるIDEやテキストエディターのためのいくつかの提案とともに言語をインストールするのに役立つことを目的としています。次のセクションでは、TypeScriptコードをJavaScriptにコンパイルするさまざまな方法をカバーし、タイプスクリプトが一般的なエラーを回避するのに役立つ方法を示しました。

このチュートリアルが気に入ったことを願っています。シリーズの次のチュートリアルでは、TypeScriptで利用可能なさまざまな変数タイプについて説明します。

以上が初心者向けのタイプスクリプト、パート1：開始の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。