Nullable olmayan nullish birleştirme

Bu tanılama, Angular şablonlarında gereksiz nullish birleştirme operatörü (??) karakterlerini tespit eder. Özellikle, girdinin "nullable" olmadığı, yani türünün null veya undefined içermediği işlemleri arar. Bu tür değerler için ?? operatörünün sağ tarafı hiçbir zaman kullanılmaz.

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

@Component({
  // Template displays `username` if present, falls back to 'root' if it is
  // `null` or `undefined`.
  template: `<div>{{ username ?? 'root' }}</div>`,
})
class MyComponent {
  // `username` is declared as a `string` which _cannot_ be `null` or
  // `undefined`.
  username: string = 'Angelino';
}

Bunda ne yanlış?

Nullable olmayan bir girdiyle nullish birleştirme 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, nullish birleştirme operatörünün sağ tarafının bazı durumlarda görüntülendiğini makul bir şekilde varsayabilir, ancak aslında hiçbir zaman görüntülenmez. 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({
  template: `<div>{{ username ?? 'root' }}</div>`,
})
class MyComponent {
  // `username` is now nullable. If it is ever set to `null`, 'root' will be
  // displayed.
  username: string | null = 'Angelino';
}

Girdi nullable olmamalıysa, ?? operatörünü ve sağ operandını silin, çünkü değerin TypeScript tarafından her zaman non-nullable olması garanti edilir.

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

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

Yapılandırma gereksinimleri

Herhangi bir genişletilmiş tanılamanın verilmesi için strictTemplates etkinleştirilmelidir. nullishCoalescingNotNullable 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": {
        "nullishCoalescingNotNullable": "suppress"
      }
    }
  }
}

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