我有一個介面 ( Vehicle)，一個實作它的類 ( Car) 并有一些方法 ( isColorRed)：
export interface Vehicle{
color : string;
}
export class Car implements Vehicle{
color : string;
constructor(obj){
this.color = obj.color;
}
isColorRed(){
return color === 'red' ? true : false;
}
}
我Car從后端獲得了一個 s 陣列，并且只想存盤紅色的陣列：
...
carsThatAreRed : Car[];
...
this.httpClient.get<Car[]>(carsUrl).pipe(
map(cars => cars.filter(car => car.isColorRed()))
).subscribe(
{
next : (carsThatAreRed) => {
this.carsThatAreRed = carsThatAreRed;
}
}
)
并且此請求失敗并寫入開發控制臺
isColorRed()不是函式
當我從接收到的陣列中的Car每個物件中顯式實體化物件時，它就起作用了。Car
...
.pipe(
map(cars => cars.map(car => new Car(car)).filter(car => car.isColorRed()))
)
...
為什么沒有顯式映射就不能作業？
uj5u.com熱心網友回復：
這是一個運行時錯誤。你告訴 TypeScript 你得到的是它的 Cars，但在運行時它只是普通的 JSON 物件，沒有任何isColorRed方法，除非你明確地將它們轉換為 Cars。沿著這條線
this.httpClient.get<Vehicle[]>(carsUrl)
.pipe(
map((vehicles) => vehicles.map(vehicle => new Car(vehicle))), // now we made Cars
map(cars => cars.filter(car => car.isColorRed()))
uj5u.com熱心網友回復：
我們在typescript使用asor時所做的事情<>被稱為Type assertions.
型別斷言不會
plain javascript object轉換為custom type object.型別斷言暗示
compiler / IDE型別斷言是告訴編譯器“相信我，我知道我在做什么”的一種方式。
型別斷言沒有運行時影響，純粹由編譯器使用。
看一下編譯后的 JavaScript，你會看到型別斷言（強制轉換）消失了，因為它只用于編譯
這就是 IDE / Compiler 能夠在isColorRed之后顯示建議的原因car.
isColorRed無法回應[{plain javascript object}]
因此，為了isColorRed對汽車物件使用方法，您需要Car使用 javascript 物件值來實體化物件。
this.httpClient
.get<Car[]>(carsUrl)
.pipe(map((cars) => cars.filter((car: Car) => new Car(car).isColorRed())))
.subscribe({
next: (carsThatAreRed) => {
this.carsThatAreRed = carsThatAreRed;
},
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/460117.html