TypeScript | 基礎文法：環境・前提理解 – TypeScriptとは何か

TypeScriptとは何か

TypeScriptは「JavaScriptをもっと書きやすく、安全にしたバージョン」と考えるとイメージしやすいです。技術的には「JavaScriptのスーパーセット（上位互換の言語）」であり、JavaScriptの文法はすべてそのまま使えますが、そこに「型（type）」という仕組みや、より大規模開発向けの機能が追加されています。
もう少し噛み砕くと、「JavaScriptに“間違いを事前に教えてくれる仕組み”を足したもの」がTypeScriptです。コードを実行する前の段階で、「ここ、間違ってるよ」「この値、型が合ってないよ」と教えてくれるので、バグを早い段階で潰せます。

JavaScriptとの関係

TypeScriptは「JavaScriptが読めるし、書けるし、さらに機能を足した言語」です。JavaScriptで書けるコードは、基本的にそのままTypeScriptとしても有効です。TypeScriptで書いたコードは、最終的に「普通のJavaScript」に変換（コンパイル）されてからブラウザやNode.jsで実行されます。
つまり、TypeScript自体が直接ブラウザで動くわけではなく、「TypeScript → JavaScript」に変換され、そのJavaScriptが実行される、という二段構えの仕組みになっています。

「静的型付け」という一番大事なポイント

TypeScriptの一番の特徴は「静的型付け（static typing）」です。
静的型付けとは、「変数や関数の引数・戻り値などに“型”を決めておき、その型に合わない使い方をすると、実行前にエラーとして教えてくれる仕組み」です。JavaScriptは型がゆるく、実行してみるまで気づかないバグが多くなりがちですが、TypeScriptはそれを事前にチェックしてくれます。

簡単なイメージ例

次のようなJavaScriptコードを考えてみます。

let age = 20;
age = "二十歳";

let age = 20;
age = "二十歳";

JavaScriptではこれは実行できてしまいます（ageが途中から数値から文字列に変わる）。
TypeScriptでは、最初に age に数値を入れた時点で「これは number 型」と推論されるので、あとから文字列 "二十歳" を代入しようとすると、コンパイル時にエラーになります。
この「おかしな代入を事前に止めてくれる」ことが、TypeScriptの大きな価値です。

TypeScriptを使う前に知っておきたい前提

JavaScriptの基礎が前提になる理由

TypeScriptはJavaScriptのスーパーセットなので、「JavaScriptがまったく分からない状態」だと、TypeScriptの学習はかなり苦しくなります。
変数、関数、if文、for文、配列、オブジェクトといったJavaScriptの基本文法は、少なくとも「なんとなく読める」レベルにはしておくと、TypeScriptの理解が一気に楽になります。

TypeScriptの動き方の流れ

TypeScriptのコードは、そのままブラウザで動くわけではありません。流れは次のようになります。

1. TypeScriptでコードを書く（.tsファイル）。
2. TypeScriptコンパイラ（tsc）でJavaScriptに変換する。
3. 変換されたJavaScript（.jsファイル）をブラウザやNode.jsで実行する。

この「コンパイル」というステップの中で、型チェックやエラー検出が行われます。

開発環境のざっくりイメージ

初心者向けに、最低限イメージしておきたい環境は次のようなものです。

• エディタ（VS Codeなど）
• Node.js（TypeScriptコンパイラを動かすため）
• TypeScriptコンパイラ（npm install -g typescript などで導入）

VS CodeはTypeScriptとの相性が非常によく、入力補完やエラー表示が強力なので、初心者にもおすすめです。

TypeScriptの超基本文法

ここからは、プログラミング初心者向けに、TypeScriptの「最低限これだけは押さえたい」文法を、例題付きで解説します。

変数宣言と型注釈

TypeScriptでは、変数に「型注釈（type annotation）」をつけることができます。

let age: number = 20;
let name: string = "Taro";
let isStudent: boolean = true;

let age: number = 20;
let name: string = "Taro";
let isStudent: boolean = true;

age: number のように、変数名の後ろに : 型名 を書くことで、「この変数はこの型の値しか入れません」と宣言できます。
これにより、age に文字列を代入しようとするとコンパイルエラーになります。これは「型安全性（type safety）」を高めるための重要な仕組みです。

型推論という便利な仕組み

毎回すべての変数に型を書く必要はありません。TypeScriptには「型推論（type inference）」があり、初期値から自動的に型を推測してくれます。

let age = 20;      // 自動的に number 型と推論される
let name = "Taro"; // 自動的に string 型と推論される

let age = 20;      // 自動的に number 型と推論される
let name = "Taro"; // 自動的に string 型と推論される

この場合も、あとから age = "二十歳"; と書くとエラーになります。
「最初にどういう値を入れたか」が、その変数の型を決める重要なヒントになる、という感覚を持っておくと理解しやすいです。

