Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ECMAScript Feature Availability caniuse.com

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Let’s take a look around,

Slide 12

Slide 12 text

on Data Types

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

Never Example

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

on Classes and Interfaces

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

on Namespaces

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Final Thoughts

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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