Question

我是打字稿和网页设计世界的新手，所以为了把我的脚放在门上，我正在编写一个程序，在加载和重新加载时，它会输出一辆随机的汽车。示例输出如下：

门数：4气缸数量：4变速箱类型：车身FWD型号：SUV

您可以获得其他结果，但这只是布局的一个示例。

我的打字稿文件中的代码如下：

class Car {
    car: string;
    door: number;
    cylinder: number;
    transmission: string;
    body: string;
    element: HTMLElement;

    constructor(door: number, cylinder: number, transmission: string, body: string) {
        this.car = door + " " + cylinder + " " + transmission + " " + body;
    }

}

interface FullCar {
    door: number;
    cylinder: number;
    transmission: string;
    body: string;
}

function randomCarGenerator(car: FullCar) {

    return "Number of Doors: " + car.door + "Number of Cylinders: " + car.cylinder + "Type of Transmission: " + car.transmission + "Type of Car Body: " + car.body;

}

var randomBody = ['Coupe', 'Sedan', 'Wagon', 'SUV'];
var randomDoor1 = [2, 4, 5];
var randomDoor2 = [2, 4];
var randomCylinder = [2, 3, 4];
var randomTransmission1 = ['AWD', 'Standard', 'FWD'];
var randomTransmission2 = ['Standard', 'FWD'];

var body = randomBody[Math.floor(Math.random() * randomBody.length)];
if (body == 'Coupe') {
    var door = 2;
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)];
    var transmission = randomTransmission2[Math.floor(Math.random() * randomTransmission2.length)];

    var car = new Car(door, cylinder, transmission, body);
    document.body.innerHTML = randomCarGenerator(car);
}
else if (body == 'Sedan' || body == 'Wagon') {
    var door = randomDoor1[Math.floor(Math.random() * randomDoor1.length)];
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)];
    var transmission = randomTransmission1[Math.floor(Math.random() * randomTransmission1.length)];

    var car = new Car(door, cylinder, transmission, body);
    document.body.innerHTML = randomCarGenerator(car);
}
else {
    var door = randomDoor2[Math.floor(Math.random() * randomDoor2.length)];
    var cylinder = randomCylinder[Math.floor(Math.random() * randomCylinder.length)];
    var transmission = randomTransmission1[Math.floor(Math.random() * randomTransmission1.length)];

    var car = new Car(door, cylinder, transmission, body);
    document.body.innerHTML = randomCarGenerator(car);

}

当我运行时，我得到的结果是

门数：未定义圆柱数未定义等等

我的问题：我是如何声明宣布价值的？或者是否有一个完全不同的问题，我没有看到？

Answer 1

class Car {
    car: string;
    door: number;
    cylinder: number;
    transmission: string;
    body: string;
    element: HTMLElement;

    constructor(door: number, cylinder: number, transmission: string, body: string) {
        this.car = door + " " + cylinder + " " + transmission + " " + body;
    }

}

在这里：

在班级
接受具有相同名称的构造函数参数
设置其中一个类字段
保留所有其他类字段未初始化

然后在这个函数中

function randomCarGenerator(car: FullCar) {

    return "Number of Doors: " + car.door + "Number of Cylinders: " + car.cylinder + "Type of Transmission: " + car.transmission + "Type of Car Body: " + car.body;

}

您首先阅读了您从未初始化过的所有字段。

您可以通过初始化字段来解决此问题：

class Car {
    car: string;
    door: number;
    cylinder: number;
    transmission: string;
    body: string;
    element: HTMLElement;

    constructor(door: number, cylinder: number, transmission: string, body: string) {
        this.car = door + " " + cylinder + " " + transmission + " " + body;
        this.door = door;
        this.cylinder = cylinder;
        // etc for the other fields
    }

}

TypeScript中一个很好的语法快捷方式是你可以使用访问修饰符（例如public）自动创建这些字段：

class Car {
    car: string;
    // Unused, not sure what you intend to do with this one
    element: HTMLElement;

    constructor(public door: number, public cylinder: number, public transmission: string, public body: string) {
        this.car = door + " " + cylinder + " " + transmission + " " + body;
    }

}

在typescript中定义类型

1 个答案: