🫨

関西人のボクがTypeScriptの型推論と型注釈を説明するやで

2025/07/08に公開

TypeScript

type

tech

はじめに

まいど！TypeScriptはその名の通り、Type(=型）が大事な言語や。この型の仕組みがどうなっているが分かると、TypeScriptをわざわざ採用する理由も見えてくるで！てなわけで今日は、型推論と型注釈について詳しく親しく解説していきまっから、最後まで読んでや〜。

型推論って何やねん？

その前に、そもそもTypeScriptの型がよーわからん君はまずはこっちでおさらいや！

型推論っていうのは、TypeScriptが「この変数はこの型やろな〜」って自動で判断してくれる機能のことやねん。

例えば、こんな感じで書いたとしよか：

let myAge = 28;
let myNickname = "たこ焼き太郎";
let isHungry = true;

この場合、TypeScriptは賢いから：

myAgeは数字やからnumber型やな
myNicknameは文字列やからstring型やな
isHungryは真偽値やからboolean型やな

って自動で判断してくれるんや。便利やろ〜？

型注釈って何やねん？

一方で型注釈っていうのは、「この変数はこの型やで！」って最初から明示的に宣言することやねん。

さっきの例を型注釈で書くとこんな感じ：

let myAge: number = 28;
let myNickname: string = "たこ焼き太郎";
let isHungry: boolean = true;

見てもらったらわかるけど、変数名の後ろに: 型名をつけて、「この変数はこの型やで〜」って明示してるねん。

どっちを使ったらええねん？

「結局どっちを使ったらええねん？」って思うやろ？これはケースバイケースやねん。

型推論を使う場合

// 初期値から型が明らかな場合
let userName = "大阪太郎";  // stringって分かるやろ？
let userAge = 30;          // numberって分かるやろ？

// 配列の場合
let hobbies = ["たこ焼き", "お好み焼き", "串カツ"];  // string[]って推論される

型注釈を使う場合

// 初期値がない場合
let userId: number;
userId = 123;

// 関数の引数・戻り値
function greetUser(name: string): string {
    return `おおきに、${name}さん！`;
}

// 複雑なオブジェクト
let restaurant: { name: string; rating: number; isOpen: boolean } = {
    name: "美味しいたこ焼き屋",
    rating: 4.8,
    isOpen: true
};

実際のコード例で比較してみよか

型推論の場合

// TypeScriptが自動で型を推論
let favoriteFoods = ["たこ焼き", "お好み焼き"];
let prices = [500, 800, 300];
let shopInfo = {
    name: "関西グルメ",
    location: "大阪",
    established: 1985
};

// この時点でTypeScriptは以下のように推論してる
// favoriteFoods: string[]
// prices: number[]
// shopInfo: { name: string; location: string; established: number }

型注釈の場合

// 明示的に型を指定
let favoriteFoods: string[] = ["たこ焼き", "お好み焼き"];
let prices: number[] = [500, 800, 300];
let shopInfo: { name: string; location: string; established: number } = {
    name: "関西グルメ",
    location: "大阪",
    established: 1985
};

関数での使い分け

型推論だけでは足りない場合

// 関数の引数は型注釈が必要やで
function calculateTotal(price: number, tax: number): number {
    return price * (1 + tax);
}

// 戻り値は推論されるけど、明示的に書く方が親切
function createGreeting(name: string): string {
    return `めっちゃ元気やで、${name}はん！`;
}

まとめ

型推論：TypeScriptが自動で型を判断してくれる。楽チンやけど、時々曖昧になることもある
型注釈：自分で明示的に型を指定する。コードが読みやすくなるし、エラーも防げる

どっちを使うか迷ったら：

初期値から型が明らかな場合は型推論でOK
関数の引数・戻り値は型注釈を使う
複雑なオブジェクトは型注釈の方が安全
チームのルールに従う

おわりに

型推論と型注釈、どっちもTypeScriptの大事な機能やねん。最初は「めんどくさいなぁ」って思うかもしれんけど、慣れてきたら「あ、これでバグが減るんやな」って実感できるで！

駆け出しエンジニアのみなさん、一緒にTypeScriptでええコード書いていこうや〜！