Angular Strictモードまとめ

Photo by Glenn Carstens-Peters on Unsplash

Angular v10 で --strict オプション有効時の設定がより厳格になりました。
https://angular.io/guide/strict-mode

ng new my-app --strict

TypeScript コンパイラ設定

strict: true

全てのstrictオプションが有効になります。

• --noImplicitAny
• --noImplicitThis
• --alwaysStrict
• --strictBindCallApply
• --strictNullChecks
• --strictFunctionTypes
• --strictPropertyInitialization

forceConsistentCasingInFileNames: true

ファイル名の大文字・小文字が区別されます。

noImplicitReturns: true

関数の戻り値の型の省略が禁止されます。

// ❌ NG
ngOnInit() {
  // Do somthing
}

// ✅ OK
ngOnInit(): void {
  // Do somthing
}

noFallthroughCasesInSwitch: true

switch文のフォールスルーが禁止されます。

// ❌ NG
switch (value) {
  case 1:
  case 2:
    break
}

// ✅ OK
switch (value) {
  case 1:
    break;
  case 2:
    break
}

Angular コンパイラ設定

テンプレートの型チェックもより厳格になります。

"angularCompilerOptions": {
  "strictInjectionParameters": true,
  "strictTemplates": true
}

angular.json

Budgets

Bundle budgetとComponent budgetが75%程度削減されます。

• 非strict

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
]

• strict 有効

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]

tslint.json

"no-any": true

any の使用が禁止されます。

その他

"sideEffects": false

src/app に package.json が追加されます。

{
  "name": "my-app",
  "private": true,
  "sideEffects": false
}

※ webpackのTree Shakingの効率を高める効果があります。
https://webpack.js.org/guides/tree-shaking

Photo by Glenn Carstens-Peters on Unsplash