[インフラストラクチャ・タイプ・スクリプトの開始-基本から実戦へ]-概要と背景

この記事は、タイプスクリプト入門-ベースから実戦へのタイプスクリプトの紹介と背景部分のまとめです.

タイプスクリプトは

タイプスクリプトはJavaScriptタイプを付与する言語です-->JavaScript拡張言語
ブラウザで実行するには、タイプスクリプトを1回変換する必要があります-->コンパイルする必要があります

タイプスクリプトを使用する理由

エラー防止

コードガイドと自動完了(開発効率の向上)

エラーのプロアクティブな予防

次のコードがあるとします.

username.innerText = user[0].name;
email.innerText = user[0].email;
address.innerText = user[0].addres.street; // address 잘못친 값

このようにaddressをaddresに誤って設定した場合は、画面(ブラウザ)で結果を確認する必要があります.タイプスクリプトは、これを支援します.

jsdocによるタイプスクリプト効果の実装

/**
 * @typedef {object} User
 * @property {string} name
 * @property {string} email
 * @property {object} address
 */

/**
 * @returns {Promise<User>}
 */
function fetchUser() {
  return axios.get(url);
}

Userという名前のプロセスを返す関数であることを示す場合は、jsDocを使用してUserにtypedefを指定します.
これにより、ブラウザで常に結果を表示するのではなく、コードがタイプを定義しているため、使用可能なプログラムをチェックすることでエラーを減らすことができます.

コードガイドと自動完了(開発効率の向上)

const sum = (a: number, b: number): number => a + b;

sum(10, '20');

タイプスクリプト構文を使用して作成する場合は、sumの引数としてa、bを数値で入力し、戻り値もnumberでなければなりません.

タイプが定義されている場合、resultはnumberであることも知っているので、numberタイプが使用可能な方法を表示します.

JSをTSにエンコード

// @ts-check

/**
 * @param {number} a
 * @param {number} b
 */
const add = (a, b) => {
  return a + b;
};

add(10, '20');

@ts-checkとJSDocを利用して、JavaScriptをタイプスクリプトのようにエンコードすることができます.ただし、このようなjsDocは毎回作成されるので、タイプスクリプトを使用することが望ましい.