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
Top comments (0)