基本的な型：number, string, boolean

TypeScriptの基本型は、JavaScriptのプリミティブ型とほぼ同じです。

let price: number = 1200;
let productName: string = "Notebook";
let inStock: boolean = true;

let price: number = 1200;
let productName: string = "Notebook";
let inStock: boolean = true;

number は数値、string は文字列、boolean は真偽値（true/false）を表します。
初心者のうちは、「変数にどんな種類の値を入れたいか」を意識して、型をつけてみる練習をすると、型の感覚が身についてきます。

配列とオブジェクトの型

配列の型

配列には「この配列には何の型の要素が入るのか」を指定できます。

let scores: number[] = [80, 90, 75];
let names: string[] = ["Taro", "Hanako"];

let scores: number[] = [80, 90, 75];
let names: string[] = ["Taro", "Hanako"];

number[] は「数値の配列」、string[] は「文字列の配列」です。
scores に文字列を混ぜようとすると、コンパイル時にエラーになります。

オブジェクトの型

オブジェクトには「このプロパティはこの型」という形で型を定義できます。

let user: {
  name: string;
  age: number;
  isStudent: boolean;
} = {
  name: "Taro",
  age: 20,
  isStudent: true
};

let user: {
  name: string;
  age: number;
  isStudent: boolean;
} = {
  name: "Taro",
  age: 20,
  isStudent: true
};

この場合、user.name は必ず文字列、user.age は必ず数値、user.isStudent は必ず真偽値でなければなりません。
プロパティ名を間違えたり、型の違う値を入れようとすると、コンパイル時にエラーになります。

関数と型

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

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

const result = add(3, 5); // result は number 型

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

const result = add(3, 5); // result は number 型

(a: number, b: number): number の部分で、「aとbはnumber型を受け取り、戻り値もnumber型である」ということを表しています。
もし add("3", 5) のように文字列を渡そうとすると、コンパイル時にエラーになります。
これにより、「関数の使い方の間違い」を早い段階で防ぐことができます。

例題：自己紹介文を作る関数

初心者向けに、少し実用的な例を見てみましょう。

function introduce(name: string, age: number): string {
  return `私は${name}です。年齢は${age}歳です。`;
}

const message = introduce("Taro", 20);
// message: "私はTaroです。年齢は20歳です。"

function introduce(name: string, age: number): string {
  return `私は${name}です。年齢は${age}歳です。`;
}

const message = introduce("Taro", 20);
// message: "私はTaroです。年齢は20歳です。"

ここでは、name は文字列、age は数値、戻り値は文字列と明示しています。
もし introduce(20, "Taro") のように順番や型を間違えると、コンパイル時にエラーになります。
「関数の契約書を型で書いている」とイメージすると分かりやすいです。

TypeScriptを使うと何が嬉しいのか（初心者目線）

エラーを「実行前」に見つけられる

JavaScriptでは、コードを実行して初めて「ここでエラーが出た」と気づくことが多いです。TypeScriptでは、コンパイル時に型チェックが行われるため、「実行する前に」多くのミスを発見できます。
初心者ほど、「スペルミス」「型の勘違い」「引数の渡し間違い」などのミスが多くなりがちなので、TypeScriptはむしろ初心者の味方になってくれます。

エディタの補完がめちゃくちゃ賢くなる

型情報があることで、エディタ（特にVS Code）の補完機能が非常に強力になります。
オブジェクトのプロパティ名や関数の引数、戻り値の型などがエディタ上で分かるので、「何が使えるのか」「何を渡せばいいのか」が視覚的に理解しやすくなります。
これは、独学で学んでいる初心者にとって、大きな助けになります。

大きなコードでも迷子になりにくい

TypeScriptはもともと「大規模なJavaScriptアプリケーションを安全に開発する」ために作られました。
型情報があることで、コードの構造がはっきりし、他人の書いたコードを読むときも「この関数は何を受け取って、何を返すのか」がすぐに分かります。
初心者のうちからTypeScriptに慣れておくと、「読みやすいコード」「壊れにくいコード」を書く感覚が自然と身についていきます。

まとめと次の一歩

TypeScriptは、ざっくり言うと「JavaScriptに型という安全装置をつけた言語」であり、静的型付けによってバグを早期に発見しやすくし、コードの可読性と保守性を高めてくれます。
初心者にとっても、「何が間違いなのかをコンパイル時に教えてくれる先生」のような存在になり得ます。

次の一歩としては、次のような流れで学ぶとスムーズです。

• JavaScriptの基本文法（変数、関数、if、for、配列、オブジェクト）をざっと復習する。
• TypeScriptの環境をVS Code＋Node.jsで用意し、tsc でコンパイルする流れを体験する。
• 今日紹介したような「変数の型」「配列・オブジェクトの型」「関数の型」を、自分で小さなサンプルを書きながら試してみる。