Nullable olmayan isteğe bağlı zincirleme

Bu tanılama, Angular şablonlarında isteğe bağlı zincirleme işleminin (.?) sol tarafının türünde null veya undefined içermediği durumları tespit eder.

import {Component} from '@angular/core';

@Component({
  // Print the user's name safely, even if `user` is `null` or `undefined`.
  template: `<div>User name: {{ user?.name }}</div>`,
})
class MyComponent {
  // `user` is declared as an object which _cannot_ be `null` or `undefined`.
  user: {name: string} = {name: 'Angelino'};
}

Bunda ne yanlış?

Nullable olmayan bir girdiyle isteğe bağlı zincirleme operatörünü kullanmanın hiçbir etkisi yoktur ve bir değerin izin verilen türü ile şablonda nasıl sunulduğu arasındaki bir tutarsızlığı gösterir. Bir geliştirici, isteğe bağlı zincirleme operatörünün çıktısının null veya undefined olabileceğini makul bir şekilde varsayabilir, ancak aslında hiçbir zaman bu değerlerden biri olmaz. Bu, programın beklenen çıktısı hakkında kafa karışıklığına yol açabilir.

Bunun yerine ne yapmalıyım?

Şablonu ve tanımlanan türü senkronize olacak şekilde güncelleyin. Girdinin türünü iki kez kontrol edin ve gerçekten nullable olmasının beklenip beklenmediğini doğrulayın.

Girdi nullable olmalıysa, bunu belirtmek için türüne null veya undefined ekleyin.

import {Component} from '@angular/core';

@Component({
  // If `user` is nullish, `name` won't be evaluated and the expression will
  // return the nullish value (`null` or `undefined`).
  template: `<div>{{ user?.name }}</div>`,
})
class MyComponent {
  user: {name: string} | null = {name: 'Angelino'};
}

Girdi nullable olmamalıysa, ? operatörünü silin.

import {Component} from '@angular/core';

@Component({
  // Template always displays `name` as `user` is guaranteed to never be `null`
  // or `undefined`.
  template: `<div>{{ foo.bar }}</div>`,
})
class MyComponent {
  user: {name: string} = {name: 'Angelino'};
}

Yapılandırma gereksinimleri

Herhangi bir genişletilmiş tanılamanın verilmesi için strictTemplates etkinleştirilmelidir. optionalChainNotNullable tanılamalarının verilmesi için strictNullChecks de etkinleştirilmelidir.

Bunu önleyemezsem ne olur?

Bu tanılama, projenin tsconfig.json dosyası düzenlenerek devre dışı bırakılabilir:

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "optionalChainNotNullable": "suppress"
      }
    }
  }
}

Daha fazla bilgi için genişletilmiş tanılama yapılandırması bölümüne bakın.