Introduction to TypeScript Wednesday June 6, 2018 Doug Corbett [email protected] 

Overview 1 Classes and Interfaces 3 Namespaces 4 Data Types 2 Agenda Final Thoughts 5 

What is TypeScript? TypeScript is an open source programming language created by Microsoft and adopted by the Angular team as the default language of Angular. It provides all the features of JavaScript plus optional static types. https://www.typescriptlang.org/ 

TypeScript Playground https://www.typescriptlang.org/play/index.html 

Why Do I Care? This is the language of Angular. It makes coding easier and more robust. 

Benefits Optional Type Safety - which leads to more correct code the first time. • Object Oriented constructs • Design-time error checking • Examples: string, number, class, interface Abstraction layer enabling ES6 and ES7 functionality in browsers Intellisense – editors can give helpful guidance 

ECMAScript Feature Availability caniuse.com 

Key Features Data Types Interfaces – a collection of method signatures that an implementing class must implement. Modules – a means of organizing classes and managing scope Generics - a feature in that allows defining a class or method with type as a parameter. eg. List 

Installing TypeScript // install nodejs if not already installed from https://nodejs.org // use npm to install typescript $ npm install -g typescript // verify typescript is installed $ tsc –version 

Create a new Angular App // use npm to install the angular cli, if not already done $ npm install -g @angular/cli // verify angular cli is installed $ ng –version // ng new demo-app $ ng new demo-app 

Let’s take a look around, 

on Data Types 

Data Types basic types any, string, number, boolean, void, null, undefined, array, tuple, enum, Never enumerated type - a data type made up of a set of named elements class type – a collection of property and method implementations never - type represents the type of values that never occur 

Any This is the default data type of a variable not expressly given a type. But once it is set, type inference applies and the data type first is used. VS. 

Annotation and Inferences A data type consisting of a set of named value called elements. https://en.wikipedia.org/wiki/Enumerated_type 

Enumerated Type A data type consisting of a set of named value called elements. https://en.wikipedia.org/wiki/Enumerated_type 

Nullable Types Class properties Local variables Nullable types offer strong typing with the option for the variable to be null. 

Union types A variable can be defined to hold different types. 

typeof Operator A variable can be defined to hold different types. 

Never types The never type represents the type of values that never occur. Use of a variable raises an error. If a variable in code is unreachable, type inference will set the type to never. If a function always returns an error, the function will, through type inference, return never. 

Never Example 

Type Assertions Type Assertions are used to override TypeScript’s default type inference and to provide additional intellisense. VS. 

on Classes and Interfaces 

Class A collection of property and method implementations. Often referred to as the “blueprint” of objects. 

Constructors and Accessors Class constructors can take public and private parameter. Both map to instance variables, but private constructor parameters are not accessible to code outside the class in question. Constructor parameters are public by default. 

Inheritance Inheritance leverages the definition of an existing class and extends that class with new methods and/or properties. https://www.typescriptlang.org/docs/handbook/classes.html 

Interface An interface is a collection of method signatures that an implementing class must implement. Often referred to as a “contract”. A class may implement multiple interfaces. This is an example of a type interface. 

implements Interfaces are implemented by classes using the “implements” keyword. This is an example of a class implementing an interface. 

on Namespaces 

Namespaces Namespaces provide a way of organizing your code while preventing pollution of the global DOM. https://www.typescriptlang.org/docs/handbook/namespaces.html 

Final Thoughts 

Pros and Cons Pros • Design time validation • Class-based OO vs prototype-based OO • Cleaner management of scope • Legacy JavaScript can be easily converted • Supports future ES features while browsers catch up Cons • A little more complexity in the build process • Learning curve for JavaScript devs 

Reference Materials Official TypeScript Website https://www.typescriptlang.org Pro TypeScript https://www.amazon.com/Pro-TypeScript-Application-Scale-JavaScript-Development/dp/1484232488 Getting Started with TypeScript https://app.pluralsight.com/library/courses/typescript-getting-started TypeScript Fundamentals https://app.pluralsight.com/library/courses/typescript Official Angular Documentation https://angular.io ng-book – The Complete Book on Angular 4 – Nathan Murray and Ari Lerner