【イラスト付き】TypeScript概要【丁寧に解説】
はじめに
皆さんこんにちは。
今回はTypeScriptの概要をご紹介します。
TypeScriptはJavaScriptで型を使えるようにしたものです。型の安全性や利便性から近年非常に注目されています。今回はTypeScriptの概要に絞ってご紹介します。
こんな人にオススメ
- TypeScriptの概要と特徴を知りたい
- TypeScriptの導入とシンプルなサンプルが知りたい
初めて学習する方にも分かるように、丁寧に解説していきます。
すでに利用されている方も、是非一度目を通していただけると嬉しいです。
😋 TypeScriptの概要と特徴的な性質をご紹介します♪
TypeScriptとは
まずポイントをチェック
- JavaScriptに型を導入したもの
- 型チェックによりバグを未然に防げて安全
- 型情報によりコーディング時の入力支援が充実
TypeScriptとはJavaScriptを拡張し型を導入したものです。機能はJavaScriptと同等なので、JavaScriptでできることとTypeScriptでできることは同じです。
型が導入されたことによってコーディングが安全に行えるようになりました。素のJavaScriptは型をチェックしないので、想定外の値が変数に代入されていても実行してエラーが出るまで気づけません。
TypeScriptはコードを書く時点で型をチェックしているためバグを未然に防ぐことができます。
また、TypeScriptでは型情報による入力支援が有効になり、素早く正確なコーディングが行えるようになります。
😋 JavaScriptに型の利便性を追加しています♪
null安全とは
まずポイントをチェック
- nullの可能性のある値は使えない
- nullチェックをすることで利用可能
- nullの可能性がある場合はコンパイルエラーになる
TypeScriptはnull安全の特徴を備えています。null安全とはnullの値を使えないようにする仕組みです。プログラミングにおいてnullはバグと原因になりやすく、それを未然に防いでくれます。
値がnullではないことをコンパイラーに伝えることで、その値を利用可能になります。nullの可能性がある場合は利用しようとするとコンパイルエラーになり実行できません。
😋 nullの可能性がある値は使えないようにチェックされます♪
型推論とは
まずポイントをチェック
- 型を指定していなくてもコンパイラが型を自動的に判断する
- 型推論を活用することで、冗長な型の指定をしなくて良い
- 複雑な場合は推論できないことがあるので、明示的に型を指定する
TypeScriptには型推論という特徴があります。これは文脈によってコンパイラーが自動的に型を判断する機能です。これによってプログラマーは全てに型を指定しなくても型安全なコードを書くことができます。
どの程度型を明記するかはチームや人によって異なりますが、値を受け取るような処理はプログラマーが型を明示的に指定することが多いです。
| 🍕 例えば、変数宣言や関数の引数では処理結果や外部から値を受け取るため、型を明示しておくと安全です。 |
|---|
また、複雑な処理は型が推論できないことがあります。
😋 コンパイラーがある程度自動で型を判断してくれます♪
導入と実行方法
まずポイントをチェック
- npmでtypescriptをグローバルインストール
- tscコマンドでコンパイル
- 実行時はコンパイルで生成したJSを利用
TypeScriptを利用するにはまずはインストールします。インストール後はtscコマンドが利用可能になります。
npm install -g typescript
インストールされいてるTypeScriptのバージョン確認は-vオプションをつけます。
tsc -v
作成した.tsファイルをコンパイルするにはtscコマンドでファイル名を指定します。コマンドを実行した階層にコンパイル後のJavaScriptファイルが生成されます。
tsc xxx.ts
実行する際はコンパイルで生成したJavaScriptファイルを使用します。
😋 TypeScriptをインストールし、実行時はコンパイルが必要です♪
シンプルなサンプル
まずポイントをチェック
- 拡張子は.ts
- JavaScriptと同じように記述可能
- サンプルのように型を一切指定していなくても型安全になっている
TypeScriptで記述したファイルの拡張子は.tsにします。あとはJavaScriptと同じように記述可能です。
TypeScriptには型推論があるので、型を全く指定しなくても型安全なコーディングができます。
作成した.tsファイルはそのままでは実行できないので、コンパイルして.jsファイルに変換します。
const items = [
{ name: 'おにぎり', price: 120 },
{ name: 'お菓子', price: 50 }
];
for (const item of items) {
if (item.price >= 100) {
console.log(`${item.name}は100円以上です`);
}
}
😋 通常通りJavaScriptを記述するだけでも型が有効になります♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
TypeScriptの概要について確認をしていただきました。
TypeScriptはJavaScriptに型を導入し、安全かつ便利にコーディングできるようにしたものです。
導入も簡単にできますので、どんどん利用が広がってますので、JavaScriptと合わせて学習するといいでしょう。
😋 これからもプログラミング学習頑張りましょう♪
参考リンク集
参考リンク集（サンプルコード）
Discussion