TypeScriptの型まとめ！安全で保守性の高いコードを書く方法

1. TypeScriptの「型（Type）」とは？

1. TypeScriptの「型（Type）」とは？

TypeScript（タイプスクリプト）は、JavaScriptに「型」という仕組みを追加したプログラミング言語です。型（type）とは、変数や関数の中に入る値が「どんな種類のデータなのか」をあらかじめ示しておく目印のようなものです。

たとえば「これは数字」「これは文字」「これは true / false のどちらか」といった情報をコードに書いておくことで、使い方のミスに気づきやすくなります。人に例えるなら、「この箱にはリンゴしか入れません」とラベルを貼っておくようなイメージです。

型を使うことで、間違った代入や処理を早い段階で防げるため、結果的に安全で保守性（あとから直しやすい）の高いコードにつながります。

let count: number = 10;
// 数字しか入らないと決めているので、安心して使える

このように「何が入る変数なのか」を最初に決めておくのが、TypeScriptの型の基本的な考え方です。プログラミング未経験の方でも、ルールが見える分、コードを理解しやすくなります。

2. よく使う基本の型

2. よく使う基本の型

TypeScriptでよく使う基本的な型を紹介します。まずはこの5つをおさえましょう。型は「この変数には、この種類の値を入れます」という約束なので、最初はラベル付けだと思うと理解しやすいです。

• number型： 数値（たとえば 10 や 3.14）
• string型： 文字列（たとえば "こんにちは"）
• boolean型： 真偽値（true または false）
• undefined型： 値がまだ「定義されていない」状態
• null型： 意図的に「何もない」ことを表す

「numberとstringは何となく分かるけど、undefinedとnullが難しい…」となりがちなので、ここではまずよく見る型として名前と役割だけ押さえておけばOKです。細かい違いは、使っていくうちに自然と慣れていきます。

数値型（number）の例

let price: number = 1200;
// priceには数字だけを入れる、という意味

文字列型（string）の例

let message: string = "こんにちは！";
// messageには文字だけを入れる、という意味

真偽値型（boolean）の例

let isOpen: boolean = true;
// true/falseのどちらかだけを入れる、という意味

このように型を書いておくと、「ここは数値」「ここは文字列」と判断しやすくなり、コードの読み間違いも減ります。それぞれの使い方を見ていきましょう。

3. 型をつけるメリット

3. 型をつけるメリット

TypeScriptで型をつける一番のメリットは、「間違いに早く気づける」ことです。JavaScriptだと実行してみるまで気づきにくいミスでも、TypeScriptならコードを書いている時点で「それは違うよ」と教えてくれます。たとえば数値を入れるつもりの変数に文字列を入れようとした瞬間に、エラーとして表示されるイメージです。

もうひとつは、コードの意味がはっきりする点です。「この変数には何が入るのか」「この関数は何を受け取るのか」が型で見えるので、あとから読み返したときや、チーム開発で他の人が読んだときも理解しやすくなります。結果として、修正や追加もしやすくなり、保守性が上がります。

型によるエラーの防止例

let age: number = 25;

// もし間違って文字列を入れようとすると、TypeScriptがエラーで教えてくれる
// age = "二十五";

このように型は、プログラミング初心者にとっても「うっかりミス」を減らす助けになります。最初は少し面倒に感じても、慣れてくると“安心して書ける”感覚が出てきます。

4. 配列とオブジェクトにも型をつけよう

4. 配列とオブジェクトにも型をつけよう

TypeScriptの型は、1つの値を入れる変数だけでなく、配列（リスト）やオブジェクト（複数の情報をまとめたもの）にも付けられます。ここを押さえると、「中身がバラバラで混乱する」「どんなデータが入っているのか分からない」といった悩みが減り、読みやすいコードに近づきます。

配列は「同じ種類のデータが並ぶもの」なので、number[]のように書いて「数値だけの配列」と決められます。オブジェクトは「名前と年齢」などのように、項目ごとに型を決めておくのがポイントです。

配列の型（number[]）の例

let scores: number[] = [80, 90, 75];
// scoresには数字だけが入る配列、という意味

オブジェクトの型の例

