【初心者向け】TypeScriptとは？JavaScriptとの違いを5分で理解する

この記事で解決すること

「TypeScriptって何？JavaScriptと何が違うの？」

プログラミングを学び始めると、TypeScriptという名前をよく見かけます。この記事では、TypeScriptがなぜ必要なのかを具体例で説明します。

必要なもの

JavaScriptの基本的な知識（変数、関数が分かる程度）
Node.js（インストール済みであれば）

TypeScriptを一言で説明すると

TypeScriptは 「型（かた）が付いたJavaScript」 です。

Microsoftが開発した言語で、JavaScriptに「型」という仕組みを追加したものです。TypeScriptで書いたコードは、最終的にJavaScriptに変換されてブラウザやNode.jsで動きます。

手順

ステップ1: 「型」とは何かを理解する

JavaScriptでは、変数にどんな値でも入れられます。

let name = "田中";
name = 42; // エラーにならない

TypeScriptでは、変数に「この変数には文字列しか入れない」と宣言できます。

let name: string = "田中";
name = 42; // エラーになる！

この : string の部分が「型」です。

ステップ2: 型があると何がうれしいのか

型がないJavaScriptでは、こんなバグが起きます。

function greet(user) {
  return "こんにちは、" + user.name + "さん";
}

// 間違えてnameではなくnameeeと書いてしまった
const result = greet({ nameee: "田中" });
console.log(result); // "こんにちは、undefinedさん"

このコードはエラーにならず、undefined が表示されます。バグに気づきにくいです。

TypeScriptなら、コードを書いた時点でエラーが出ます。

type User = {
  name: string;
};

function greet(user: User): string {
  return "こんにちは、" + user.name + "さん";
}

const result = greet({ nameee: "田中" }); // エラー！nameeeはUserに存在しない

実行する前に 間違いを教えてくれるので、バグを未然に防げます。

ステップ3: 基本的な型を覚える

よく使う型は5つです。

// 文字列
let name: string = "田中";

// 数値
let age: number = 25;

// 真偽値
let isStudent: boolean = true;

// 配列
let scores: number[] = [80, 90, 70];

// オブジェクト
type User = {
  name: string;
  age: number;
};
let user: User = { name: "田中", age: 25 };

ステップ4: 試してみる

TypeScriptを試す方法はいくつかあります。

ブラウザで試す（インストール不要）：

TypeScript Playground（https://www.typescriptlang.org/play）にアクセスすれば、ブラウザ上でTypeScriptを書いて実行できます。

ローカルで試す：

# TypeScriptをインストール
npm install -g typescript

# ファイルを作成
echo 'let message: string = "Hello TypeScript"; console.log(message);' > hello.ts

# コンパイル（JavaScriptに変換）
tsc hello.ts

# 実行
node hello.js

JavaScriptとの関係

TypeScriptはJavaScriptの「上位互換」です。

JavaScriptのコードはそのままTypeScriptとして動く
TypeScriptのコードはコンパイルするとJavaScriptになる
ブラウザやNode.jsが直接実行するのはJavaScript

つまり、JavaScriptの知識は無駄になりません。TypeScriptはJavaScriptに「安全装置」を付けたものと考えてください。

まとめと次のステップ

TypeScriptは「型が付いたJavaScript」
型があると、バグを実行前に発見できる
基本の型は string number boolean 配列 オブジェクト の5つ
JavaScriptの知識はそのまま活かせる

まずはTypeScript Playgroundで、自分のJavaScriptコードに型を付けてみてください。