DEV Community

Cover image for Angular Strictモードまとめ
puku
puku

Posted on • Updated on

Angular Strictモードまとめ

Photo by Glenn Carstens-Peters on Unsplash

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

ng new my-app --strict
Enter fullscreen mode Exit fullscreen mode

TypeScript コンパイラ設定

strict: true

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

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

forceConsistentCasingInFileNames: true

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

noImplicitReturns: true

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

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

// ✅ OK
ngOnInit(): void {
  // Do somthing
}
Enter fullscreen mode Exit fullscreen mode

noFallthroughCasesInSwitch: true

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

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

// ✅ OK
switch (value) {
  case 1:
    break;
  case 2:
    break
}
Enter fullscreen mode Exit fullscreen mode

Angular コンパイラ設定

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

"angularCompilerOptions": {
  "strictInjectionParameters": true,
  "strictTemplates": true
}
Enter fullscreen mode Exit fullscreen mode

angular.json

Budgets

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

  • 非strict
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "2mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "6kb",
    "maximumError": "10kb"
  }
]
Enter fullscreen mode Exit fullscreen mode
  • strict 有効
"budgets": [
  {
    "type": "initial",
    "maximumWarning": "500kb",
    "maximumError": "1mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]
Enter fullscreen mode Exit fullscreen mode

tslint.json

"no-any": true

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

その他

"sideEffects": false

src/apppackage.json が追加されます。

{
  "name": "my-app",
  "private": true,
  "sideEffects": false
}
Enter fullscreen mode Exit fullscreen mode

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

Photo by Glenn Carstens-Peters on Unsplash

Top comments (0)