我想通過在內部設定來更新我的應用程式以使用 Angular 的模板嚴格模式。使用新配置運行后，我收到了一個奇怪的錯誤。"strictTemplates": truetsconfig.jsonng serve
我有一個在很多地方使用的共享組件
@Component({
selector: 'my-shared-component',
...
})
export class SharedComponent {
@Input() selectedId: string | number;
@Output() selectedIdChange = new EventEmitter<string | number>()
@Input() disabled: boolean;
...
}
并且傳遞<my-shared-component disabled="true">會引發錯誤，這很好。
當我嘗試將 a 傳遞給 時，問題就出現number了@Input() selectedId: string | number;，即：
export class OtherComponent {
myNumberId: number;
...
}
<my-shared-component [(selectedId)]="myNumberId">
并引發錯誤：
TS2322：鍵入“字串 | number' 不可分配給型別 'number'
我不想用 with 替換型別，myNumberId因為string | number它也用于另一個具有@Input id: number（并且必須是數字）的組件中。另外，myNumberId來自服務器，我知道這是一個數字，所以我認為如果我將其替換為string | number.
我也不想使用strictAttributeTypes配置為 false，因為之后<my-shared-component disabled="true">將不再拋出錯誤。
我想知道是否存在一些打字稿實用程式型別（或類似的東西）來 @Input() selectedId: string | number只接受字串或數字，而不強制來自父級的變數為string | number. 或者我可以做其他事情來解決這個問題嗎？
uj5u.com熱心網友回復：
好吧，它正確地拋出了一個錯誤 - 輸出EventEmitter將發出stringor number，它將嘗試為您嚴格輸入的數字分配一個值。
您可以做的是嘗試將 setter 和 getter 分開OtherComponent：
_myNumberId: number;
get myNumberId(): number {
return this._myNumberId;
}
get myNumberId(value: string | number): number {
if (typeof value === 'string') {
// This is a stub, you might want to go with something else like parseFloat()
// or just throw.
this._myNumberId = parseInt(value, 10);
} else {
this._myNumberId = value;
}
}
這部分保留number了檢查型別的值被提取的情況，并且仍然允許從stringor設定值number，因此它將消除編譯錯誤。但這不是一個好的解決方案，因為它看起來像代碼異味，并且它“放松”了對 setter 的型別檢查。
如果您退后一步，看看更大的圖景——也許您應該在您的應用程式中定義什么是“Id”，并在通用組件中使用該型別？沿途的一些事情：
export type MyId = string | number;
然后，您的組件可以使用泛型擴展該型別，這將執行嚴格的型別檢查：
@Component({
selector: 'my-shared-component',
...
})
export class SharedComponent<T extends MyId> {
@Input() selectedId: T;
@Output() selectedIdChange = new EventEmitter<T>()
@Input() disabled: boolean;
...
}
這將允許在雙向系結中分配一個string或作為輸入/輸出，并將型別強制為兩個位置中的一個。number稍后，如果您決定需要對其自身應用額外的邏輯Id，您可以在一個地方（型別定義）更改它，并查看它是否違反任何型別檢查。
當然，您總是可以不定義型別并這樣做：
export class SharedComponent<T extends string | number> {
但似乎您可能也想在幾個不同的地方強制執行此操作，因此自定義值型別似乎是一個不錯的方法。
這是一個使用泛型方法的堆疊閃電戰，它在雙向系結中正確分配了和值，但未能分配不同的型別 ( string) 。如果您洗掉日期分配，它將正確編譯。numberDate
uj5u.com熱心網友回復：
您可以嘗試替換string | number為string & number.
您也可以嘗試像這樣發送它：
<my-shared-component [(selectedId)]=" myNumberId">
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/522725.html
下一篇：切換時從歷史記錄中洗掉組件