Typescript TS2339 属性在类型上不存在 - 类声明答案

【问题标题】：Typescript TS2339 Property doesn't exist on type - Class declerationTypescript TS2339 属性在类型上不存在 - 类声明
【发布时间】：2017-12-31 00:47:25
【问题描述】：

我正在使用 Typescript https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html#classes 中概述的确切示例

这是我在 app.ts 中运行的精确副本

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}



window.onload = () => {

    function greeter(person: Person) {
        return "Hello, " + person.firstName + " " + person.lastName;
    }

    var user = new Student("Jane", "M.", "User");

    document.body.innerHTML = greeter(user);

}

但我收到以下错误

ERROR in ./src/app.ts
(3,14): error TS2339: Property 'firstName' does not exist on type 'Student'.

ERROR in ./src/app.ts
(4,14): error TS2339: Property 'middleInitial' does not exist on type 'Student'.

ERROR in ./src/app.ts
(5,14): error TS2339: Property 'lastName' does not exist on type 'Student'.

ERROR in ./src/app.ts
(6,14): error TS2339: Property 'fullName' does not exist on type 'Student'.

我使用的是 typescript 2.4，这里是 tsconfig

{
  "compilerOptions": {
    "module": "es2015",
    "target": "es6",
    "sourceMap": true,
    "jsx": "react",
    "lib": [
      "es6",
      "scripthost",
      "dom"
    ],
    "rootDir": ".",
    "moduleResolution": "node"
  },
  "files": [
    "node_modules/@types/react-dom/index.d.ts",
    "node_modules/@types/react/index.d.ts",
    "typings/file-loader.d.ts"
    ],
  "exclude": [
    "node_modules/@types/whatwg-fetch",
    "node_modules/@types/whatwg-streams",
    "node_modules"
  ]
}

【问题讨论】：

您的代码似乎可以在 TypeScript 操场上编译。
我的 2.41。说你的代码没问题。重新启动你的 IDE :D 并尝试 class Student implements Person
一些注释，不需要 node_modules 上的 exclude 和 extra files 条目。让 tsc 完成它的工作。 :)
@Aron 是的，它可以在操场上工作，但不能在项目上工作......因此我很困惑......我重新启动了 IDE，运行干净npm install，删除了所有其他文件和这个是我试图找出它为什么不工作的代码的精简版本......

标签： javascript class typescript types

【解决方案1】：

您在构造函数中直接声明类的一些公共属性，因此您应该使用"this" 关键字

class Student {
    fullName: string;
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = this.firstName + " " + this.middleInitial + " " + this.lastName;
    }
}

编辑：working fiddle

【讨论】：

是的，但是当您删除 this.s 时，小提琴也可以工作，因此我要求 @MonteCristo 检查他的 IDE
我猜是来自 webpack 配置
@OrcusZ 确实是 webpack 我有这个规则rules: [{ test: /\.tsx?$/, loader: 'ts-loader' },{enforce: 'pre', test: /\.js$/, use: "source-map-loader"},{ enforce: 'pre', test: /\.ts?$/, use: "source-map-loader" }, { // For our normal typescript test: /\.ts?$/, use: [{ loader: 'awesome-typescript-loader', options: {configFileName: 'tsconfig.json'} }],exclude: /(?:node_modules)/,},]
我不得不摆脱正常的 .ts 扩展相关规则// For our normal typescript test: /\.ts?$/, use: [{ loader: 'awesome-typescript-loader', options: {configFileName: 'tsconfig.json'} }],exclude: /(?:node_modules)/,}
似乎是一个正常的配置。你测试了吗？

【解决方案2】：

这似乎工作正常？

var Student = (function() {
  function Student(firstName, middleInitial, lastName) {
    this.firstName = firstName;
    this.middleInitial = middleInitial;
    this.lastName = lastName;
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
  return Student;
}());

function greeter(person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);

<!-- TYPESCRIPT
var Student = (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
-->

【讨论】：