Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:14Length:1.2 hours

Next lesson playing in 5 seconds

Cancel

Free Preview: TypeScript Fundamentals

Introduction

01:35
  • Overview
  • Transcript

JavaScript is a very popular and widespread language, but it has a lot of limitations. When it was created, web pages were much simpler, and JavaScript was used for adding simple interactivity. The language has evolved since then, but it can be hard to create large-scale applications in JavaScript.

That's where TypeScript comes in. TypeScript is a superscript of JavaScript that adds strong typing and some really powerful tooling. You can annotate as much or as little of your code as you want. This makes it easier to specify APIs, and TypeScript's compile-time checking can eliminate a lot of errors in your code.

In this course, Markus Mühlberger will share the fundamentals to get you started using TypeScript in your apps. You'll learn the basic language syntax with some simple and practical examples, starting with typed variable declarations and working through namespaces, generics, decorators, and advanced types. You'll also get some pro tip dos and don'ts that are sure to save you some trouble in the future!

Learn JavaScript: The Complete Guide

We've built a complete guide to help you learn JavaScript, whether you're just getting started as a web developer or you want to explore more advanced topics.

1. Introduction

1.1 Introduction

JavaScript is a great and widespread language that is very flexible. Each browser implements its own version of JavaScript based on the specification that changes every year. But if you want to support a wider range of browsers, you are limited to a rather old version. With TypeScript you can use modern paradigms and static typing to improve your code readability and catch errors during compilation. Vanilla JavaScript already has all the functionality of a modern language, so that the TypeScript compiler can translate classes, arrow functions, and so on into something that is compatible with an older browser. Hello and welcome to this Envato Tuts+ course. My name is Markus Muhlberger, and you are watching TypeScript Fundamentals. In this course, you will learn about the TypeScript language and its feature set. You will learn about types, classes, interfaces, modules, and more. Throughout the course, I will compare TypeScript features to their equivalence in modern versions of JavaScript, if there are any. TypeScript is popularly pushed by Angular, and you are probably watching this course because of it. But there are many other projects that support TypeScript out of the box or are written in it. Let's get started with learning the TypeScript fundamentals in the first lesson. I will see you there.

1.2 What Is TypeScript?

Hi and welcome back to TypeScript Fundamentals. In this lesson, I'm giving you an introduction about what TypeScript really is and how it relates to the classic JavaScript. TypeScript is developed and maintained by Microsoft. It was first released in October 2012. TypeScript was intended for large scale web applications. These are based on JavaScript. So what makes it better? Well, first of all, TypeScript is just a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript code, then there are three major areas where TypeScript aims to improve JavaScript. The first concept is the one of strong typing, also known as static typing. If you come from languages like Java or any C-like language, you already know what this is. Strong typing requires you to specify a type for every variable or parameter you define and it ensures that only this type is used during a compilation step called type checking. This feature is optional in TypeScript, so you don't have to use it, but it makes debugging a lot easier. If the compiler can help you avoid mistakes, because of a wrong type. The second enhancement TypeScript makes to JavaScript is the extension of object-oriented functionality like clauses, interfaces, generics and so on. Some of those features though, they creep into newer versions of the ECMAScript specification. But on to browser support them and user's upgrade to a newer browser versions, it takes time, a lot of time. Especially big companies are very, very reluctant to upgrade to new possibly untested versions of web browsers. In grouping number three is the fact that by using a compiler and strict to constraints in typing, you can catch errors at compile-time instead of run-time which is usually the case with interpreted languages like JavaScript, Ruby or Python. With interpreted languages, you have the problem that until you run a certain piece of code, you don't know how it behaves or if there is an error beforehand. I've called it a compiler so far, because that is the much more common term for transforming a piece of code into another one. But technically, the word transpiler would be more appropriate. It is used when the compilation is from an input language that is very similar to the output language. So if you see the terms transpiling or transpiler somewhere, you now know that this basically means the same as compiling or a compiler. Of course, if you use a strongly typed language and want to integrate it with popular libraries like JQuery, MongoDB, D3 or even basic modules, you can run into problems when there is no type information available for them as they are written in plain old JavaScript. Much like in other languages like C++, you can have header files that define types for those, so you are all set. As you can see, there are a couple of advantages to using plain old JavaScript, especially when using TypeScript in a bigger project that uses a packager like web pack. Of course, with ECMAScript evolving every year, the differences get smaller over time, although static typing will at least take a couple of years until it will be added to the specification. To recap, TypeScript is a superset of JavaScript. It supports strong or static typing for variables, function parameters and return values. TypeScript extends JavaScript's object-oriented capabilities. By having compile time errors, less run-time errors should occur. Because of the jacks, the compiler makes you run this step. Now it's time to install the TypeScript compiler and write our first TypeScript program. We will do that in the next lesson. See you there.