The course is part of this learning path
This module introduces you to Classes and how to use them in TypeScript.
Learning Objectives
The objectives of this module are to provide you with and understanding of:
- What classes are
- How to use inheritance in TypeScript Classes
- How to use Access Modifiers
- How to use Abstracts
- How to use Structural Typing
Intended Audience
This learning path is aimed at all who wish to learn how to use TypeScript
Prerequisites
It is essential you understand the face of contemporary web development to attend this course. You should have a good working knowledge of Javascript. Please note: Before attending this class delegates must have a Microsoft account (signing up one is free).
Feedback
We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think.
Yes, 2019 JavaScript has no access modifier keywords, although the 2020 spec will have private properties allowed. You'll do this by adding hash to the front of the class property in the constructor. The syntax is already supported in TypeScript 3.8, however, TypeScript has been implementing these for some time, and they follow the same rules as those used in other languages like C Sharp and Java. The public access modifier means that the property can be accessed from anywhere. It's implemented by default, although being explicit is always best practice. You can see that in this public car class, all of its properties and functions are specified as public, trying to access the property directly is allowed and so is direct mutation. The TypeScript private access modifier prevents access to properties and functions from outside of the class, and private properties are not inherited. In the code here, we have set the class properties to private. You can see that on line 18 that trying to access the speed property shows an error, but if we compare to JavaScript, obviously we'll get the value logged out. Protected properties are much the same as private properties except that they are inherited by child classes. We've got a class with some protected properties in a class that extends it. The extended class uses the protected speed property and a method to return a string with the current value of speed in it. You'll notice that the constructor of the parent class is protected. That's on line five, this means that it's inherited but not callable. So, it's not possible to make an instance of the protected vehicle class. Under the class definitions on line 26 and on, we demonstrate the error from trying to call a protected constructor and the result of instantiating the child class instance. Recall it's show speed function and this is okay. The function is an example of getter method and we'll examine those along with setters later. Trying to access the speed directly on the instance gives an error. Read-only is the TypeScript version of final in Java, and it's taken directly from C Sharp. Properties declared in a class as read-only, have to be initialized that declaration, or in the constructor and cannot be changed again. We've created an extended classes with read-only properties. You can see that if we try and mutate these lines 23 and 24, we get an arrow shown as this properties is defined as read-only. You cannot use const within class declarations. We can create static members that are visible on the class itself rather than its instances. This is useful for data and behavior that does not change dependent on class instances. In fact, the static property doesn't need an instance of the class to be accessed. Static properties for a class can be added using the static keyword. Remember that mutating this value affects every instance of the class. The value can be accessed using the class name and the static property name. Even if an instance of the class does not exist. This is shown on line 15 and below. Initially the value of count from the static car class is zero. We then use a loop to create 10 instances of the class with a constructor adding one to count each time. We then log out. The value of count, is now 10 as you would expect. Creating another instance of the static car adds one more to the count. TypeScript allows the use of prompted properties and constructors. This allows the creation and initialization of a class property in one place, and it's a nice syntactic shorthand. They are declared by adding an access modifier to a constructor argument, as on line four and line 13. Notice how the class doesn't set any value inside the body of the constructor. This massively reduces the need for some repetition and virtually identical code. We provided exactly the same class without using parameter properties on line 23 and below. It was much more typing. If you go into use angular in the future, you'll see this pattern in code word dependencies are injected into classes.
Lectures
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.