let user: { name: string; age: number } = {
    name: "Taro",
    age: 30
};
// userの中では、nameは文字列、ageは数値、と決まっている

このように型を書いておくと、「配列に文字が混ざってしまった」「年齢に文字列を入れてしまった」といったミスを防ぎやすくなります。特にデータを扱う場面では、型があるだけで安心感がぐっと増します。

5. 型推論（かたすいろん）とは？

5. 型推論（かたすいろん）とは？

TypeScriptには型推論という便利な仕組みがあります。これは、変数に入れた値を見て「これはこの型だね」とTypeScriptが自動で判断してくれる機能です。最初から全部に型を書くのが大変…というときでも、型推論のおかげで自然な書き方ができます。

たとえば、文字を代入した変数は「文字列（string）」、数字を代入した変数は「数値（number）」というように決まります。言いかえると、最初に入れた値が、その変数のルール（型）になるイメージです。

型推論の例

let city = "Tokyo"; // 自動的にstring型と判断される
let year = 2025;    // 自動的にnumber型と判断される

このように、型を書かなくてもTypeScriptが判断してくれるので、初心者でも書き始めやすいのがメリットです。ただし、型推論に任せきりだと「この変数は何のためのもの？」が伝わりにくい場面もあります。特にチーム開発や後から読み返すときは、大事なところだけ型を明示すると、より安全で読みやすいコードになります。

6. any型に注意しよう

6. any型に注意しよう

any型は、「どんな型でもOK」という意味の型です。とりあえず動かしたいときに便利に見えますが、実はTypeScriptの“型で守る仕組み”を外してしまうのが注意点です。anyを使うと、間違った代入やミスがあってもエラーになりにくく、JavaScriptと同じように実行してから気づくことが増えてしまいます。

イメージとしては、「この箱にはリンゴだけ」とラベルを貼る代わりに、「何でも入れていい箱」にしてしまう感じです。最初は楽でも、後から中身が分からなくなって困りやすいです。

any型の例

let data: any = 100;

data = "文字列でもOK";
data = true; // true/falseでもOK

このように何でも入れられる一方で、dataを使う側は「今なにが入っているの？」が分かりません。結果として、文字列だと思って処理したら実は数値だった…というバグにつながりがちです。

どうしても一時的に使うなら、あとで型を決め直す前提にして、むやみに広げないのがコツです。基本は、分かる範囲で型を付けておくほうが安全で読みやすいコードになります。

7. 型を使って関数も安全に！

7. 型を使って関数も安全に！

TypeScriptでは、関数の引数（ひきすう）や戻り値（もどりち）にも型をつけられます。これをしておくと、「この関数は何を受け取って、何を返すのか」がコードだけで分かるようになり、呼び出す側も安心して使えます。

たとえば引数が文字列なのに数値を渡してしまう、といったミスは初心者がよくやりがちです。TypeScriptなら、型を書いておくだけで書いている途中にエラーで気づけるので、実行してから慌てる場面が減ります。

関数の型の例

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

この例では、name: stringが「引数は文字列だけ」と決める部分で、: stringが「戻り値も文字列」と決める部分です。つまり、入力と出力のルールを先に決めておくイメージです。

もう少し分かりやすい例（数値を受け取って数値を返す）

function addTax(price: number): number {
    return price * 1.1;
}

addTax(1000);   // OK
// addTax("1000"); // これはエラー（文字列は渡せない）

関数に型をつけておくと、使い方の間違いを減らせるだけでなく、関数の説明書としても役立ちます。特に関数は何度も使い回すことが多いので、型を付ける習慣がつくとコード全体がぐっと読みやすくなります。

まとめ

まとめ

