Я пытаюсь использовать значение сигнала, которое может быть undefined, но не понимаю, как сообщить линтеру, что значение определено, после того, как я проверю, что оно действительно определено.
export class MyComponent {
mySignal$: WritableSignal<{ msg: string } | undefined> = signal(undefined);
constructor() {
this.mySignal$.set({ msg: 'Hello there!' });
effect(() => {
if (this.mySignal$()) {
console.info(this.mySignal$().msg) // Object is possibly 'undefined'.ts(2532)
// Works but feels like there should be an easier way
// console.info((this.mySignal$() as { msg: string }).msg)
}
});
}
}
"@angular-eslint/eslint-plugin": "16.0.3"
"@angular-eslint/eslint-plugin-template": "16.0.3"
"@angular-eslint/template-parser": "16.0.3"
"@nx/eslint-plugin": "16.8.1"
"@typescript-eslint/eslint-plugin": "5.60.1"
"@typescript-eslint/parser": "5.60.1"
"eslint": "8.46.0"
Я слишком сильно упростил свой реальный код для примера, не показывая всей проблемы. Но я все равно буду использовать Not Null Assertion из ответа Наренса.
export class MyComponent {
msgSignal$: WritableSignal<{ msg: string } | undefined> = signal(undefined);
resultSignal$: WritableSignal<string | undefined> = signal(undefined);
constructor() {
this.msgSignal$.set({ msg: 'Hello there!' });
this.resultSignal$.set('General Kenobi');
effect(() => {
if (this.msgSignal$() && this.resultSignal$()) {
this.msgSignal$().msg = this.resultSignal$() // Object is possibly 'undefined'.ts(2532)
// Fix
// this.msgSignal$()!.msg = this.resultSignal$()!
}
});
}
}





Мы можем использовать либо TypeScript Not Null Assertion (!.), либо Оператор безопасной навигации Typescript (?.), чтобы обойти эту ошибку!
Будет отображена ошибка TypeScript, поскольку вы определили тип как { msg: string } | undefined. Таким образом, существует вероятность того, что переменная будет undefined, когда мы получим доступ к свойству с неопределенным значением, произойдет исключение.
TypeScript предупреждает об этом, поэтому мы можем утверждать, что оно не будет нулевым, используя !., но я думаю, что для этого конкретного сценария ?. является лучшим решением, поскольку он будет обрабатывать неопределенные сценарии.
import { Component, WritableSignal, effect, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
template: `
<a target = "_blank" href = "https://angular.dev/overview">
Learn more about Angular
</a>
`,
})
export class App {
mySignal$: WritableSignal<{ msg: string } | undefined> = signal(undefined);
constructor() {
this.mySignal$.set({ msg: 'Hello there!' });
effect(() => {
if (this.mySignal$()) {
// console.info(this.mySignal$()!.msg); // or this
console.info(this.mySignal$()?.msg); // Object is possibly 'undefined'.ts(2532)
// Works but feels like there should be an easier way
// console.info((this.mySignal$() as { msg: string }).msg)
}
});
}
}
bootstrapApplication(App);
Спасибо, я воспользуюсь
Not Null Assertion. Ранее я отключил его в своем .eslint.json, так как считал, что это плохая практика. Но это похоже на реальный вариант использования. Мой код, не являющийся примером, имел немного более сложный вариант использования, который лучше подходил для этого, я слишком сильно упростил его для своего примера.