如何使用 class-transformer 将打字稿 class 转换为纯 javascript 对象
How to convert typescript class to plain javascript object with class-transformer
我的 angular 应用程序中有一些打字稿 类 实例,我必须将其保存到 firebase。 Firebase 不支持自定义 类,所以我发现:https://github.com/typestack/class-transformer 似乎很适合我。
现在我正在创建我的对象,并尝试转换它。
这是我的对象。
export class Trip {
id: string;
owner: string;
name: string;
@Type(() => Date)
startDate: Date;
@Type(() => Date)
endDate: Date | undefined;
coverImageUrl: string;
@Type(() => Itinerary)
itinerary: Itinerary;
constructor() {
this.itinerary = new Itinerary();
}
}
export class Itinerary {
@Type(() => ItineraryStats)
stats: ItineraryStats;
@Type(() => Step, {
discriminator: {
property: '__type',
subTypes: [
{ value: ActivityStep, name: 'ActivityStep' },
{ value: NightStep, name: 'NightStep' },
{ value: PointOfInterest, name: 'PointOfInterest' },
{ value: TravelStep, name: 'TravelStep' },
],
},
})
steps: Step[];
constructor() {
this.steps = Step[0];
this.stats = new ItineraryStats();
}
}
export class ItineraryStats {
///In days
duration: number;
//in hours
driveTime: number;
//in kilometers
driveDistance: number;
averageDriveDistancePerDay(): number {
return this.driveDistance / this.duration;
}
averageDriveTimePerDay(): number {
return this.driveTime / this.duration;
}
}
export abstract class Step {
@Type(() => Date)
start: Date;
@Type(() => Date)
end: Date;
duration: number;
enforcedStartStop: boolean;
warning: string;
}
export class ActivityStep extends StopStep {
duration: number;
constructor() {
super();
this.id = Guid.newGuid();
}
}
export class NightStep extends StopStep {
nightNumber: number;
numberOfNight: number;
}
export class PointOfInterest {
@Type(()=>PointOfInterest)
type: PointOfInterest;
}
export class TravelStep extends Step {
@Type(() => TravelMode)
Mode: TravelMode;
PolyLines: string;
}
我正在创建一个“旅行”并尝试转换它:
const trip = new Trip();
trip.owner= firebase.auth().currentUser.uid;
trip.name= action.name;
trip.startDate = action.startDate,
trip.endDate = action.endDate;
console.log(trip);
const converted = classToPlain(trip)
但我明白了:
ERROR TypeError: Cannot read property 'constructor' of undefined
at TransformOperationExecutor.js:207
at Array.find (<anonymous>)
at TransformOperationExecutor.transform (TransformOperationExecutor.js:207)
at TransformOperationExecutor.transform (TransformOperationExecutor.js:266)
at ClassTransformer.classToPlain (ClassTransformer.js:10)
at classToPlain (index.js:8)
at Object.toFirestore (trips.firestore.ts:16)
at ma (index.cjs.js:15983)
at n.set (index.cjs.js:15359)
at AngularFirestoreDocument.set (angular-fire-firestore.js:512)
我刚刚创建的对象:
我想我的对象处于不正确的状态,或者我的对象定义不正确,但我找不到什么?
错误在于 Itinerary
的定义,更具体地说,代码行 this.steps = Step[0];
将变量设置为未定义并且很可能不是故意的。 class-transformer
库可以处理 属性 steps
是一个空数组、步骤数组,或者一开始就不存在,但当值设置为未定义时崩溃。
export class Itinerary {
@Type(() => ItineraryStats)
stats: ItineraryStats;
@Type(() => Step, {
discriminator: {
property: '__type',
subTypes: [
{ value: ActivityStep, name: 'ActivityStep' },
{ value: NightStep, name: 'NightStep' },
{ value: PointOfInterest, name: 'PointOfInterest' },
{ value: TravelStep, name: 'TravelStep' },
],
},
})
steps: Step[];
constructor() {
// Step[0] causes the crash, because its undefined, either dont set it or
// set it to this.steps = []
this.steps = Step[0];
this.stats = new ItineraryStats();
}
}
更多详情:
由于在 属性 steps
上使用了鉴别器,因此启动了相应的逻辑并将 subTypes
下定义的构造函数与当前值的构造函数进行比较以找到正确的子类型名称:
if (this.transformationType === TransformationType.CLASS_TO_PLAIN) {
subValue[targetType.options.discriminator.property] = targetType.options.discriminator.subTypes.find(
subType => subType.value === subValue.constructor
).name;
}
Step[0]
未定义最终导致此行 subValue.constructor
崩溃。
我的 angular 应用程序中有一些打字稿 类 实例,我必须将其保存到 firebase。 Firebase 不支持自定义 类,所以我发现:https://github.com/typestack/class-transformer 似乎很适合我。
现在我正在创建我的对象,并尝试转换它。
这是我的对象。
export class Trip {
id: string;
owner: string;
name: string;
@Type(() => Date)
startDate: Date;
@Type(() => Date)
endDate: Date | undefined;
coverImageUrl: string;
@Type(() => Itinerary)
itinerary: Itinerary;
constructor() {
this.itinerary = new Itinerary();
}
}
export class Itinerary {
@Type(() => ItineraryStats)
stats: ItineraryStats;
@Type(() => Step, {
discriminator: {
property: '__type',
subTypes: [
{ value: ActivityStep, name: 'ActivityStep' },
{ value: NightStep, name: 'NightStep' },
{ value: PointOfInterest, name: 'PointOfInterest' },
{ value: TravelStep, name: 'TravelStep' },
],
},
})
steps: Step[];
constructor() {
this.steps = Step[0];
this.stats = new ItineraryStats();
}
}
export class ItineraryStats {
///In days
duration: number;
//in hours
driveTime: number;
//in kilometers
driveDistance: number;
averageDriveDistancePerDay(): number {
return this.driveDistance / this.duration;
}
averageDriveTimePerDay(): number {
return this.driveTime / this.duration;
}
}
export abstract class Step {
@Type(() => Date)
start: Date;
@Type(() => Date)
end: Date;
duration: number;
enforcedStartStop: boolean;
warning: string;
}
export class ActivityStep extends StopStep {
duration: number;
constructor() {
super();
this.id = Guid.newGuid();
}
}
export class NightStep extends StopStep {
nightNumber: number;
numberOfNight: number;
}
export class PointOfInterest {
@Type(()=>PointOfInterest)
type: PointOfInterest;
}
export class TravelStep extends Step {
@Type(() => TravelMode)
Mode: TravelMode;
PolyLines: string;
}
我正在创建一个“旅行”并尝试转换它:
const trip = new Trip();
trip.owner= firebase.auth().currentUser.uid;
trip.name= action.name;
trip.startDate = action.startDate,
trip.endDate = action.endDate;
console.log(trip);
const converted = classToPlain(trip)
但我明白了:
ERROR TypeError: Cannot read property 'constructor' of undefined
at TransformOperationExecutor.js:207
at Array.find (<anonymous>)
at TransformOperationExecutor.transform (TransformOperationExecutor.js:207)
at TransformOperationExecutor.transform (TransformOperationExecutor.js:266)
at ClassTransformer.classToPlain (ClassTransformer.js:10)
at classToPlain (index.js:8)
at Object.toFirestore (trips.firestore.ts:16)
at ma (index.cjs.js:15983)
at n.set (index.cjs.js:15359)
at AngularFirestoreDocument.set (angular-fire-firestore.js:512)
我刚刚创建的对象:
我想我的对象处于不正确的状态,或者我的对象定义不正确,但我找不到什么?
错误在于 Itinerary
的定义,更具体地说,代码行 this.steps = Step[0];
将变量设置为未定义并且很可能不是故意的。 class-transformer
库可以处理 属性 steps
是一个空数组、步骤数组,或者一开始就不存在,但当值设置为未定义时崩溃。
export class Itinerary {
@Type(() => ItineraryStats)
stats: ItineraryStats;
@Type(() => Step, {
discriminator: {
property: '__type',
subTypes: [
{ value: ActivityStep, name: 'ActivityStep' },
{ value: NightStep, name: 'NightStep' },
{ value: PointOfInterest, name: 'PointOfInterest' },
{ value: TravelStep, name: 'TravelStep' },
],
},
})
steps: Step[];
constructor() {
// Step[0] causes the crash, because its undefined, either dont set it or
// set it to this.steps = []
this.steps = Step[0];
this.stats = new ItineraryStats();
}
}
更多详情:
由于在 属性 steps
上使用了鉴别器,因此启动了相应的逻辑并将 subTypes
下定义的构造函数与当前值的构造函数进行比较以找到正确的子类型名称:
if (this.transformationType === TransformationType.CLASS_TO_PLAIN) {
subValue[targetType.options.discriminator.property] = targetType.options.discriminator.subTypes.find(
subType => subType.value === subValue.constructor
).name;
}
Step[0]
未定义最终导致此行 subValue.constructor
崩溃。