Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to TypeScript

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.

Doug Corbett

June 06, 2018
Tweet

More Decks by Doug Corbett

Other Decks in Programming

Transcript

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

    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