ここまでの流れを振り返ると、タイプスクリプトの型という仕組みは、とても身近な考え方であることがよくわかります。はじめて学ぶ人にとって、専門的なことばや記号が並んでいるとむずかしそうに見えますが、実際には、ひとつひとつの意味がはっきりしているので、すぐになじむことができます。たとえば、数字には数字という型、文字には文字という型があり、それぞれの型がきちんと守られることで、あとから読んだときにも迷うことがなく、まちがいも起こりにくくなります。とくに複数人で作業をする場面では、小さな見落としが大きな不具合へつながることがあるため、型を使うことで安心して読みやすい設計ができます。ひとりで作業をするときでも、しばらく時間がたってから見直したときに、ひとことの注釈があるかのように動作の意図が理解しやすくなるので、とても役に立つ考え方です。 さらに、配列やオブジェクトにも型を与えられるという点は、初心者にとっておどろきがあるところです。数字の集まりには数字の型、文字の集まりには文字の型を決めておくことで、どのような値が入っているのかがはっきりし、うっかり別の種類をまぜてしまうまちがいを防げます。ひとつの名前と年齢を持つ利用者の情報なども、型の形にそって整えれば、手帳のようにきれいに整理された状態で扱えます。そのうえ、関数にも型をつけることで、受け取る値、返す値がどんな種類なのかを決められるので、予想外の動作が起こる心配も少なくなります。 また、書かずにまかせることができる型推論という考え方は、便利な相棒のような存在です。すべてを細かく書かなくてもよい場面があり、すなおに記述するだけで、それにふさわしい型を推測してくれます。ただし、あらゆる型を許してしまう形にしてしまうと、数字と文字が混ざってしまう事態もおきるため、なんでも入れられる型に頼りすぎない意識が大切です。しっかりと型を考えたうえでコードを書くことで、後悔しないコードに近づきます。 もうひとつ見逃せない考え方として、コードの意図が読みやすくなるという点があります。読み手が数人いれば数人それぞれの考え方があり、書き手が少しでも迷わないように、変数や関数の意味を明確にしておく必要があります。そこで、型があると説明書のようにふるまってくれます。扱う値の性質を目で見てわかる形で残してくれるため、書いた本人だけでなく、あとから読む人にも親切な記述になります。 さらに、複雑な構造を持ったコードになるほど、その価値は大きくなります。複数の処理や複雑な結果を扱う場面では、ひとつの見落としが全体の流れに影響します。そうした場面でも、型がきちんと働くことで、何がどこに入り、どのように処理されていくのかが目で追いやすくなり、安心して作業が進められます。数字だけの配列、文字だけの配列、複数の値をまとめた形、呼び出されたデータの受け渡し、それぞれが順序よく正しく動くことで、信頼できるコードになります。 こうして振り返ると、型があることで、まちがいを防ぐ、読みやすくなる、流れがはっきり見えるなど、多くの良い点があることが伝わってきます。少しずつ意識して書くことで、慣れたころには自然と型がある書き方が身についていきます。気がつけば、手元のコードがすっきり整理され、どこにどの値が入り、どう扱われているかが一目でわかる形になっていきます。はじめのうちは丁寧に型を書く習慣を身につけ、小さな配列や簡単な関数から取り入れて、少しずつ理解を深めていくとよいでしょう。それが積み重なり、より安全で安心して読めるコードへと成長していきます。

かんたんなサンプル例

// 名前と年齢を持つ利用者情報
type User = {
    name: string;
    age: number;
};

// 挨拶を返す関数
function hello(u: User): string {
    return "こんにちは" + u.name + "さん";
}

const user: User = { name: "たろう", age: 20 };
// ここで返ってくる値は必ず文字列になる
console.log(hello(user));
    

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptの「型」って具体的に何を意味していますか？

TypeScriptにおける「型」とは、変数や関数にどんな種類のデータが入るのかを示すものです。たとえば、数字なのか文字なのか、あるいは真偽値かを明確にします。これにより、プログラムが安全になり、間違いを早期に発見できます。

JavaScriptとTypeScriptの「型」の違いは何ですか？

JavaScriptは動的型付けで、変数の型を明示しません。一方、TypeScriptでは型を明示的に指定できます。これにより、予期しないエラーを事前に防ぐことができ、より安全で保守性の高いコードが書けます。

TypeScriptの基本的な型にはどんな種類がありますか？

TypeScriptの基本型には「number型（数値）」「string型（文字列）」「boolean型（真偽値）」「undefined型（未定義）」「null型（空の値）」があります。これらは初心者がまず覚えるべき大切な型です。