1. Home
  2. Training Library
  3. An Introduction to Typescript

An Introduction to Typescript

Developed with
QA

Contents

keyboard_tab

The course is part of this learning path

play-arrow
Typescript: An Introduction
Overview
DifficultyBeginner
Duration11m
Students65
Ratings
5/5
starstarstarstarstar

Description

We begin with an introduction to what Typescript is.

Learning Objectives

The objectives of this module are to provide you with and understanding of:

  • What TypeScript is
  • Know how to install the TypeScript Toolset

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 for 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.

Transcript

Hi and thanks for joining us on Programming with TypeScript. This course examines how TypeScript can be used to help JavaScript developers make more robust applications. If you follow the learning path through, you should be able to set up a scalable development environment for using TypeScript. Understand what types are available and apply them appropriately to your variables. Create and use classes with inheritance, access modifiers, abstracts and statics. Create and use interfaces. Implement generics with functions, classes, constraints and interfaces. Use JavaScript ES2015 modules within TypeScript development, and understand and use decorators. To get the most out of this learning path, you should have solid experience with JavaScript. And if that's not the case, check out the JavaScript learning paths before continuing here. Let's get started by looking into TypeScript's origins. In this video, we'll explore what TypeScript is and why you should use it, and what tools you'll need access to, to have a scalable development environment, and how you can set this up. TypeScript is a typed superset of the JavaScript language. This means that all of the features of JavaScript can be used, plus some additional features, functions and syntax. When you compile TypeScript, it compiles to plain JavaScript, and that's at ES3 standard by default. It introduces a way to statically type check your JavaScript code. Type safety in JavaScript is optional and often inferred. The language is maintained by the open source community and this helps keep it up-to-date with the latest developments in ECMAScript's specification. In fact, some developments in this started out in TypeScript. The name TypeScript is a trademark of the Microsoft Corporation. So why should we use TypeScript? The overarching reason is that it makes your JavaScript code more robust and it's easier to imply how it should work. IDEs such as VS code have TypeScript linting integrated which helps spot potential compile errors during development, making the code more robust from start if you use it. If set up correctly, you can use modern JavaScript in projects immediately without needing to worry about polyfilling yourself. The compilation process converts all code to ES3 by default. Although this can be modified depending on your need. Types are optional. You can create a TypeScript file simply by renaming a JavaScript file to a TypeScript file with a .ts extension. You should still get valid JavaScript back from the compiler. Using types gives a clearer indication as to how your code can be used without having to write additional documentation. This makes maintenance easier for other developers and maybe even yourself. TypeScript is used in Angular development. Although it can be used in React, other libraries and frameworks and even in vanilla development. The first and possibly only lesson you need about TypeScript is this, if you produce valid JavaScript from TypeScript code then that's what you'll get. Regardless of whether it's type-safe or not. It's important to understand that although it's classified as a language, essentially it's a developer's tool. It helps JavaScript developers make applications that are more type-safe. Compilation and IDE errors are only visible to the developer. TypeScript is never deployed. Ignoring these errors is counter-productive and negates the use of TypeScript, especially if valid type-unsafe JavaScript is produced as a result. Here we show some TypeScript code. We've specified that the variable x should be of type number. We ask for a value for x through a prompt window. We then try and add x to 10 and log out the result. In the code window, we can see that there's a red squiggle under the x, indicating a problem. Hovering over it suggests that x will be a string as a result of this line of code and that it's not compatible with a type of number. We then compile the file, producing a JavaScript file. But we get the same error message on compilation. We'll go through how to do this in more detail in the next module. Continuing to ignore the errors being pointed out. We've opened the JavaScript file. Obviously there's no IDE errors here because what we wrote is valid JavaScript. You should be able to work out that whatever the user types in the prompt, JavaScript will log a concatenation of the value of x and 10. If we were to work through the IDE or compilation error, we would realize that we need to pass the value of prompt into a number of some form and probably check to see if it was not a number and reask until we got a valid numeric value. This is were the power of TypeScript is for JavaScript developers. It highlights type-safety issues particularly those we may miss in our eagerness to get the job done.

About the Author

Students1159
Labs8
Courses29
Learning paths5

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.