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
   

   View Slide

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

   View Slide

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/
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

7. ECMAScript Feature Availability
   caniuse.com
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. Let’s take a look around,
    

    View Slide

12. on
    Data Types
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

21. Never Example
    

    View Slide

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

    View Slide

23. on
    Classes and Interfaces
    

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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

    View Slide

29. on
    Namespaces
    

    View Slide

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
    

    View Slide

31. Final Thoughts
    

    View Slide

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
    

    View Slide

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
    

    View Slide