TL;DR
- コードが動く環境を正確にモデリングすると、TypeScript はコードをより適切にチェックできる。
libの設定、<script>で読み込むグローバル変数やライブラリの型宣言、webpack でimportするファイルの型宣言でモデリングする。
内容
環境をモデリングする
TypeScript のコードは JavaScript に変換され、特定の環境（ブラウザ、テストランナー、Deno、Electron など）の特定のランタイム（V8、JavaScriptCore、SpiderMonkey など）で動く。この環境を正確にモデリングすると、TypeScript はコードをより適切にチェックするようになる。
モデリングの方法の 1 つが、tsconfig.json の lib の設定である。たとえば "DOM" はブラウザ用の型宣言を含め、"ES2021" は 2021 年に承認された JavaScript の標準仕様の型宣言を含める。"ES2021" を指定した場合、それより後に追加された機能を使うと型エラーになる。ほかに、@types/web パッケージを使うと、Web ブラウザで使える型をモデリングできる。
グローバル変数とライブラリ
<script> で読み込まれるグローバル変数もモデリングしたほうがよい（項目47）。
<script type="text/javascript">
window.userInfo = { name: "Jane Doe", accountId: "123-abc" }
</script>interface UserInfo {
name: string
accountId: string
}
declare global {
interface Window {
userInfo: UserInfo
}
}<script> で読み込むライブラリも同様である。たとえば jQuery や Google Analytics を読み込んでいるなら、それぞれの型宣言パッケージを入れる（項目66）。
npm i -D @types/google.analytics @types/jqueryバンドラで読み込むファイル
webpack を使って JavaScript から CSS や画像ファイルを直接 import する場合、そのままでは TypeScript が認識できない。
import sunrisePath from "./images/beautiful-sunrise.jpg"
// Cannot find module './images/beautiful-sunrise.jpg' or its type declarations.これを避けるには、型宣言でモデリングするか、別途 npm パッケージを追加する。
// webpack-imports.d.ts
declare module "*.jpg" {
const src: string
export default src
}複数の環境
クライアントとサーバのように異なる環境をモデリングするには、複数の tsconfig.json とプロジェクト参照を使う（項目78）。