CODEWITHSUNDEEP
typescript1.8
Mike
Mike

Reputation: 3

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

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

I'm trying to learn TypeScript. The first example in Classes:

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

let greeter = new Greeter("world");

This seems straightforward, but when I log greeter: console.log(greeter); instead of getting "Hello World" I get "Greeter {greeting: "world"}"

My setup: package.json: (just TypeScript; no other libraries)

{
  "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"
  }
}

and tsconfig.json just defaults:

{
  "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"
  ]
}

So, am I missing something fundamental? Or is this just an incomplete example that shouldn't be evaluated? Obviously I'm still quite new to TypeScript and don't have any background to take examples apart from their face value. Many thanks for any input, -Mike

Upvotes: 0

Views: 83

Answers (2)

Martin Tournoij
Martin Tournoij

Reputation: 27842

Your problem is:

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

This only shows the class instance itself, and doesn't actually call a method on the class.

So what you want is:

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

To also answer your question in the comments:

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.

At its essence, a class is basically nothing more than a collection of methods and variables that logically "belong" together for some reason.

For example, if I have a class Car, it might have the variable fuel and the methods drive() and refuel(). Calling the drive() and refuel() methods would alter the variable fuel. This way, you can easily create one, two, or a hundred instances of one class, and still easily keep track of stuff. Without object-oriented-programming, all of that would be a lot harder to keep track off, especially when you start creating multiple cars.

Obviously, you don't want to immediately start drive() when creating a new car! There is the constructor method in your code, which does get run automatically every time a class is created. This is often useful to initialize some things, but is really nothing more than a shortcut for something like:

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

Except that you can't forget it to use it ;-) The constructor is often used for variables that the class should always have, like the string in your example, or, in our Car example, setting the fuel to some initial level. Hence the name, it is needed to construct the class.

In the "real world" most classes are a bit more abstract, and there are some features which allow you to do more (like inheritance), but the basic idea is the same: a class is a collection if methods and variables that logically belong to the same "thing" or "object" − I feel some guides make this a lot more complicated than it needs to be by the way, as they immediately want to introduce concepts such as inheritance right from the start without fully explaining the basic purpose of classes.

Don't worry if you don't fully comprehend everything when you're just starting out. I think few people do. I certainly didn't. Almost everyone struggles with stuff like this at first.

Upvotes: 1

djs
djs

Reputation: 1690

greeter is an object. So, calling console.log(greeter); is logging an the actual object whose greeting property is set to world.

You want to log greeter.greet() in order to see "Hello, world."

Upvotes: 0

Related Questions