初心者のための TypeScript 入門

TypeScript は、静的型付けやその他の高度な機能を言語に追加する、JavaScript の強力なスーパーセットです。開発者がエラーを早期に検出し、よりクリーンなコードを記述し、大規模なコードベースをより効率的に管理するのに役立ちます。このガイドでは、TypeScript の基本を説明し、まったくの初心者でも使い始められるようにお手伝いします。

TypeScript とは何ですか?

TypeScript は、Microsoft が開発したオープンソースのプログラミング言語です。JavaScript をベースに静的型を追加することで、実行時ではなくコンパイル時にエラーを特定しやすくしています。これにより、信頼性が高く保守しやすいコードを簡単に作成できます。TypeScript コードは、ブラウザーまたは Node.js 環境で実行する前に、JavaScript にコンパイルする必要があります。

TypeScript を使用する理由

静的型付けによるコード品質の向上とバグの早期検出
最新の IDE の優れたツールと自動補完機能
大規模コードベースの可読性と保守性を向上
最新のJavaScript機能と将来の標準をサポート

TypeScriptのインストール方法

TypeScript を使い始める前に、お使いのマシンにインストールする必要があります。Node.js と npm (Node Package Manager) がインストールされている必要があります。インストールされていない場合は、Node.js の Web サイトからダウンロードしてください。

ターミナルまたはコマンドプロンプトを開きます。
TypeScript をグローバルにインストールするには、次のコマンドを実行します。

npm install -g typescript

このコマンドは、TypeScript をシステム上にグローバルにインストールし、どのフォルダーからもアクセスできるようにします。

初めての TypeScript プログラムを作成する

TypeScript をインストールしたら、最初の TypeScript ファイルを作成できます。次の手順に従います。

プロジェクト用の新しいフォルダーを作成し、ターミナルを使用してそのフォルダーに移動します。

mkdir my-first-typescript-app
cd my-first-typescript-app

app.ts という名前の新しい TypeScript ファイルを作成します。

echo "console.log('Hello, TypeScript!');" > app.ts

これにより、コンソールに「Hello, TypeScript!」と記録する単純な TypeScript ファイルが作成されます。

TypeScript を JavaScript にコンパイルする

TypeScript コードはブラウザや Node.js で直接実行することはできません。まず JavaScript にコンパイルする必要があります。ターミナルで次のコマンドを実行すると、TypeScript ファイルをコンパイルできます。

tsc app.ts

このコマンドは、同じディレクトリに app.js という名前の JavaScript ファイルを生成します。これで、Node.js を使用してコンパイルされた JavaScript ファイルを実行できます。

node app.js

コンソールに Hello, TypeScript! と表示されるはずです。

TypeScript の基本型を理解する

TypeScript では、データの形状と構造を定義するのに役立ついくつかの基本的な型が導入されています。一般的な型をいくつか紹介します。

Number: 数値を表します。
String: テキスト値を表します。
Boolean: true または false の値を表します。
Array: 同じ型の値のコレクションを表します。
Tuple: 異なる型の固定数の要素を持つ配列を表します。
Enum: 名前付き定数のコレクションを表します。
Any: 任意の値を保持できる動的な型を表します。

例: TypeScript での型の使用

TypeScript でのさまざまな型の使用方法を示す簡単な例を見てみましょう。

let age: number = 30;
let name: string = "John Doe";
let isStudent: boolean = true;
let hobbies: string[] = ["Reading", "Gaming", "Traveling"];
let person: [string, number] = ["Jane", 25];

enum Color {
  Red,
  Green,
  Blue,
}

let favoriteColor: Color = Color.Green;

console.log(age, name, isStudent, hobbies, person, favoriteColor);

この例では、number、string、boolean、array、tuple、enum などの特定の型を持つ変数を定義します。TypeScript コンパイラは、変数に正しい型が割り当てられていることを確認し、通常の JavaScript では提供されない安全レイヤーを提供します。

結論

TypeScript は、より堅牢で保守しやすいコードを作成したい開発者にとって最適な選択肢です。JavaScript に静的型を追加することで、TypeScript はエラーを早期に検出し、より優れたツールサポートを提供できるようになります。このチュートリアルでは、TypeScript の基本、インストール方法、簡単なプログラムの記述方法、基本的な型の使用方法について学習しました。TypeScript の学習を続けると、開発ワークフローの改善に役立つ強力な機能がさらに多く見つかります。

typescript 初心者チュートリアル javascript コーディングプログラミング学習インストールコンパイル型関数クラスインターフェース列挙型