TypeScriptはめんどくさい？対策をわかりやすく解説

この記事ではTypeScriptのめんどくさく感じてしまうポイントと、それをどのように解決するかについて紹介したいと思います。

TypeScript vs JavaScript: 初心者が知るべき違いと使い分け

初心者向けにTypeScriptとJavaScriptの違いを解説。型システム、オブジェクト指向、開発ツール、コンパイルがポイント。状況に応じて適切な言語を選択。

gizanbeak.com

TypeScriptのめんどくささ

まずはTypeScriptの面倒くささについて説明しますね。

型の厳密さ

TypeScriptはJavaScriptに型定義追加した厳格な言語です。
それ故にめんどくさいと感じてしまうこともあります。

例えば以下のようなコードでは、name 変数に string 型が指定されていますが、後に number 型の値を代入しようとしています。
そのためこの場合はエラーが発生します。

let name: string = "ジョン";
name = 123; // エラー

TypeScript vs JavaScript: 初心者が知るべき違いと使い分け

gizanbeak.com

interfaceとtypeの定義

TypeScriptではオブジェクトの構造を予め interface や type で定義する必要があります。

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

let john: Person = {
  name: "ジョン",
  age: 30,
  job: "開発者", // エラー
};

この例では Person インターフェースは、name と age のみを定義していますが、job プロパティも含めたオブジェクトを代入しようとしています。

そのため、この場合はエラーが発生します。
もし job プロパティを使用したい場合は予め宣言しておく必要があるわけですね。

TypeScriptのめんどくささへの対策

それでは、次はTypeScriptのめんどくささへの対策を見ていきましょう！

任意の型（any）を使う

型の厳密さを緩和する方法として any 型を使うことができます。

let something: any = "Hello!";
something = 123; // エラーにならない

ただし、any 型を使うことで型チェックを回避できますが、型安全性が失われることに注意してください。

そのため基本的には any は使わないようにすることがおすすめです。
ただ、方法の１つとして覚えておくと良いです。

オプショナルプロパティ

インターフェースや型の定義でオプショナルプロパティを使うことができます。

以下の例を見てみましょう。

interface Person {
  name: string;
  age: number;
  job?: string;
}

let john: Person = {
  name: "ジョン",
  age: 30,
  job: "開発者", // エラーにならない
};

このコードでは job プロパティに ? をつけることでオプショナルプロパティとして定義しています。
これにより job プロパティを Person interfaceへ任意で含めるかどうかを選択できます。

TypeScriptのハテナマークとオプショナルチェーンの使い方

TypeScriptのハテナマークの意味とオプショナルチェーンの活用法を解説！コードの安全性と読みやすさを向上させましょう。

gizanbeak.com

TypeScriptのメリット

以上のようなめんどくささがある一方で、TypeScriptにはたくさんのメリットもあります。

その一部を紹介したいと思います。

型安全性

TypeScriptは型安全性が高いことでコンパイル時にエラーを検出でき、実行時のエラーを減らすことができます。
どこでエラーが起きているのかわからない、という状況は避けたいですよね。

function add(a: number, b: number): number {
  return a + b;
}

let sum = add(1, "2"); // エラー

上記のコードでは、add 関数に number 型でない引数 "2" を渡そうとしているため型エラーが発生します。
このように間違っている箇所をエラーとして教えてくれるため、型安全性はバグを防ぐ役割があります。

自動補完とリファクタリング

他にも、型情報があることでエディタが自動補完やリファクタリングをサポートしやすくなるというメリットがあります。

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

function greet(person: Person): string {
  return `こんにちは！  ${person.name}!`;
}

let john: Person = {
  name: "ジョン",
  age: 30,
};

console.log(greet(john)); // "こんにちは！ ジョン"

このコードでは Person 型の引数を受け取り、挨拶を出力する greet 関数を定義しています。

console.log(greet(j まで入力するとエディタは自動的に person オブジェクトのプロパティである john を認識して、自動的に補完してくれるためタイプミスや記述量が減ることで開発効率が上がります。

ここで上げたメリット以外にもTypeScriptには様々なメリットが存在します！

まとめ

今回はTypeScriptのめんどくささとその対策について紹介しました。

型の厳密さやインターフェースの定義が難しいと感じることもあるでしょうが、それらを解決する方法も存在します。

また、型安全性やエディタのサポートなどのTypeScriptのメリットも忘れずに把握しておくことが重要です。

TypeScriptは初めて触るときには少しハードルが高く感じられるかもしれませんが、慣れることで間違いなく開発の効率や品質を向上させることができます。

ぜひ今回学んだ知識を活かしてTypeScriptの世界を楽しんでくださいね！

TypeScript入門ガイド2023｜ハンズオンで学ぶ基本技術

TypeScriptを初めて学ぶ方向けのハンズオン形式チュートリアル。基本からクラスまで楽しく学びましょう！

gizanbeak.com

Gizanbeak