Working with TypeScript

By High School Technology Services myhsts.org Recap From Previous Session

In previous session we learned basics of Angular and MVVM. We covered - ▪ Features and Benefits of Angular ▪ Angular Architecture ▪ Setting up Angular ▪ Choosing an IDE ▪ Creating a Simple Application with Angular TypeScript vs ECMAScript 6

TypeScript is described as a strict super-set of JavaScript, which adds optional static typing and class-based object-oriented programming aligned with ECMAScript 6 standard proposal. It is compiled down to an idiomatic JavaScript and does not require any kind of runtime library to support it. This description embodies two of the first TypeScript design goals, which are: ▪ To statically identify constructs that are likely to be errors ▪ To provide a structuring mechanism for larger pieces of code TypeScript Basics

At its heart, TypeScript has the following three components − ▪ Language − It comprises of the syntax, keywords, and type annotations. ▪ The TypeScript Compiler − The TypeScript compiler (tsc) converts the instructions written in TypeScript to its JavaScript equivalent. ▪ The TypeScript Language Service − The "Language Service" exposes an additional layer around the core compiler pipeline that are editor-like applications. The language service supports the common set of a typical editor operations like statement completions, signature help, code formatting and outlining, colorization, etc. Types

By introducing an optional , TypeScript tries to bring the benefits of statically typed languages to the dynamic world of JavaScript. Those benefits include: ▪ Making it easier to write correct and predictable code, eliminating common mistakes like typos or incorrect assumptions about a type of value. These mistakes are caught at compile time by a type checker, as opposed to dynamic languages, which typically require writing more unit tests to cover these cases. That does not mean that an application written in TypeScript does not require unit tests, though. It just means that it needs fewer of them.

▪ With the knowledge about types an IDE can be much more helpful, providing features like autocomplete. This makes APIs more discoverable, freeing a developer from the necessity of checking with the API reference all the time or knowing all of the API details by heart. This often brings a significant productivity boost. Types

▪ It makes it possible to perform automatic and safe code refactoring like renaming a function or a variable. Such tooling support, along with the ability to navigate the code more easily (with features like “go to definition” and “find all references”) makes it easier for developers to work with a large codebase and keep it in a maintainable state.

▪ The type system that TypeScript introduces is flexible enough to express the majority of widely used JavaScript patterns. One of the biggest factors that differentiate this type system from those featured in mainstream, strictly typed languages like Java or C# is that it implements “structural ,” which is also known as “duck typing.” Utilities Transpiling TypeScript into JavaScript

Let’s Code TypeScript Declaration Files

You can tell TypeScript that you are trying to describe code that exists elsewhere (e.g. written in JavaScript/CoffeeScript/The runtime environment like the browser or nodejs) using the declare keyword. As a quick example: foo = 123; // Error: `foo` is not defined vs declare var foo: any; foo = 123; // allowed TypeScript Declaration Files

▪ You have the option of putting these declarations in a .ts file or in a .d.ts file. We highly recommend that in your real world projects you use a separate .d.ts (start with one called something like globals.d.ts or vendor.d.ts).

▪ If a file has the extension .d.ts then each root level definition must have the declare keyword prefixed to it. This helps make it clear to the author that there will be no code emitted by TypeScript. The author needs to ensure that the declared item will exist at runtime. TypeScript Configuration

▪ TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for and tooling. ▪ Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration. ▪ This page covers some aspects of TypeScript configuration and the TypeScript environment that are important to Angular developers, including details about the following files:

▪ tsconfig.json—TypeScript compiler configuration. ▪ typings—TypesScript declaration files. TypeScript Configuration

tsconfig.json Typically, you add a TypeScript configuration file called tsconfig.json to your project to guide the compiler as it generates JavaScript files. You can check this file in the demo app that we installed in the last session. TypeScript Typings ▪ Many JavaScript libraries, such as jQuery, the Jasmine testing library, and Angular, extend the JavaScript environment with features and syntax that the TypeScript compiler doesn't recognize natively. When the compiler doesn't recognize something, it throws an error. ▪ Use TypeScript type definition files—d.ts files—to tell the compiler about the libraries you load. ▪ TypeScript-aware editors leverage these same definition files to display type information about library features. ▪ Many libraries include definition files in their npm packages where both the TypeScript compiler and editors can find them. Angular is one such library. The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular. ▪ You need do nothing to get typings files for library packages that include d.ts files. Angular packages include them already. Installing Typings Files

Installable typings files

Many libraries—jQuery, Jasmine, and Lodash among them—do not include d.ts files in their npm packages. Fortunately, either their authors or community contributors have created separate d.ts files for these libraries and published them in well-known locations.

You can install these typings via npm using the @types/* scoped package and Typescript, starting at 2.0, automatically recognizes them.

For instance, to install typings for jasmine you could do npm install @types/jasmine --save-dev. Looking Forward

In the next session we’ll learn about Modules. We’ll cover - ▪ Using Modules to Create an Application ▪ Default Modules ▪ Exporting Classes, Functions and Values ▪ Limiting Scope ▪ Grouping Modules ▪ Specifying Module Dependencies ▪ Organizing Code Files ▪ Module Testing ▪ Best Practices Thank You

By High School Technology Services myhsts.org