# tsconfig.json
---
# 基本
* tsconfig.json は tsc でのコンパイル時に使える
* tsconfig.json に書いた内容はエディタで参照できる
* `エディタ <--LSP--> tsserver`
* bundler によっては tsconfig の中身を読むこともある
* エディタで開いているときは、ファイルから親ディレクトリを遡って確認し、近いものを適用
---
# $schema
```
{
"$schema": "https://json.schemastore.org/tsconfig"
}
```
* tsconfig に限らないが、json の型定義を JSON Schema で読むことができる
* vscode が勝手に型定義を読み込んでる場合もあるが、基本的に設定系のJSONでは $schema 使うのがオススメ
---
# strict
```
"compilerOptions": {
"strict": true
}
```
* 必ず有効にすること！
* 以下の compilerOption が有効になる
alwaysStrict, strictNullChecks, strictBindCallApply, strictFunctionTypes, strictPropertyInitialization, noImplicitAny, noImplicitThis, useUnknownInCatchVariables
---
# allowUnusedLabels: false
js にはラベル文がある。break や continue でラベルに対して goto できる機能。
使われてないラベルは禁止できる
---
# allowUnreachableCode: false
到達不能コードがあるとコンパイルエラーにできる
```typescript
const f = (): void => {
return;
console.log('hoge') // 到達不能
}
```
---
# exactOptionalPropertyTypes
```typescript
type T = { a?: string }
const a: T = { a: undefined }
// ↑NG (キーが存在するので正確じゃない)
```
オプショナルプロパティは若干不健全なので、できれば制約をかけたほうがいい
---
# noFallthroughCasesInSwitch
偶数→奇数が出力される(フォールスルー)。
break 忘れによる事故軽減
```typescript
const a: number = 1;
switch (a) {
case 0:
console.log("偶数");
case 1:
console.log("奇数");
break;
}
```
---
# noUncheckedIndexedAccess ☆☆☆
開発初期に入れておきたい
```typescript
const ary: string[] = [];
const text1: string = ary[0]; // 実際は undefined
const obj: Record<string, string> = {};
const text2: string = obj.hoge; // 実際は undefined
```
text1, text2を string | undefined にしてくれる。
1個以上の型定義は代わりに↓を使う
`[string, ...string[]]`
---
# esModuleInterop
interop = interoperability = 相互運用性 (esm<=>cjs)
cjs と esm は default export の運用が異なる
```typescript
import * as express from 'express' // OFF の場合
// ↑の書き方だと、デフォルトエクスポートがオブジェクトではなく
// 関数の場合に気持ち悪い
import express from 'express' // ON の場合
express()
```
型推論上も esModuleInterop のほうが正確である
<small>パッケージ側が esModuleInterop: true 前提の型定義を書いているため</small>
---
# checkJs
`// @ts-check` がデフォルトで有効になる
生の js でも JSDoc に書いた型定義が参照される
たとえば `rollup.config.js` の型定義を 書くとき、↓のように書くと補完がでて便利
```
/** @type {import('rollup').RollupOptions} */
export default {
...
```
---
# forceConsistentCasingInFileNames
ファイル名の大文字小文字を区別する
ファイルシステムによっては ignore case だったりするので、import 'hoge' と import 'hoGe' どちらも通ってしまったりするため
---
# preserveWatchOutput
`tsc --watch` すると、
デフォルトではターミナルがクリアされる
(ようなアスキーコードが送信される)
ON にすると、クリアされないようにできる
node-foreman などと相性がいい
---
# おまけ: codegen
スカラーが any になってしまってるアプリは多分多い。せめて string とかで定義したい
```
generates:
./src/type/shopifyAdminApi.ts:
plugins:
- typescript
config:
defaultScalarType: 'unknown'
scalars:
Boolean: boolean
Date: string
DateTime: string
Decimal: string
Float: number
FormattedString: string
HTML: string
ID: string
Int: number
JSON: unknown
Money: string
StorefrontID: string
String: string
UnsignedInt64: string
URL: string
UtcOffset: string
```
{"title":"tsconfig.json","description":"\"$schema\": \"https://json.schemastore.org/tsconfig\",","contributors":"[{\"id\":\"ee1a1649-45a0-4eb7-b3b6-46104518ee1c\",\"add\":6819,\"del\":3755}]"}