最新！JavaScript中級編 TypeScript型入門 DOM編わかりやすく解説

JavaScriptは動的に型を付けるスクリプト言語で、制約が緩い言語です。個人的にはプログラミングを始めるのなら、おすすめの言語です。
しかし、最近では静的型付けが注目されており、JavaScriptにもそれが求められています。

MicroSoftが開発したTypeScriptが今とても注目されています。TypeScriptは型をあらかじめ宣言し、エラーを回避することが可能です。近頃はTypeScriptが求人の条件であったり、求められている会社は増えています。

今回は、前回に引き続き、TypeScriptの型入門編として、DOMに関する型について初学者向けにわかりやすく解説していきます。また、前回同様にJavaScriptの基礎文法がわかる方向けに解説していきます。

本記事のペルソナ

TypeScript初学者の方
JavaScriptの基礎がわかる方
型について学びたい方
DOMの基礎が理解できている方

TypeScript DOM 型入門
1. DOMの基本的な型
2. async 非同期通信型
まとめ
参考文献

TypeScript DOM 型入門

DOMの基本的な型

では、解説をしていきます。
まず、下記のようなHTMLファイルを用意してください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div id="js-div-1">
            <div id="js-dom-1">
                <p id="js-p-1">
                    JR東日本 JR西日本 JR東海
                </p>
                <p id="js-p-2">
                    北海道
                </p>
            </div>
        </div>
        <div id="js-div-2">
            <div id="js-submit-1">
                <label for="lab-ques1">
                    あなたが行ってみたい観光地は？
                </label>
                <input type="text" id="js-input-1" name="lab-ques1" placeholder="定山渓温泉" />
                <button type="submit" id="js-btn-1">クリック</button>
            </div>
            <div id="js-submit-2" style="margin: 10px 0px 10px 0px; padding:10px 0px 10px 0px;">
                背景が変わります。
                <div style="margin: 10px 0px 10px 0px;">
                    <button type="submit" id="js-btn-2">クリック</button>
                </div>
            </div>

        </div>

        <div id="js-div-4">
            <div>
                <p>天気情報</p>
            </div>
            <div>
                <p>
                    <button id="js-btn-4">フェッチ</button>
                </p>
            </div>
            <div id="js-div-8">

            </div>
        </div>
        <script src="dom.js"></script>
    </body>
</html>

const js_div_selector:HTMLDivElement | null = document.querySelector("div");

console.log(js_div_selector);

const js_div_selector_all:NodeListOf<HTMLDivElement> = document.querySelectorAll("div");

console.log(js_div_selector_all);

const js_p_1:HTMLElement  | null = document.getElementById("js-p-1");

console.log(js_p_1);

const js_label:NodeListOf<HTMLLabelElement> = document.querySelectorAll("label");

const js_btn_1:HTMLElement  | null= document.getElementById("js-btn-1");
const btn2:HTMLElement | null = document.getElementById("js-btn-2");
const colorAry:string[] = ["#FFD489","#FFB64D","#FFE543","#C3FF43","#82FF43","#43FFAA","#5FFAFF","#5FBDFF","#5F6DFF"];
const bg:HTMLElement | null = document.getElementById("js-submit-2");

const randomColor = ():string =>{
    let i:number = Math.floor(Math.random()*(colorAry.length+1));
    return colorAry[i];
}
const changeBgCol = ():void => {
    bg.style.backgroundColor = randomColor();
}


btn2.addEventListener("click",changeBgCol);

TypeScriptはJavaScriptを100％カバーしていますので、もちろんDOMの型も用意されています。

HTMLElement
NodeListOf
HTMLLabelElement
HTMLDivElement
HTMLParagraphElement

また、VScodeを使っている方で、TSファイルを編集している時、マウスカーソルを変数や関数にホバーさせると、型を推論してくれます。それを参考にして型を宣言するということも一つの手です。
この他にも様々な型があります。それだけ、多くの型があるということになります。

async 非同期通信型

const url:string = "https://weather.tsukumijima.net/api/forecast/city/";

const js_div_3:HTMLElement | null = document.getElementById("js-div-8");
const js_btn_4:HTMLElement | null = document.getElementById("js-btn-4");

interface Location{
    area: string;
    prefecture: string;
    district: string;
    city: string;
}

interface Weather{
    weather: string;
    wind: string;
    wave: string;
}

const displayJsonData = async (resJson:any):Promise<void> => {
    const param1:HTMLParagraphElement = document.createElement("p");
    const param2:HTMLParagraphElement = document.createElement("p");
    const param3:HTMLParagraphElement = document.createElement("p");
    const loc:Location = resJson.location;
    const weather:Weather = resJson.forecasts[0].detail;
    param1.textContent = `場所 : ${loc.area+" " + loc.city+" "+loc.district}`;
    js_div_3.appendChild(param1);
    param2.textContent = `天気 : ${weather.weather}`;
    js_div_3.appendChild(param2);
    param3.textContent = `風 : ${weather.wind}`;
    js_div_3.appendChild(param3);
    console.log(loc);
    console.log(weather);
}

const displayBody = async ():Promise<void> => {
    try{
        const cityId:string = "017010";
        const res:any = await fetch(`${url}${cityId}`);
        const resJson:any =  await res.json();

        console.log(resJson);
        await displayJsonData(resJson);
    }catch(err:unknown){
        console.error(err);
    }
}

js_btn_4.addEventListener("click",displayBody);

非同期通信をするときも型があります。async awaitを使用する場合は、Promiseを使用します。そのジェネリクスとして、返り値の型もしくはvoidを指定します。

APIからデータを通信する場合、型を指定できるのなら、型を指定します。ただ、どのような型なのかは引っ張ってくるAPIによってそれぞれ異なります。今回の場合は取得したデータのうち、WeatherとLocationを定義しています。

取得したデータの型は様々なため、自分でオブジェクトとして定義するのがいいでしょう。定義するには実際にconsole.logなどで、出力してみて確認しながら定義します。

ただ、データ量が膨大であり、複雑であればあるほど、工数が増えます。どうしてもという場合はすべての型を許容する anyを使うという手もあります。