Using ES6 with TypeScript

This course teaches how to use the new syntax features of ES6 today, with TypeScript as a transpiler.
Course info
Rating
(109)
Level
Intermediate
Updated
Feb 25, 2016
Duration
2h 15m
Table of contents
Description
Course info
Rating
(109)
Level
Intermediate
Updated
Feb 25, 2016
Duration
2h 15m
Description

This course is for JavaScript developers who want to learn the new syntax features of ES6 - officially, ECMAScript 2015. Using only free and cross-platform tools, Steve Ognibene shows the ES6 features that can be transpiled to work in production today. This course focuses on general-purpose language features, so the information is relevant to users of any client or server-side JavaScript framework or platform. This course uses TypeScript as the ES6 to ES5 transpiler. No previous TypeScript knowledge is required, and the vast majority of the course content is applicable to future native-ES6 environments or other transpilers.

About the author
About the author

Steve Ognibene is an application developer in New York City specializing in SQL Server, C#, VB.NET and TypeScript. Steve is an active contributor to open source projects and is the author of the “T-SQL Flex” add-in for SQL Server Management Studio.

More from the author
Practical TypeScript Migration
Intermediate
2h 21m
17 Apr 2015
Section Introduction Transcripts
Section Introduction Transcripts

New ES6 Syntax
Welcome back to Using ES6 with TypeScript. In this module we're going to cover much of the new ES6 syntax. Everything we cover will work as in future browsers and JavaScript environments, but to get this code working in today's environments we'll have to use a transpiler. As we discussed in the last module a transpiler takes the code you wrote and transforms it to some other code that actually runs. We'll use TypeScript to transpile our ES6-style code to ES5 style. With a transpiler all the features we discuss in this module can be used today in production with NodeJS or with any ES5 browser. In fact most of the code can even be used in ES3 browsers, like IE8 and below. I'll highlight it whenever something can't be. The content in this course assumes that you have at least TypeScript 1. 5, I'll let you know whenever a newer TypeScript version is required to get something to work right. If TypeScript can't transpile an ES6 feature it'll usually give an error. In that case we can still TypeScript to transpile our ES6-style TypeScript to ES6-style JavaScript, and then we can use a second transpiler, in this case Babel, to transpile the ES6 JavaScript to ES5. This may sound complicated, but it's easy to set up with atom-typescript and we'll cover when you might need to do that and how. The first new feature I want to cover is the let keyword. This is a new keyword for declaring variables and it works somewhat differently than var. To help demonstrate the difference let's quickly review two distinctive characteristics of var in JavaScript, hoisting and functional scope.

ES6 Classes
Welcome back to Using ES6 with TypeScript. In this module we'll talk about ES6 classes. Before ES6 JavaScript developers had many excellent tools in their toolbox to enable programming with objects. Among the best of these tools are prototypal inheritance or delegation, the simple object literal syntax, and patterns involving factory functions. ES6 adds a class-based single-inheritance manner of object oriented programming to JavaScript. ES6 classes might feel somewhat familiar to developer coming from other languages, such as C#, or Java, though there's much less ceremony. TypeScript supports either transpiling ES6 classes to a constructor pattern that works in ES3 or ES5 environments, or it can emit classes natively when targeting ES6. With ES6 JavaScript objects story is now multi-paradigm. Developers who prefer object composition should still use prototypal inheritance with objects linking to other objects. Developers who instead prefer the familiarity of class hierarchies now have first class syntax support for that in JavaScript, and they could choose to write code using that pattern. In this module I'll provide an overview of ES6 classes and I'll highlight some of the small differences between what's legal in ES6 and what TypeScript will compile without error.