Creating a Class in TypeScript

Ari Picker
InstructorAri Picker
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

Typescript classes make traditional object oriented programming easier to read and write. In this lesson we learn about class syntax, what the constructor is and some interesting variable features.

[00:01] A typescript class is a function. Functions are objects, so they can have properties. Classes can also have methods. You don't use the word function or a colon when defining a class method, just the name of the method, parens, and curly brackets.

[00:23] Notice that I left the opponent argument untyped. For clarity and to catch errors, let's make an opponent type. Now we create some comic book character instances. Let's have Storm attack the Blob. Let's see if this works. Cool, no errors. Let's run the code. Storm attacked the Blob, nice.

[00:44] All of the class properties are public by default. We can add the public modifier to any of these properties, but it's unnecessary because that's their default. The secret identity property shouldn't be public, so let's make it a private access modifier. You can't access private class properties outside of the class. Let's see what the compiler says. Secret identity is private and only accessible within the class.

[01:10] We can set the private property and have less code by setting all of the properties for the comic book character instances when they are initialized. The class constructor gets called when the class instance is initialized. Now we need to update how the instances set their properties and to make sure that the private property got set, let's add a method to retrieve it.

[01:35] Let's call the get secret identity method and see if this works. Nice. Setting the class properties via the constructor is definitely better than before, but Typescript has a shorthand for setting property values when a class instance gets initialized. Now we can get rid of all this code, and we can get rid of all this code.

[01:59] Adding access modifiers to the constructor arguments lets the class know that they're properties of a class. If the arguments don't have access modifiers, they'll be treated as an argument for the constructor function and not properties of the class. Let's see if this works. Sweet.

[02:18] Typescript classes also have static properties. Static properties are associated with the class, not the instance. Our great team's static method is just returning an object. Notice that if I try to call the static method on the instance, it's unavailable. The static method is only available on the class.

[02:44] Let's check this out. Run the code. The console log is returning this object. It's got a name and an array of comic book characters.

[02:54] Even though static members can't be called by the instance, they can update instance private members. Let's create a private class property and set that property in our static method. Let's rename the static method to create an assigned team. We already have the object. For each member of the team, let's assign their private team property as the team object that's being created.

[03:19] I make sure that this is working. Let's make another method that gets the team name from the instance. We need to clean this part up and call get team name. Run the compiler and the code, nice.

[03:36] To review, we've learned about access modifiers and the difference between public and private. The constructor is run when the class instance is initialized, and the shorthand for setting class properties allows us to write less code. We've learned that static properties can only be referenced from the class, not the instance, and how static properties have access to an instances private properties.

dong cai
dong cai
~ 5 years ago

Putting the property inside the class ComicBookCharacter is not a very good example.

Cityblock IT Team
Cityblock IT Team
~ 5 years ago

Why are you able to type instance properties (like alias, health, strength, etc.) without using the ! definite assignment? I'm seeing a TS error in my own class where I must define those vars in the constructor function or use some sort of initializer

Markdown supported.
Become a member to join the discussionEnroll Today