TypeScript超入門～最初に知るべき5つのポイント～

概要

フロントエンドでの利用はもちろん、バックエンドもNode.jsのエコシステムの広がりで適用範囲が広いJavaScript。

しかし、少し複雑なデータを扱うプログラムを書いたり、チーム開発で利用していると、エラーが起きやすくて困ること、ありませんか？

そんな時に役立つのがTypeScriptです！

TypeScriptは、JavaScriptに「型」という概念を追加した言語で、コードのミスを事前に防ぐ仕組みがあり、より安全にプログラムを書けるようにしてくれます。

この記事では、TypeScriptを初めて触る人が、まず覚えるべき基本的なポイントを5つ紹介します。
※環境構築についてはこの記事では記述しません。

1. TypeScriptとは？

TypeScriptは、JavaScriptをパワーアップさせた言語です。
（わかりやすさに重きを置いた表現であり、正確ではないことは認識しています）

JavaScriptに「型」を追加することで、コードを書く際に、変数や関数がどんなデータを持つのかを明確にできます。

これにより、プログラムの間違いを起きにくくし、開発効率を上げることができます。

なお、TypeScriptで書いたコードは、最終的にはJavaScriptに変換されて実行されます。
したがって、TypeScriptという新しい言語体系があるわけではありません。

2. 型って何？

TypeScriptの最大の特徴は「型」です。

「型」とは、変数に格納できるデータの種類を指定するものです。

例えば、number型は数値、string型は文字列、boolean型は真偽値（true/false）を格納できます。

// number型
let age: number = 20;

// string型
let name: string = "田中";

// boolean型
let isChecked: boolean = true;

このように型を指定することで、意図しない間違ったデータの代入を防ぎ、プログラムの安定性を高めることができます。

3. 型はどうやって使うの？

変数に型を指定するには、変数名の後にコロン（:）と型名を記述します。

let age: number = 20; 

関数の引数や戻り値にも型を指定できます。

// 引数aとbはnumber型、戻り値もnumber型
function add(a: number, b: number): number {
  return a + b;
}

配列やオブジェクトにも型を指定できます。

配列の場合は、要素の型を角括弧（[]）で囲みます。

// number型の配列
let numbers: number[] = [1, 2, 3]; 

オブジェクトの場合は、波括弧（{}）で囲み、プロパティ名と型をコロン（:）で区切って指定します。

// nameプロパティがstring型、ageプロパティがnumber型のオブジェクト
let user: { name: string; age: number } = { 
  name: "佐藤",
  age: 30
};

4. 型エイリアスで型に名前をつけよう

複雑な型を何度も使う場合は、型エイリアスを使うと便利です。

型エイリアスは、typeキーワードを使って型に名前をつけることができます。

// User型を定義
type User = { 
  name: string; 
  age: number 
}

// User型を使う
let user: User = {
  name: "佐藤",
  age: 30
}

型エイリアスを使うことで、型を再利用することができ、コードの可読性が向上します。

5. エラーが見つけやすくする

TypeScriptを使うと、コードを書く段階でエラーを見つけやすくなります。

例えば、string型を指定した変数に数値を代入しようとすると、VSCodeなどのエディタがエラーを表示してくれます。
（したがって、メモ帳などのシンプルなテキストエディタで開発してしまうと、メリットを十分活かせないです）

これにより、実行前にエラーが起きる要因を防ぐことができ、開発効率が向上します。

まとめ

この記事では、TypeScriptの基礎的なポイントを5つ解説しました。

TypeScriptは、JavaScriptをより安全に、効率的に書くための強力なプログラミング言語です。

ぜひ、TypeScriptを学んで、より良いプログラム開発を目指しましょう！