Welcome to this exploration of the Build 2016 talk “What’s New in TypeScript” by Anders Hejlsberg.

Anders was the original author of Turbo Pascal and the chief architect of Delphi.

He works for Microsoft as the lead architect of C# and core developer on TypeScript.

Introduction to TypeScript

Anders begins the talk describing TypeScript as JavaScript that scales, that is scales to medium and large applications.

He mentions the huge progress we’ve seen in JavaScript development over the last few days with excellent frameworks like Angular and React.

However JavaScript was never engineered for writing large scale applications. He says writing applications with 100,000 or even 1,000,000 lines of JavaScript is really hard due to dynamic nature of JavaScript.

Having static types is important so that the IDE can reason about what’s going on in your program and assist you with refactorings etc.

This is why Microsoft created a statically typed superset of JavaScript that compiles to plain JavaScript, which works on any browser, any host and any Operating System, and is open source.

Anders says he’s having more fun on the TypeScript project than he’s had in decades!

The Feature Gap (4 mins)

TypeScript also allows you to use most of the latest ECMAScript 2015 features, however at (4:50) we see “the feature gap” – state of the art JS is well ahead of programming on the server (e.g. what Node JS supports), and even further ahead of what even the very latest web browsers support.

In 2015 it wasn’t even clear that you could assume your browser supported all ECMAScript 5 features. There is a wide gap between what we as developers would like to be using, and the features available on what we have to target.

We have seen that this gap is not narrowing: as more features are supported in browsers and web server platforms, newer features are added to specifications which are months or years away from being supported.

TypeScript Demo with Visual Studio Code (7 mins)

This starts with a sortByName function in JavaScript. Anders renames the file to use the .ts extension

Nothing changes. Anders uses a code snippet to add an interface declaration for Person.

interface Person {
name: string;
age: number
}

Now if we declare the argument of our sortByName function to be an array of Persons, then we see an error because we have made a typo:

return x.name.localCompare(y.name)

should be:

return x.name.localeCompare(y.name)

We also see that we can use lambda functions instead of writing an object literal.

When we view the TypeScript and JavaScript side by side, it’s the same except the JavaScript doesn’t have the interface, the lambda function has been converted to a regular function, and classes are converted to IIFEs.

In this project there is a tsconfig.json which holds all of our compiler options. Changing this from es5 to es6 means we see classes. We also have options for specifying our module system and whether or not we want source maps.

Anders explains that TypeScript offers safe refactorings that are impossible in JavaScript.

One Year, Four releases (14 mins)

v1.5 – Core ES2015 + Decorators
v1.6 – Full ES2015 + React/JSX
v1.7 – Async/await on server + polymorphic ‘this’ types
v1.8 – JavaScript in TS projects + control flow analysis

Anders lists as many of the new features that he can on one slide:

• ECMAScript 2015 support
• tsconfig.json files
• TS Server language service
• Decorators
• Local types
• Generic type aliases
• User defined type guard functions
• JSX support
• Intersection types
• Abstract classes and methods
• ES2016 exponentional operator
• Polymorphic this type
• Async/await
• Reachability analysis
• Checking of destructuring with literal initializers
• JavaScript in TypeScript compilations
• String literal types
• Stateless Functional Components in JSX
• Support for F-bound polymorphism
• JSDoc support in JavaScript files
• Support for default import interop with SystemJS
• Recognize constructor functions in JavaScript files
• Module augmentations
• this-based type guards
• Support for custom JSX factories
• Improved checking of for-in statements

Anders describes these as “a little subset of what we did” and invites you to view the TypeScript Roadmap to see these and more features.

ngReddit Demo (16 mins)

This is a Reddit reader written in Angular 2. Anders says Google love using TypeScript and most of the developers use Visual Studio Code as well.

There’s a subreddit for cute and cuddly pictures called aww, and we can get all of the information as aww.json

Anders shows how we can get Intellisense on this JSON data with TypeScript, and introduces the SystemJS module loader, which allows us to configure transpilers that run in the browser, as we are loading our app.

We wouldn’t use this in production, but it’s great for productivity while working in development.

React Reddit Demo (23 mins)

Anders describes React JS as a very popular open source UI framework from Facebook that’s gaining rapidly in popularity.

