TypeScript基礎

TypeScriptは、JavaScriptに静的型付けを追加することで、より堅牢なコードを書けるようにしたプログラミング言語です。TypeScriptはJavaScriptのスーパーセットとして設計されているため、既存のJavaScriptに型の概念を導入するだけで、開発の効率と品質を高められます。本記事では、TypeScriptの基本的な使い方と重要な概念を紹介します。

特にTypescript×Reactは現在多くの企業に利用されています。
Reactについての記事もだしていますので、そちらも読んでいただければ嬉しいです。

1. TypeScriptの特徴とメリット

静的型付け: 変数や関数に型を指定することで、実行前に型のミスを検出できます。
JavaScriptとの互換性: すべてのJavaScriptコードは有効なTypeScriptコードです。
開発効率の向上: 開発中にエラーを発見しやすく、保守が容易になります。

2. TypeScriptのインストールと環境構築

TypeScriptの環境を構築するには、Node.jsがインストールされている必要があります。

インストール手順
TypeScriptのインストール

npm install -g typescript

バージョン確認

tsc --version

3. 型の基本

(1) 基本的な型の定義
TypeScriptでは、変数に対して型を指定します。

let message: string = "Hello, TypeScript!";
let count: number = 42;
let isActive: boolean = true;
string: 文字列型
number: 数値型
boolean: 真偽値型

(2) 配列とタプル
配列は要素の型を指定します。

let numbers: number[] = [1, 2, 3, 4];
let user: [string, number] = ["Alice", 25];  // タプル型

(3) オブジェクトの型
オブジェクトは、そのプロパティに型を指定します。

let person: { name: string; age: number } = {
  name: "Bob",
  age: 30,
};

4. 関数の型定義

(1) 基本的な関数の型指定
関数の引数や戻り値の型も定義できます。

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

(2) オプション引数
引数が必須ではない場合、?を使います。

function greet(name: string, greeting?: string): string {
  return `${greeting || "Hello"}, ${name}!`;
}

5. インターフェース

インターフェースは、オブジェクトの構造を定義します。

interface User {
  id: number;
  name: string;
  isActive: boolean;
}

let user: User = {
  id: 1,
  name: "Taro",
  isActive: true,
};

6. クラスと継承

TypeScriptでは、オブジェクト指向プログラミングがサポートされています。

class Animal {
  name: string;

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

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof! Woof!");
  }
}

let dog = new Dog("Rex");
dog.bark();
dog.move(10);

7. 型推論と型ガード

(1) 型推論
TypeScriptは、初期値から型を推論します。

let age = 25;  // number型と推論される

(2) 型ガード
typeof演算子を使って型をチェックし、実行時のエラーを防ぎます。

function isString(value: any): value is string {
  return typeof value === "string";
}

8. ジェネリクス（Generics）

ジェネリクスは、型の再利用を可能にします。

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

let result = identity<number>(42);

9. TypeScriptのコンパイルと実行

コンパイル
TypeScriptファイル（hello.ts）をJavaScriptに変換します。

tsc hello.ts

node hello.js

10. まとめ

学習のポイントまとめ:

基本の型から始め、関数、クラス、インターフェースを活用する。
TypeScriptの型チェック機能でエラーを未然に防ぐ。
Reactなどのフレームワークと組み合わせて実践的な開発を行う。
これからJavaScriptを学ぶ方、または既にJavaScriptを使っている方も、TypeScriptを導入することで、開発の効率と品質が向上します。

最後までよんでいただきありがとうございます。
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです！