As commented in @Benson answer, I used this example in my code and I found it very useful. However I found with the Object is possibly 'undefined'.ts(2532) error when I tried to make calculations with my class variable types, as the question mark leads them to be of type AssignedType | undefined. Even if undefined case is handled in later execution or with the compiler type enforce <AssignedType> I could not get rid of the error, so could not make the args optional.I solved creating a separated type for the arguments with the question mark params and the class variables without the question marks. Verbose, but worked.
下面是原始代码，给出了类方法()中的错误，如下所示:
/** @class */
class Box {
public x?: number;
public y?: number;
public height?: number;
public width?: number;
// The Box class can work double-duty as the interface here since they are identical
// If you choose to add methods or modify this class, you will need to
// define and reference a new interface for the incoming parameters object
// e.g.: `constructor(params: BoxObjI = {} as BoxObjI)`
constructor(params: Box = {} as Box) {
// Define the properties of the incoming `params` object here.
// Setting a default value with the `= 0` syntax is optional for each parameter
const {
x = 0,
y = 0,
height = 1,
width = 1,
} = params;
// If needed, make the parameters publicly accessible
// on the class ex.: 'this.var = var'.
/** Use jsdoc comments here for inline ide auto-documentation */
this.x = x;
this.y = y;
this.height = height;
this.width = width;
}
method(): void {
const total = this.x + 1; // ERROR. Object is possibly 'undefined'.ts(2532)
}
}
const box1 = new Box();
const box2 = new Box({});
const box3 = new Box({ x: 0 });
const box4 = new Box({ x: 0, height: 10 });
const box5 = new Box({ x: 0, y: 87, width: 4, height: 0 });
所以变量不能在类方法中使用。
如果像这样纠正，例如:
method(): void {
const total = <number> this.x + 1;
}
现在出现这个错误:
Argument of type '{ x: number; y: number; width: number; height: number; }' is not
assignable to parameter of type 'Box'.
Property 'method' is missing in type '{ x: number; y: number; width: number; height:
number; }' but required in type 'Box'.ts(2345)
好像整个arguments bundle不再是可选的了。
因此，如果创建了带有可选参数的类型，并且从可选参数中删除了类变量，我就实现了我想要的，参数是可选的，并且能够在类方法中使用它们。下面是解决方案代码:
type BoxParams = {
x?: number;
y?: number;
height?: number;
width?: number;
}
/** @class */
class Box {
public x: number;
public y: number;
public height: number;
public width: number;
// The Box class can work double-duty as the interface here since they are identical
// If you choose to add methods or modify this class, you will need to
// define and reference a new interface for the incoming parameters object
// e.g.: `constructor(params: BoxObjI = {} as BoxObjI)`
constructor(params: BoxParams = {} as BoxParams) {
// Define the properties of the incoming `params` object here.
// Setting a default value with the `= 0` syntax is optional for each parameter
const {
x = 0,
y = 0,
height = 1,
width = 1,
} = params;
// If needed, make the parameters publicly accessible
// on the class ex.: 'this.var = var'.
/** Use jsdoc comments here for inline ide auto-documentation */
this.x = x;
this.y = y;
this.height = height;
this.width = width;
}
method(): void {
const total = this.x + 1;
}
}
const box1 = new Box();
const box2 = new Box({});
const box3 = new Box({ x: 0 });
const box4 = new Box({ x: 0, height: 10 });
const box5 = new Box({ x: 0, y: 87, width: 4, height: 0 });
感谢任何花时间阅读并试图理解我想要表达的观点的人的评论。
提前谢谢你。
