近年のWeb開発では、TypeScriptを使うのが当たり前になりつつあります。

React / Vue / Angular / Node.jsなど多くのプロジェクトで採用されています。

この記事では

• TypeScriptとは何か
• JavaScriptとの違い
• なぜTypeScriptが人気なのか

を初心者向けに解説します。

TypeScriptとは？

TypeScriptは、JavaScriptに型システムを追加した言語です。

開発したのはMicrosoft です。

TypeScriptで書いたコードは、最終的に JavaScriptに変換（コンパイル） されて実行されます。

つまり

TypeScript → JavaScript → ブラウザ

TypeScript → JavaScript → ブラウザ

という流れになります。

JavaScriptの問題点

JavaScriptは動的型付け言語です。

例えば次のコードです。

function add(a, b){
  return a + b
}

add(10, 20)
add("10", 20)

function add(a, b){
  return a + b
}

add(10, 20)
add("10", 20)

結果

30
"1020"

30
"1020"

このように意図しない型でも実行できてしまうため、バグの原因になります。

TypeScriptで書くとどうなる？

同じコードをTypeScriptで書くとこうなります。

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

add(10,20)

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

add(10,20)

もし

add("10",20)

add("10",20)

と書くと

型エラー

型エラー

が発生します。

つまり実行前にバグを防げるのです。

TypeScriptのメリット

TypeScriptを使うメリットは次の通りです。

1、 型安全

型を定義できるため
バグを事前に防げます。

2、 IDE補完が強力

VSCodeなどのエディタでは

• 自動補完
• 型チェック
• エラー表示

が非常に強力になります。

3、 大規模開発に強い

プロジェクトが大きくなるほど

• 関数の引数
• 戻り値
• データ構造

を型で管理できるメリットが大きくなります。

4、 JavaScriptの知識がそのまま使える

TypeScriptは、JavaScriptのスーパーセットです。

つまり

JavaScriptのコードは、そのままTypeScriptとして動きます。

TypeScriptはどこで使われている？

現在のフロントエンド開発では、TypeScriptは非常に広く使われています。

特に次のような環境です。

• React
• Vue
• Angular
• Node.js
• Next.js

多くの企業プロジェクトで標準採用されています。

TypeScriptの基本コード

簡単な例です。

let username: string = "Taro"
let age: number = 30

function greet(name:string):string{
  return "Hello " + name
}

let username: string = "Taro"
let age: number = 30

function greet(name:string):string{
  return "Hello " + name
}

型

string
number
boolean

string
number
boolean

などを指定できます。

まとめ

TypeScriptは、JavaScriptに型を追加した言語です。

主なメリットは

• バグを事前に防げる
• IDE補完が強力
• 大規模開発に強い

という点です。

現在のWeb開発では、必須スキルになりつつある言語です。

次回は、TypeScriptの基本型