新しいプログラマーのための TypeScript

初めての言語の1つとしてTypeScriptを選んだことをおめでとうございます。あなたはすでに良い決断をしています！

おそらく、TypeScriptはJavaScriptの「フレーバー」または「バリアント」であると聞いたことがあるでしょう。TypeScript（TS）とJavaScript（JS）の関係は、現代のプログラミング言語の中でもかなりユニークなので、この関係についてさらに学ぶことで、TypeScriptがJavaScriptに追加するものを理解するのに役立ちます。

JavaScriptとは？簡単な歴史

JavaScript（ECMAScriptとも呼ばれます）は、ブラウザ用のシンプルなスクリプト言語として誕生しました。発明された当時、Webページに埋め込まれた短いコードスニペットに使用されることが想定されていました。数十行以上のコードを書くことは、やや珍しいことでした。このため、初期のWebブラウザは、そのようなコードを非常にゆっくりと実行していました。しかし、時間の経過とともに、JSはますます人気が高まり、Web開発者はインタラクティブなエクスペリエンスを作成するためにJSを使用し始めました。

Webブラウザの開発者は、JSの使用量の増加に対応するために、実行エンジン（動的コンパイル）を最適化し、JSで実行できること（APIの追加）を拡張しました。これにより、Web開発者はさらにJSを使用するようになりました。最近のWebサイトでは、ブラウザは数十万行のコードに及ぶアプリケーションを実行することがよくあります。これは、「Web」の長期的かつ段階的な成長であり、静的ページのシンプルなネットワークとして始まり、あらゆる種類の豊富なアプリケーションのプラットフォームへと進化しました。

さらに、JSはブラウザのコンテキスト以外でも十分に普及し、node.jsを使用してJSサーバーを実装するなどにも使用されています。JSの「どこでも実行できる」性質は、クロスプラットフォーム開発にとって魅力的な選択肢となっています。最近では、JavaScriptのみを使用してスタック全体をプログラミングする開発者がたくさんいます！

要約すると、簡単な使用のために設計された言語が、数百万行のアプリケーションを作成するための本格的なツールに成長したということです。すべての言語には独自の癖、つまり奇妙さや驚きがあり、JavaScriptの質素な始まりにより、これらの多くが存在します。いくつかの例

  • JavaScriptの等価演算子（==）はオペランドを強制するため、予期しない動作が発生します。

    js
    if ("" == 0) {
      // It is! But why??
    }
    if (1 < x < 3) {
      // True for *any* value of x!
    }

  • JavaScriptでは、存在しないプロパティへのアクセスも許可されています。

    js
    const obj = { width: 10, height: 15 };
    // Why is this NaN? Spelling is hard!
    const area = obj.width * obj.heigth;

ほとんどのプログラミング言語では、このような種類のエラーが発生するとエラーがスローされます。一部の言語では、コードが実行される前、つまりコンパイル中にエラーがスローされます。小さなプログラムを作成する場合、このような癖は煩わしいですが、管理可能です。数百行または数千行のコードでアプリケーションを作成する場合、このような常に発生する驚きは深刻な問題になります。

TypeScript：静的型チェッカー

一部の言語では、バグのあるプログラムがまったく実行されないと先ほど述べました。コードを実行せずにコード内のエラーを検出することは、静的チェックと呼ばれます。操作されている値の種類に基づいて、エラーであるものとそうでないものを判断することは、静的型チェックとして知られています。

TypeScriptは、実行前にプログラムのエラーをチェックし、その際に値の種類に基づいてチェックを行います。そのため、静的型チェッカーと呼ばれます。例えば、上記の最後の例では、objの型が原因でエラーが発生しています。以下はTypeScriptが見つけたエラーです。

ts
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;
Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?2551Property 'heigth' does not exist on type '{ width: number; height: number; }'. Did you mean 'height'?Try

JavaScriptの型付きスーパーセット

では、TypeScriptとJavaScriptの関係はどうなのでしょうか？

構文

TypeScriptはJavaScriptのスーパーセットである言語です。したがって、JSの構文はTSでも有効です。構文とは、プログラムを構成するためにテキストを記述する方法を指します。例えば、このコードは)が欠落しているため、構文エラーになります。

