この記事は何？
TypeScriptとは何か、何がいいのかを伝えようと頑張った記事です！
この記事のターゲットは、以下のような方々です
- JavaScriptはわかったけど、TypeScriptってなんだっけ？
- TypeScriptというものがあるらしい...学んでみよう...!
@ この記事が読み終わったら、以下👇の記事も是非！
1. JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~ ←この記事
2. TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~
3. TypeScriptをなんとなく理解するための記事③ ~汎用的な型を作成する: Generics~
4. TypeScriptをなんとなく理解するための記事④ ~構造型~
@ TypeScriptがなんとなく理解できたら、是非インストールして、触ってみてください！
👉 【画像で説明】シンプルにTypeScriptを導入して使う方法
TypeScriptとは？
TypeScriptは、型定義ができるJavaScriptです。
JavaScriptでは、型を明確に宣言していません。
そこで、TypeScriptでは、この定数は数値型（number）として宣言！、あの定数は文字型（string）として宣言！
といったように型を宣言しつつJavaScriptを書いていくことができます。
型定義によって、何がうれしいのかというと、
コードの予期しない動作によるバグを減らすことが出来ます
例えば、以下のような場合です。
本当は、文字列として扱いたい定数が、なにかしらの処理によって、最終的に数値が入ってしまい、エラーが起きた。。。
TypeScriptを使えば「コーディング段階」でこのような型の矛盾を、検知することが出来ます。
型に関する概要
今回は、TypeScriptの基本的な機能である、1. 型推論、2. 型の定義について紹介します。
1. 型推論
型推論とは、何も型を定義しなくても、勝手に型を推論してくれる（型を生成してくれる）神の御業です。
たとえば、以下のようなコードを書いたとします。
let smartPhone = 'Android';
そして、この変数に数値を入れてみましょう。
let smartPhone = 'Android';
smartPhone = 11; // Problem: タイプ「数値」はタイプ「文字列」に割り当てることができません.ts(2322)
すると、数値を代入した行で「タイプ「数値」はタイプ「文字列」に割り当てることができません.ts(2322)」と警告されました。
つまり、最初に'Android'を代入した時点で、TypeScriptが自動的に型を推論し、割り当てるので、
このsmartPhone変数には文字列（string）以外を代入しようとすると、怒られてしまいます。
これが、型推論になります。
このように自動的に推論してくれるので、引数が文字列でないと駄目🙅な関数に誤って、数値を入れることもなくなります。
「引数は、文字列でないと駄目です！この変数は数値型です！」と勝手に怒ってくれるわけです。
let version = 11; // 数値（number）型
const upVersion = (device: string) => { // 引数は文字列（string）型
console.log(`OSは${device}です`)
}
upVersion(version); // Problem: タイプ 'number'の引数をタイプ 'string'のパラメーターに割り当てることはできません。ts（2345）
2. 型の定義
型定義とは、字の通り型を（明示的に）定義することです。
簡単な例は、以下になります。
let version: number = 11; // versionは数値（number）型ですよ！
const smartPhone: string = 'Android'; // smartPhoneは文字列（string）型ですよ！
JavaScriptでは、様々なデザインパターンを利用てきますが、一部のデザインパターンでは、型を自動的に推測することは困難です。
例えば、以下のようなObjectです。
const fish = {
name: "iwana",
weight: 100,
}
これは、interface宣言を利用すると、事前にオブジェクトの形状を定義することが出来ます。
今回は動物である、Animal型を作ってみました。
interface Animal {
name : string;
weight: number;
}
このAnimal型は次のように利用します。
const penguin: Animal = {
name: "Emperor penguin",
weight: 10000,
}
仮に、Animal型と一致しないオブジェクトを指定すると、警告が出ます。
const plastic: Animal = {
name: "pen",
material: "oil", // オブジェクトリテラルは既知のプロパティのみを指定でき、「material」はタイプ「Animal」に存在しません。ts（2322）
weight: 5,
}
また、クラスとオブジェクト指向プログラミングのサポート、関数の引数の型や返り値の型もサポートしています。
// Animal型
interface Animal {
name: string;
weight: number;
}
// class
class AnimalBook {
name: string;
weight: number;
constructor(name: string, weight: number) {
this.name = name;
this.weight = weight;
}
}
const user: AnimalBook = new AnimalBook("dog", 1000);
// 関数の返り値をAnimal型に
const getAnimalInfo = (): Animal => {
return {
name: "Emperor penguin",
weight: 10000,
};
};
// 関数の引数をAnimal型に
const deleteAnimalInfo = (animal: Animal):void => {
///...
}
他にも、JavaScriptのboolean、bigint、null、symbol、object、undefinedなども利用できます。
加えて、TypeScript特有のany型やunknown型、neverやvoidもあります。
ちなみに今回は、interfaceを利用して、型をカスタマイズしましたが、Typeという構文を使って、型を作る事もできます。
おわりに
以上が、TypeScriptで重要な1. 型推論と2. 型定義でした！
基本的に概要なので深くまで説明していませんが、TypeSciptについて理解が進めば幸いです。
わかりやすい！と思った方は是非LGTM✨おねがいします
Next: TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~
@ ハンズオンも書いたので、さっそく使ってみたい人は是非！
👉【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり