TypeScript初心者必見！ゼロから学べる実践入門

はじめに

TypeScriptはJavaScriptに型付けを加えた強力な言語で、より堅牢で保守性の高いコードを書くのに役立ちます。

TypeScriptとは？

Microsoftが開発したJavaScriptのスーパーセットで、静的型付けを提供します。
コンパイル時に型のエラーを検出しやすくなり、コードの品質向上とバグの発見が容易になります。

関数と型

関数の引数や戻り値に型を指定することもできます。これにより、関数の使い方がより明確になり、エラーの予防になります。

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

クラスとインターフェース

TypeScriptでは、オブジェクト指向プログラミングのためのクラスやインターフェースもサポートしています。

.クラスの例

class Person {
    name: string;
    age: number;

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

    greet(): string {
        return `Hello, my name is ${this.name}.`;
    }
}

.インターフェースの例

interface Address {
    street: string;
    city: string;
}

const address: Address = {
    street: "123 Main St",
    city: "Springfield"
};

型推論と型ガード

ypeScriptは型推論を行い、変数の型を自動的に推測します。また、型ガードを使うことで、より詳細な型チェックが可能です。

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

let unknownValue: any = "This is a string";

if (isString(unknownValue)) {
    console.log(unknownValue.toUpperCase());
}

ESLintとPrettier

コードの品質とフォーマットを保つために、ESLintとPrettierを使用するのが一般的です。
ESLint:コードの静的解析ツール
Prettier:コードフォーマッター

.ESLintの設定

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.jsonの設定例

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

.prettierrcの設定例

{
  "semi": false,
  "singleQuote": true
}

まとめ

TypeScriptを使うことでJavaScriptの動的型付けの欠点を補い、より堅牢でエラーの少ないコードを書くことができます。