Typescriptの簡単な紹介

Typescriptのいくつかの概念の簡単な紹介

TypeScriptコンパイラ

TypeScriptコンパイラは、TypeScriptコードをプレーンなJavaScriptコードに変換するJavaScriptプログラムです。 TypeScriptで記述されており、JavaScriptをサポートする任意のプラットフォームで実行できます。TypeScriptコンパイラはオープンソースであり、GitHubで入手できます。コンパイラはMicrosoftによって開発および保守されており、コマンドラインから使用することも、VisualStudioやWebStormなどの一般的なIDEのプラグインとして使用することもできます。

TypeScriptコンパイラは、Node.js、Internet Explorer、ChromeなどのさまざまなJavaScriptランタイムと互換性のあるJavaScriptコードを出力できます。また、生成されたJavaScriptコードをTypeScriptコードにマップするソースマップを生成することもできます。これにより、ブラウザでTypeScriptコードをデバッグできます。

コンパイラーは、タイプ・エラーをチェックするように構成でき、エラーが見つかった場合はエラーを報告します。必要に応じて、タイプチェックを無効にすることができます。 TypeScriptコンパイラは、Apache2.0オープンソースライセンスの下で利用できます。

強く型付けされた言語ではない

Typescriptは、特定の型で変数を宣言する必要がないため、強く型付けされた言語ではありません。これは、変数を1つのタイプとして宣言してから、別のタイプの値に再割り当てできることを意味します。変数が宣言されている型と互換性のない方法で使用されている場合、これはエラーにつながる可能性があります。

この特性を説明するための基本的な例は、タイプ「any」で示すことができます。

// We initialze the variable as a string.
const something: any = "Tom";

// Now it's a number. This is valid TypeScript code.
something = 42;

TypeScriptをJavaScriptにコンパイルする

TypeScriptコンパイラはTypeScriptコードを受け取り、それをプレーンなJavaScriptコードに変換します。このプロセスは、トランスパイルとして知られています。コンパイラは最初にTypeScriptコードを解析し、構文エラーをチェックします。エラーが見つからない場合、コンパイラはタイプエラーをチェックします。タイプエラーが見つかった場合、コンパイラはそれらを報告して終了します。

タイプエラーが見つからない場合、コンパイラは続行してJavaScriptコードを発行します。生成されたJavaScriptコードは、指定されたターゲットJavaScriptランタイムと互換性があります。

TypeScriptコンパイラは、生成されたJavaScriptコードをTypeScriptコードにマップするソースマップを生成することもできます。これにより、ブラウザでTypeScriptコードをデバッグできます。

TypeScript言語サーバー

TypeScript言語サーバーは、コード補完、定義への移行、TypeScriptプロジェクトの型チェックなどの機能を提供する言語サーバーです。

TypeScriptコンパイラがこれらの機能を提供できるようにするには、言語サーバーが必要です。言語サーバーがなければ、TypeScriptコンパイラは構文の強調表示やコードのフォーマットなどの基本的な機能しか提供できません。 TypeScript言語サーバーはオープンソースであり、GitHubで入手できます。

TypeScriptプロジェクトを作成する手順

手順を説明する前に、ターミナルでTypeScriptプロジェクトを初期化するコマンドを次に示します。

npx tsc --init

説明:TypeScriptコンパイラをインストールします。プロジェクトのルートにtsconfig.jsonファイルを作成します。このファイルには、TypeScriptコンパイラのコンパイラオプションが含まれています。 srcディレクトリをtsconfig.jsonファイルに追加します。これは、TypeScriptソースファイルが配置される場所です。

main.tsファイルをsrcディレクトリに追加します。これは、TypeScriptプログラムのエントリポイントです。コマンドラインからtscを実行して、TypeScriptコードをコンパイルします。これにより、srcディレクトリにJavaScriptファイルが生成されます。コマンドラインからノードmain.jsを実行して、TypeScriptプログラムを実行します。

TypeScriptとJavaScriptの違い

TypeScriptと他の強く型付けされた言語の間には、いくつかの重要な違いがあります。TypeScriptはJavaScriptのスーパーセットです。つまり、有効なJavaScriptコードはすべて有効なTypeScriptコードでもあります。これにより、既存のJavaScriptプロジェクトに簡単に採用できます。

TypeScriptはオプションの型システムを使用します。つまり、変数に型を指定できますが、必須ではありません。 SwiftやKotlinなどの他の強い型の言語は、必須の型システムを使用します。これには、すべての変数を特定の型で宣言する必要があります。

TypeScriptはジェネリックスをサポートしており、タイプセーフなコレクションやその他のデータ構造を可能にします。これはJavaScriptでは使用できません。

コーディングにTypescriptの代わりにJavascriptを使用する必要があるのはいつですか?

JavaScriptまたはTypeScriptをいつ使用するかについての厳格なルールはありません。仕事に適したツールを選択するのは開発者次第です。ただし、従うことができるいくつかの一般的なガイドラインがあります。

プロジェクトがすでにJavaScriptで記述されている場合は、通常、JavaScriptを引き続き使用するのが最善です。 TypeScriptを使用するためだけに、コードをTypeScriptに変換する必要はありません。ただし、JavaScriptプロジェクトの保守は、隠れたバグにつながる型システムがないために困難になる可能性があることに注意してください。したがって、プロジェクトが将来維持(および拡張)される場合は、TypeScriptの採用を検討するのが最善です。

プロジェクトを最初から開始する場合は、通常、TypeScriptを使用するのが最適です。これにより、長期的にはより良いコード編成とメンテナンスが可能になります。

簡単な例

// TypeScript.
class Person {
  name: string;
  age: number;
}

const person: Person = new Person();
const person.name = "Tom";
const person.age = 42;

// JavaScript.
var Person = function() {};
Person.prototype.name = "";
Person.prototype.age = 0;

// TypeScript.
// Here's we're also using the class, but this
// time conforming to an interface, something that
// doesn't exist in JavaScript.
interface IPerson {
  name: string;
  age: number;
}

class Person implements IPerson {
  name: string;
  age: number;
}

// JavaScript.
var IPerson = function() {};
IPerson.prototype.name = "";
IPerson.prototype.age = 0;

var Person = function() {};
Person.prototype = Object.create(IPerson);

締めくくりの言葉

TypeScriptは、コードの品質を向上させるのに役立つ強力な言語です。使い始めるのは簡単で、JavaScriptをサポートするすべてのプラットフォームで使用できます。この記事では、この言語が今学ぶべきはるかに多くの機能と概念を提供しているため、ごく簡単な紹介しかしていません。

いくつかの有用な学習資料については、ページの最後にある補遺のリンクを確認してください。