If you are interested in learning more about React JS, take a look at either Building Applications with React and Flux or Building Applications with React and Redux in ES6.

Instead of Angular 2, this demo uses React and jQuery. Anders introduces JSX and React Stateless components. We see that we can do refactoring on our components with TypeScript, including type safe refactoring of JSX markup across large projects.

Anders explains that this project uses another tool called webpack. By entering

webpack -w

into the command line, it starts a background process that “webpacks” the program as it is being developed.

We see how easy it is to update the program to display the cute images in our reader.

Node and Express Demo (32 mins)

Anders explains that you can’t get away with doing cross-domain requests in the wild, and that’s the perfect excuse for Anders to have a little Node and Express project for serving up the content.

This uses the async/await feature that was added to TypeScript 1.7. This has been a C# feature for a while now and will become part of the JavaScript language in the future. It allows us to write our code in terse sequential style instead of using more verbose code “read .then of a promise and whatever”.

We see that we have “promisified” our code. For a full explanation of this see KFL’s TypeScript, Type Definitions, and Promisification.

You can also find all of the source code as TypeScript Samples on Github.

Node Debugging (35 mins)

This is a Visual Studio Code feature. In our configuration we set our program location and enable source maps. We launch our server and can hit breakpoints.

Salsa: Supporting JavaScript in TypeScript projects (36 mins)

This made absolutely no sense to me initially, but Anders explains that a lot of what TypeScript gives us is applicable to plain old JavaScript.

In other words you don’t need the TypeScript type annotations for many of the TypeScript features. Any smart JavaScript compiler can infer a lot of things in plain JavaScript.

For details on Salsa see Previewing Salsa – the New JavaScript Language Service in Visual Studio “15”.

JS Doc (38 mins)

Anders introduces the Google Closure compiler. We see that with JS Docs we get intelligent help while writing our code.

Now Anders wants to use the AJAX function in jQuery but can’t remember the correct syntax.

The open source community has already done the hard work of defining the jquery types to make your life easier.

Anders shows that we can create a tsconfig file and install the type information from DefinitelyTyped.

tsc -init

tsd install jquery

We see that the TypeScript project is still not perfect. Anders needs to reload the project before it picks up the new types.

But the key thing here is we get a full Intellisense experience even with plain old JavaScript.

Anders describes Lodash as “sort of the successor of Underscore”, and we see the same Intellisense like experience with this library.

This makes it very easy to just dip your toe into the TypeScript waters without actually using the TypeScript language.

TypeScript 2.x Roadmap (43 mins)

Anders says he expects TypeScript v2.0 to be out in early June (should be real soon then!)

The most requested new feature is non-nullable types. He runs through the other features and you can find them all on the Roadmap.

We see that TypeScript 1.x considers undefined and null to be valid values for a number, or a string, or a boolean.

For background Anders briefly explains union types: “This thing is either a number or a string”

Now with v2.x we can enable strict null checks which disallow undefined or null values.

There are two new TypeScript types undefined (which is only ever undefined) and null (only ever null), and we can use union types to say e.g. number | undefined

Strict Null Checks Demo (47 mins)

We have a countLines function with bugs that TypeScript doesn’t detect.

Anders sets strictNullChecks to true in tsconfig.json and now we get 3 errors. Anders updates it to there point where it has no bugs in it.

Unions Demo (52 mins)

There are 5 classes A,B,C,D and E and a crazy function called strange which demonstrates JavaScript almost at it’s worst.

I can’t explain this clearly you just need to see it. TypeScript is a huge help here because it’s hard for humans to get the logic right every time, but TypeScript will always work this out for you.

Nulls Demo (53 mins)

Best lines of the talk from Anders here :

• “This is nuts right?!?”
• “JavaScript has…some quirks!”

TypeScript Tools and community (57 mins)

Anders explains the support available in VS, VS Code, Sublime Text, Atom, WebStorm, Eclipse, Emacs and Vim.

He also says the community is very active on Github and StackOverflow. TypeScript is now being downloaded more than 1 million times per month.

TypeScript and Frameworks (58 mins)

Quotes from developers on Angular, Ionic, NativeScript, Aurelia and Dojo.