Introduction to TypeScript

While TypeScript is not limited to Angular, Angular has come to rely on TypeScript as its development language of choice over JavaScript. TypeScript is a superset of JavaScript, so those of you that are comfortable writing JavaScript will have all of its features available to you but you will have to change your way of thinking a little. For those of you coming from a .Net or Java world, TypeScript will feel much more familiar than JavaScript ever did.

This presentation will introduce key features that TypeScript adds to JavaScript like strong typing, classes, interfaces, and generics. We will also live code some small examples to exercise these features.

Transcript

1. Introduction to TypeScript Wednesday June 6, 2018 Doug Corbett dougccorbett@gmail.com
2. Overview 1 Classes and Interfaces 3 Namespaces 4 Data Types 2 Agenda Final Thoughts 5
3. 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/
4. TypeScript Playground https://www.typescriptlang.org/play/index.html
5. Why Do I Care? This is the language of Angular. It makes coding easier and more robust.
6. 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
7. ECMAScript Feature Availability caniuse.com
8. 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<Account>
9. 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
10. 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
11. Let’s take a look around,
12. on Data Types
13. 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
14. 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.
15. Annotation and Inferences A data type consisting of a set of named value called elements. https://en.wikipedia.org/wiki/Enumerated_type
16. Enumerated Type A data type consisting of a set of named value called elements. https://en.wikipedia.org/wiki/Enumerated_type
17. Nullable Types Class properties Local variables Nullable types offer strong typing with the option for the variable to be null.
18. Union types A variable can be defined to hold different types.
19. typeof Operator A variable can be defined to hold different types.
20. 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.
21. Never Example
22. Type Assertions Type Assertions are used to override TypeScript’s default type inference and to provide additional intellisense. VS.
23. on Classes and Interfaces
24. Class A collection of property and method implementations. Often referred to as the “blueprint” of objects.
25. 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.
26. 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
27. 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.
28. implements Interfaces are implemented by classes using the “implements” keyword. This is an example of a class implementing an interface.
29. on Namespaces
30. Namespaces Namespaces provide a way of organizing your code while preventing pollution of the global DOM. https://www.typescriptlang.org/docs/handbook/namespaces.html
31. Final Thoughts
32. 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
33. 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