假設我有兩個不同的課程：
class Car{
drive(){
console.log('Driving!')
}
}
class Plane{
fly(){
console.log('Flying!')
}
}
然后有一個簡單的工廠，它根據提供的字串回傳一個不同的物件：
type PossibleObjects = 'car' | 'plane';
function vehicleFactory(wantedObject:PossibleObjects){
if(wantedObject === 'car')return new Car()
if(wantedObject === 'plane')return new Plane()
return new Car()//Just to avoid undefined
}
當我呼叫這個工廠時，Typescript 似乎無法識別回傳的特定物件：
const bmw = vehicleFactory('car')//Would expect Typescript to infer the resulted object from now on.
bmw.drive()//Error: Property 'drive' does not exist on type 'Car | Plane'. Property 'drive' does not exist on type 'Plane'.
即使“vehicleFactory”顯然是用“car”引數呼叫的，Typescript 也不能??識別“bmw”上的任何方法，因為 Car 和 Plane 不共享這個方法。
有沒有辦法克服這個問題，讓 TS 知道回傳的特定物件？
uj5u.com熱心網友回復：
您可以添加泛型型別并使回傳取決于泛型引數而不是實際結果。這種方法有助于消耗您的功能，但不能保護您的功能本身：
type PlaneOrCar<T extends PossibleObjects> = T extends 'plane'
? Plane : Car;
type PlaneOrCarPar<T extends PossibleObjects> = T extends 'plane'
? 'plane' : 'car';
然后你可以像這樣使用它：
function vehicleFactory<T extends PossibleObjects>(
wantedObject: PlaneOrCarPar<T>): PlaneOrCar<T> {
if(wantedObject === 'car') return new Car() as any;
if(wantedObject === 'plane') return new Plane() as any;
return new Car() as any;
}
uj5u.com熱心網友回復：
您可以使用instanceof單詞檢查型別：
const bmw = vehicleFactory('car') as Car;
if(bmw instanceof Car) {
bmw.drive();
} else if(bmw instanceof Plane) {
bmw.fly();
}
uj5u.com熱心網友回復：
嘗試顯式轉換型別。
const bmw = vehicleFactory('car') as Car;
更多資訊在這里：https ://stackoverflow.com/a/67909863/15407577
或者，如果您希望更改類的設計，您可以創建一個由子類以不同方式實作的父類。像下面的東西。
abstract class Vehicle {
abstract move(): any
}
class Plane extends Vehicle {
move() {
console.log('Flying!');
}
}
class Car extends Vehicle {
move() {
console.log('Driving!');
}
}
type PossibleObjects = 'car' | 'plane';
function vehicleFactory(wantedObject: PossibleObjects): Vehicle {
switch (wantedObject) {
case 'car': {
return new Car()
}
case 'plane': {
return new Plane();
}
}
}
const bmw = vehicleFactory('car');
bmw.move();
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/493759.html
標籤：javascript 打字稿
下一篇：打字稿匯入/匯出