学習しようと思ったきっかけ
これまで、HTML/CSS → JavaScript → Reactの順で学習してきました。
Reactで作ったポートフォリオも完成して「就活するぞー！」と本格的に企業へのエントリーを始めてみると
【必須条件】
・Webフロントエンド開発の業務経験2年以上
・モダンFW(Angular, React, Vueなど)を用いた開発経験
・TypeScriptを用いた開発経験
TypeScriptでの開発経験を求めている企業がめちゃくちゃ多かったです。
Reactと相性も良いらしく、JSフレームワーク×TypeScriptはフロントエンド開発の現場では主流の手法だったようで、身に着けるべき技術だと感じたので学んでいきます。
※もし私の記事の内容に誤りがあればご教授いただけると幸いです。
1.TypeScriptって？
型がついたJavaScriptのこと(JavaScriptの上位互換)。
const a: number = 5;
基本はこんな風に書いていくみたい
const 定数名: 型名 = 値;
2.型って？
プリミティブ型とリテラル型がある
プリミティブ【primitive】→ 原始的、素朴な
リテラル【literal】 → 逐語的、ありのままの
直訳だけ掻い摘んで見ると素朴もありのままも同じ気がするけど、何より
プリミティブ型はリテラル型を内包している型で
リテラル型はプリミティブ型を細分化している型
っていう概念を抑えておけばいいみたい。
お魚(プリミティブ)型とマグロ（リテラル）型みたいな感じかなぁ
プリミティブ型
TypeScriptにおける基本の型
const a: number = 5;
numberの部分を
string(文字列)
number(値)
boolean(真偽値)
symbol（ユニークな識別子）
bigint（とても大きな整数値）
null
undefined
に置き換えて型を定義できるみたい。
定義した型と違う型のデータが定数に代入されるとエラーになる。
Javascript - シ、シンボル(Symbol)って何？
JavaScriptのBigIntを勉強してみた
リテラル型
プリミティブ型を細分化した型
const a: "hoge" = "hoge";
const b: 5 = 5;
const c: true = true;
"hoge"という型をもつ定数aには"hoge"というstring（文字列）のみ代入できる。
5という型をもつ定数bには5というnumber（値）のみ代入できる。
trueという型をもつ定数cにはtrueというboolean（真偽値）のみ代入できる。
プリミティブとリテラル型の関係性
リテラル型はプリミティブ型を細分化した型なので、これもOK
const tuna :"maguro" = "maguro";
const fish :string = tuna;
"maguro"型を持った定数tunaは、string（文字列）型を持った定数fishを細分化したものなので定数fishに代入できる。逆はNG。
型推論
型名（型注釈）の宣言は省略できる。その場合、
constで宣言された定数はリテラル型が定義されるため、
const a = "apple";
const b = 1;
定数aは"apple"型
定数bは1型をもつことになる。
対してletやvarで宣言された変数はプリミティブ型が定義されるため、
let c = "orange";
var d = 2;
変数cはstring型
変数dはnumber型をもつことになる。