アルアカ - Arcadia Academia

Arcadia Academiaは「エンジニアリングを楽しむ」を合言葉に日本のデジタル競争力を高めることをミッションとするテックコミュニティです。

TypeScriptの基本を初心者向けに解説

Featured image of the post

TypeScriptは、JavaScriptに型を追加したプログラミング言語です。JavaScriptのスーパーセットであり、JavaScriptコードはそのままTypeScriptとして動作しますが、TypeScriptでは型注釈(Type Annotations)を使用することで、コードの安全性や可読性を向上させることができます。

1. 型注釈の基本

TypeScriptでは、変数や関数の引数、戻り値に型を指定できます。これにより、型のミスマッチによるエラーを防ぐことができます。

let message: string = "Hello, TypeScript!";
let age: number = 25;

上記のように、変数に型を指定することで、その型以外のデータを代入しようとするとエラーが発生します。例えば、age変数に文字列を代入しようとするとエラーになります。

// これはエラーになる
age = "twenty-five"; 
2. インターフェース

TypeScriptでは、オブジェクトの型を定義するために**インターフェース(interface)**を使用します。これにより、オブジェクトの構造を明確に定義でき、誤ったプロパティの追加や型のミスマッチを防ぐことができます。

interface User {
  name: string;
  age: number;
}

let user: User = {
  name: "John",
  age: 30,
};

インターフェースを使うことで、オブジェクトのプロパティやその型を厳密に管理できるため、コードの信頼性が向上します。

3. 関数の型

関数にも型を定義することができます。引数や戻り値に型を指定することで、意図しない値が使用されることを防ぎます。

function greet(name: string): string {
  return `Hello, ${name}`;
}

console.log(greet("Alice")); // "Hello, Alice"
// greet(42); // エラーになる

この例では、greet関数の引数としてstring型を指定しています。そのため、数値を渡すとエラーが発生します。

4. クラスとTypeScript

TypeScriptはクラスベースのオブジェクト指向プログラミングにも対応しています。クラスに型を定義することで、メンバ変数やメソッドの型を明確にできます。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  introduce(): string {
    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
  }
}

let person = new Person("Alice", 25);
console.log(person.introduce());

TypeScriptでは、クラスに対して型の定義を行うことで、コードの可読性や保守性が向上し、バグの発生を抑えます。

5. ジェネリクス

TypeScriptのもう一つの強力な機能が**ジェネリクス(Generics)**です。ジェネリクスを使うことで、関数やクラスを柔軟にしつつ、型安全性を保つことができます。

function identity<T>(arg: T): T {
  return arg;
}

console.log(identity<number>(10)); // 10
console.log(identity<string>("TypeScript")); // "TypeScript"

ジェネリクスを使うと、様々な型を受け入れる関数やクラスを作成でき、再利用性が高まります。

6. 型推論

TypeScriptでは、明示的に型を指定しなくても、コンパイラが自動的に型を推測することができます。これを型推論と呼びます。

let count = 10; // TypeScriptは自動的にnumber型と推論する

型推論はコードの可読性を高め、必要に応じて型を明示的に定義することで、バグを防ぐことができます。

まとめ

TypeScriptは、JavaScriptに型システムを追加することで、コードの安全性や信頼性を向上させます。型注釈やインターフェース、ジェネリクスなどの機能を使うことで、大規模なプロジェクトでも保守性が高く、エラーの少ないコードを書くことができます。初心者のうちは基本的な型の使用や、インターフェース、クラスなどを使いながら慣れていきましょう。

あなたを爆速で成長させるメンタリングプログラムはこちらから↓↓

RUNTEQ(ランテック) - 実践型Webエンジニア養成プログラミングスクールの入会