TypeScript构造函数中firstName与lastName报错问题咨询

嘿，我来帮你梳理下TypeScript里构造函数中firstName和lastName出现错误的常见场景，以及对应的解决办法！

场景1：未提前声明类属性就直接通过this赋值 #

这是最常见的错误，TypeScript是强类型语言，如果你没在类的顶层声明属性，直接在构造函数里用this.firstName赋值，编译器会认为你在访问一个未定义的属性。

错误代码示例：

class Person {
  constructor() {
    this.firstName = "Alice"; // 报错：属性“firstName”在类型“Person”上不存在
    this.lastName = "Smith";  // 同样报错
  }
}

修复方案：在类的顶层提前声明属性的类型（可以选择性添加初始值）：

class Person {
  // 声明属性及类型
  firstName: string;
  lastName: string;

  constructor() {
    this.firstName = "Alice";
    this.lastName = "Smith";
  }
}

场景2：未使用访问修饰符简化属性声明 #

如果你不想手动写属性声明，可以利用TypeScript的语法糖——在构造函数参数前添加public/private/protected访问修饰符，这样编译器会自动帮你在类中创建对应属性并完成赋值，省去手动声明和赋值的步骤。

错误代码（想通过参数传值但没加修饰符）：

class Person {
  constructor(firstName: string, lastName: string) {
    this.firstName = firstName; // 报错：属性“firstName”在类型“Person”上不存在
    this.lastName = lastName;
  }
}

修复方案：给参数加上访问修饰符：

class Person {
  // 加了public后，会自动创建类属性并赋值
  constructor(public firstName: string, public lastName: string) {
    // 这里不需要再手动赋值，直接可以通过this访问
  }
}

// 使用示例
const person = new Person("Alice", "Smith");
console.log(person.firstName); // 输出 "Alice"

场景3：属性类型不匹配 #

如果你的属性声明是string类型，但赋值时给了数字、布尔值等其他类型，也会触发错误。

错误代码示例：

class Person {
  firstName: string;
  lastName: string;

  constructor() {
    this.firstName = 123; // 报错：类型“number”不能赋值给类型“string”
  }
}

修复方案：确保赋值的内容和属性声明的类型一致：

class Person {
  firstName: string;
  lastName: string;

  constructor() {
    this.firstName = "Alice"; // 类型匹配，无错误
  }
}

如果你的代码不属于以上场景，可以把具体的错误提示和完整代码片段贴出来，我再帮你精准排查！

内容的提问来源于stack exchange，提问作者Tori