Typescriptを学ぶ（超基本編）
Typescriptは、JavaScriptに型付け機能を追加するプログラミング言語であり、開発者がコードをより正確かつ安全に記述できるようになります。本記事では、Typescriptを初めて学ぶ人々に向けた基本的な情報を提供します😁
Typescriptの基礎
Typescriptは、JavaScriptに型情報を追加することで、JavaScriptの欠点を解決することを目的としています。JavaScriptには、型情報がないため、変数や関数の引数がどのような型であるか、また、どのような型の戻り値を持つかを理解することが難しい場合があります。Typescriptを使うことで、これらの問題を解決することができます。
Typescriptは、JavaScriptに基づいています。つまり、Typescriptのコードは、JavaScriptのコードとして実行することができます。そのため、Typescriptを学ぶ前に、JavaScriptの基礎を学ぶことが重要です。
Typescriptのインストール
Typescriptを使うには、まずTypescriptをインストールする必要があります。Typescriptは、npmパッケージとして提供されているため、npmを使ってインストールすることができます。
npm install -g typescript
これにより、Typescriptコンパイラがグローバルにインストールされます。Typescriptコンパイラを使用するには、コマンドラインでtscを実行します。
Typescriptのコンパイル
Typescriptコードは、JavaScriptコードにコンパイルする必要があります。コンパイルするには、次のようにtscコマンドを実行します。
tsc app.ts
これにより、app.tsファイルがJavaScriptコードにコンパイルされ、app.jsファイルが生成されます。Typescriptのコンパイル時には、コンパイルエラーが発生する可能性があるため、コンパイルエラーに注意してください。
Typescriptの基本的な構文
Typescriptには、JavaScriptに基づいた基本的な構文があります。変数宣言、関数定義、オブジェクト、配列、条件分岐、ループなどを使用することができます。また、Typescriptには、インターフェース、列挙型、クラスなどの機能が追加されています。
変数の宣言
変数を宣言するには、letまたはconstキーワードを使用します。
let message: string = "Hello, World!";
const version: number = 1.0;
関数の定義
関数を定義するには、次のように記述します。
function add(x: number, y: number): number {
return x + y;
}
ここで、関数名はadd、引数はxとyで、それぞれの型はnumber、戻り値の型はnumberと指定しています。
オブジェクト
オブジェクトを定義するには、次のように記述します。
let user: { name: string, age: number } = {
name: "Alice",
age: 30
};
ここで、userはオブジェクトであり、nameとageはそれぞれのプロパティ名で、型はstringとnumberです。
配列
配列を定義するには、次のように記述します。
let numbers: number[] = [1, 2, 3];
ここで、numbersは数値の配列です。
条件分岐
条件分岐を記述するには、次のように記述します。
if (x > y) {
console.log("x is greater than y");
} else {
console.log("y is greater than or equal to x");
}
ここで、xとyは数値です。
ループ
ループを記述するには、次のように記述します。
for (let i = 0; i < 10; i++) {
console.log(i);
}
ここで、iは数値の変数であり、0から9までの数値を順に表示します。
インターフェース
インターフェースを定義するには、次のように記述します。
interface User {
name: string;
age: number;
}
ここで、Userはインターフェースであり、nameとageはそれぞれのプロパティ名で、型はstringとnumberです。
列挙型
列挙型を定義するには、次のように記述します。
enum Color {
Red,
Green,
Blue
}
ここで、Colorは列挙型であり、Red、Green、Blueはそれぞれの要素名です。
クラス
クラスを定義するには、次のように記述します。
class User {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name}. I am ${this.age} years old.`);
}
}
ここで、Userはクラスであり、nameとageはそれぞれのプロパティ名
で、constructorはクラスのコンストラクタであり、greetはメソッドです。
モジュール
モジュールを定義するには、次のように記述します。
export function add(x: number, y: number): number {
return x + y;
}
ここで、addは関数であり、exportキーワードを使用して、他のファイルからもアクセスできるようにしています。
型エイリアス
型エイリアスを定義するには、次のように記述します。
type Age = number;
ここで、Ageは型エイリアスであり、numberと同じ意味を持ちます。
ジェネリックス
ジェネリックスを使用するには、次のように記述します。
function identity<T>(arg: T): T {
return arg;
}
ここで、identityはジェネリック関数であり、Tは型パラメータです。
結論
この記事では、TypeScriptの基本的な構文について説明しました。TypeScriptはJavaScriptの上に構築された静的型付け言語であり、JavaScriptに比べてより安全な開発が可能です。これらの基本的な概念をマスターすることで、より複雑なアプリケーションを開発するための基礎を身につけることができます。
Discussion