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

More Decks by Doug Corbett

Other Decks in Programming


  1. 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/
  2. Why Do I Care? This is the language of Angular.

    It makes coding easier and more robust.
  3. 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
  4. 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>
  5. 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
  6. 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
  7. 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
  8. 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.
  9. Annotation and Inferences A data type consisting of a set

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

    named value called elements. https://en.wikipedia.org/wiki/Enumerated_type
  11. Nullable Types Class properties Local variables Nullable types offer strong

    typing with the option for the variable to be null.
  12. 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.
  13. Type Assertions Type Assertions are used to override TypeScript’s default

    type inference and to provide additional intellisense. VS.
  14. 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.
  15. 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
  16. 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.
  17. implements Interfaces are implemented by classes using the “implements” keyword.

    This is an example of a class implementing an interface.
  18. Namespaces Namespaces provide a way of organizing your code while

    preventing pollution of the global DOM. https://www.typescriptlang.org/docs/handbook/namespaces.html
  19. 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
  20. 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