TypeScript wiki (TypeScript-Handbook/pages/Classes.md) 第一个例子

Question

https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Classes.md

我正在尝试学习 TypeScript。类中的第一个例子：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

这看起来很简单，但是当我登录欢迎程序时：console.log(greeter); 而不是 "Hello World" 我得到 "Greeter {greeting: "world"}"

我的设置： package.json：（仅 TypeScript；无其他库）

{
  "name": "typescript learning",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server"
  },
  "license": "ISC",
  "dependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.0"
  }
}

和tsconfig.json只是默认值：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
    "typescript.notes.ts"
  ]
}

那么，我是不是漏掉了一些基本的东西？或者这只是一个不应该评估的不完整示例？显然，我对 TypeScript 还是很陌生，除了表面价值之外，没有任何背景可以举出例子。非常感谢任何输入， -迈克

Answer 1

您的问题是：

let greeter = new Greeter("world");
console.log(greeter);

这只显示 class 实例本身，并没有实际调用 class.

上的方法

所以你想要的是：

let greeter = new Greeter("world");
console.log(greeter.greet());

同时在评论中回答您的问题：

One quick question, even though the method greet is part of the class, It doesn't get evaluated by calling the class? I see this is the case, but again, not what I expected. I'm trying to get a model in my mind for using the class instead of separate function.

从本质上讲，class 基本上只不过是出于某种原因在逻辑上 "belong" 组合在一起的方法和变量的集合。

例如，如果我有一个 class Car，它可能有变量 fuel 和方法 drive() 和 refuel()。调用 drive() 和 refuel() 方法会改变变量 fuel。这样，您可以轻松地创建一个、两个或一百个一个 class 的实例，并且仍然可以轻松地跟踪内容。 如果没有 面向对象编程，所有这些都将很难跟踪，尤其是当您开始创建多辆汽车时。

显然，您不想在创建新车时立即开始 drive()！您的代码中有 constructor 方法，每次创建 class 时，会自动获得运行。这对于初始化某些东西通常很有用，但实际上只不过是一些东西的快捷方式：

let greeter = new Greeter();
greeter.set_message("world")

除了你不能忘记使用它 ;-) 构造函数通常用于 class 应该始终具有的变量，例如示例中的字符串，或者在我们的 Car 示例中，将燃料设置到某个初始水平。因此得名，需要构造 class.

在 "real world" 中，大多数 class 都比较抽象，并且有一些功能允许您做更多的事情（例如继承），但基本思想是相同的： class 是一个集合，如果方法和变量在逻辑上属于相同的 "thing" 或 "object" - 我觉得一些指南使它比需要的复杂得多，顺便说一句他们立即想从一开始就引入诸如继承之类的概念，而没有完全解释 classes.

的基本目的

如果您刚开始时没有完全理解所有内容，请不要担心。我认为很少有人这样做。我当然没有。几乎每个人一开始都会遇到这样的问题。

Answer 2

greeter 是一个对象。因此，调用 console.log(greeter); 是在记录 greeting 属性设置为 world 的实际对象。

您要登录 greeter.greet() 以便查看 "Hello, world."

TypeScript wiki (TypeScript-Handbook/pages/Classes.md) 第一个例子

TypeScript wiki (TypeScript-Handbook/pages/Classes.md) first example

typescript1.8