9. Angular 11 et TypeScript…

Avant de terminer, sachez que depuis Angular 11, le compilateur de TypeScript est plus stricte.

Tellement stricte… que la simple déclaration d’une propriété d’un composant peut-être pénible !

Par exemple, si vous déclarez une propriété User, il faudra lui attribuer le type User ET undefined (car une variable a pour valeur par défaut undefined en JavaScript) :

@Component(...) 
export class AppComponent implements OnInit {
  user: <User|undefined>;
}

Alors, vous êtes livre de conserver ce fonctionnement, personne ne pourra vous en vouloir.

Cependant, je préfère retirer cette contrainte tout de suite de notre projet, car le code sera simplement plus verbeux, sans apporter une réelle amélioration à la qualité de notre code.

Pour désactiver ce comportement concernant le typage lors de la déclaration des variables, vous devez ajouter l’option strictPropertyInitialization, et la définir à false dans le fichier tsconfig.json :

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Ensuite, les erreurs pénibles du compilateur de TypeScript devraient disparaître, sans perdre les règles de typage habituelles proposées par TypeScript. 👍