ts
let a = (4
')' expected.1005')' expected.Try

TypeScriptは、JavaScriptコードの構文を理由にエラーと見なすことはありません。これは、既存のJavaScriptコードをTypeScriptファイルにコピーしても、記述方法を気にする必要がないことを意味します。

型

しかし、TypeScriptは型付きスーパーセットであり、異なる種類の値がどのように使用できるかについての規則を追加します。先ほどのobj.heigthに関するエラーは、構文エラーではありませんでした。これは、ある種類の値（型）を間違った方法で使用したことによるエラーです。

別の例として、これはブラウザで実行できるJavaScriptコードであり、値をログ出力します

js
console.log(4 / []);

この構文的に正しいプログラムは、Infinityをログ出力します。しかし、TypeScriptでは、数値の配列による除算はナンセンスな操作と見なされ、エラーが出力されます

ts
console.log(4 / []);
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.2363The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.Try

おそらく、何が起こるかを確認するために、数値を配列で割ってみたかったのかもしれません。しかし、ほとんどの場合、これはプログラミングミスです。TypeScriptの型チェッカーは、可能な限り多くの一般的なエラーを捕捉しつつ、正しいプログラムを通過させるように設計されています。（後ほど、TypeScriptがコードをどれほど厳密にチェックするかを設定できる設定について学びます。）

JavaScriptファイルからTypeScriptファイルにコードを移動すると、コードの記述方法によっては型エラーが表示されることがあります。これらはコードの正当な問題である可能性もあれば、TypeScriptが過度に保守的になっている可能性もあります。このガイド全体を通して、このようなエラーを解消するためにTypeScriptのさまざまな構文を追加する方法を説明します。

ランタイムの動作

TypeScriptは、JavaScriptのランタイムの動作を保持するプログラミング言語でもあります。例えば、JavaScriptでゼロ除算を行うと、ランタイム例外がスローされる代わりにInfinityが生成されます。原則として、TypeScriptはJavaScriptコードのランタイムの動作を決して変更しません。

つまり、JavaScriptからTypeScriptにコードを移動した場合、TypeScriptがコードに型エラーがあると判断した場合でも、保証された方法で同じように実行されるということです。

JavaScriptと同じランタイム動作を維持することは、TypeScriptの基本原則です。これは、プログラムが動作しなくなる可能性のある微妙な違いを気にすることなく、2つの言語間を簡単に移行できることを意味するからです。

消去された型

大まかに言えば、TypeScriptのコンパイラがコードのチェックを完了すると、型が消去され、結果の「コンパイルされた」コードが生成されます。これは、コードがコンパイルされると、結果のプレーンなJSコードには型情報が含まれていないことを意味します。

これは、TypeScriptが推論した型に基づいてプログラムの動作を変更しないことも意味します。結論として、コンパイル中に型エラーが表示されることがありますが、型システム自体はプログラムの実行方法に影響を与えません。

最後に、TypeScriptは追加のランタイムライブラリを提供しません。プログラムは、JavaScriptプログラムと同じ標準ライブラリ（または外部ライブラリ）を使用するため、学ぶべきTypeScript固有のフレームワークはありません。

JavaScriptとTypeScriptの学習

「JavaScriptとTypeScriptのどちらを学ぶべきか？」という質問をよく目にします。

答えは、JavaScriptを学ばずにTypeScriptを学ぶことはできないということです！ TypeScriptはJavaScriptと構文およびランタイムの動作を共有しているため、JavaScriptについて学ぶことはすべて、同時にTypeScriptを学ぶのに役立ちます。

プログラマーがJavaScriptを学ぶためのリソースはたくさんあります。TypeScriptを記述している場合でも、これらのリソースを無視すべきではありません。例えば、StackOverflowでjavascriptタグが付いた質問はtypescriptタグが付いた質問の約20倍多いですが、javascriptの質問はすべてTypeScriptにも当てはまります。

「TypeScriptでリストをソートする方法」のようなものを検索している場合は、次のことを覚えておいてください。TypeScriptは、コンパイル時の型チェッカーを備えたJavaScriptのランタイムです。TypeScriptでリストをソートする方法は、JavaScriptでソートする方法と同じです。TypeScriptを直接使用したリソースを見つけた場合は、それも素晴らしいことですが、ランタイムタスクを達成する方法に関する日常的な質問に対するTypeScript固有の答えが必要だと思い込んで制限しないでください。

次のステップ

これは、TypeScriptで日常的に使用される構文とツールの簡単な概要でした。ここから、あなたは

TypeScriptのドキュメントはオープンソースプロジェクトです。これらのページを改善するために、プルリクエストを送信してください❤

このページの貢献者
OTOrta Therox (19)
EBEli Barzilay (2)
XLXavi Lee (1)
NSNick Schonning (1)
AOAlex Ownejazayeri (1)
8+

最終更新日: 2024年3月21日