TSのきほん🔷
Macに開発環境ができて、Gitも使えるようになったところで、ここからはTypeScriptに入っていくよ。まずは「JSきほん」でやったことを、型つきでやり直してみよう。
🔷 TypeScriptってなに？
TypeScriptは、JavaScriptに「型（type値の種類のこと。文字列(string)・数値(number)・真偽値(boolean)など。）」を書き足せるようにした言語。「この変数には文字列しか入らないよ」「この関数は数字を受け取って数字を返すよ」と決めておくことで、うっかりミスにコードを書いている最中に気づけるようになるよ。実は、この「ひよこーど」というサイト自体もTypeScriptで書かれているよ。
最終的にはTypeScriptのコードもJavaScriptに変換（コンパイル）されてからブラウザで動くよ。型の情報は変換のときに取りのぞかれるので、「開発中だけ役立つ、あんぜんベルト」のようなイメージ。
pnpm add -D typescriptで入れたtscコマンドが、その変換をしてくれる道具だよ（実際に手を動かすのはそつぎょう制作のページで！）。
型注釈のきほん
変数の後ろに: 型名と書くと、その変数に入れていい値の種類を指定できるよ。
let name: string = "ひよこ";
let age: number = 1;
let isFlying: boolean = false;document.querySelector(...)の右に!をつけている場面が、これから何度も出てくるよ。TypeScriptの世界では「要素が見つからないかもしれない」という型になっているので、「絶対に見つかるから大丈夫！」と伝えるための書き方だよ。
関数の型
引数（かっこの中の値）と、返ってくる値、どちらにも型をつけられるよ。
条件分岐
JSきほんでやったif / elseに、型をつけてみよう。
くり返し処理（ループ）
for文のカウント用変数にも、型をつけられるよ（省略してもnumberだと自動でわかる）。
for (let i: number = 0; i < 5; i++) {
console.log(i);
}配列とオブジェクト、そしてinterfaceオブジェクトが「どんなプロパティを持つべきか」を決める設計図のこと。
配列には型名[]、オブジェクトにはinterfaceで「設計図」をつけられるよ。
DOM操作とイベント
document.querySelector(...)には、山かっこ<>で「この要素の種類」を教えてあげられるよ。そうすると.styleのような、その要素固有のプロパティも安心して使えるようになる。
document.querySelector<HTMLButtonElement>(...)のように、山かっこの中に「これはボタン要素だよ」と書くと、TypeScriptがそれに合わせて使える機能を教えてくれるようになるよ。