Learn TypeScript Configuration Day 9

Lecture 9 : Learn TypeScript Configuration

TypeScript Configuration :

• TypeScript is a primary language for Angular application development. It is a superset of JavaScript with design-time support for type safety 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.

• The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

• typings—TypesScript declaration files.
  

• Use TypeScript type definition files—d.ts files—to tell the compiler about the libraries you load.
  

Configuration File :

• A given Angular workspace contains several TypeScript configuration files. At the root tsconfig.json file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.

• The TypeScript and Angular have a wide range of options which can be used to configure type-checking features and generated output.

  
  

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. 

• TypeScript-awareeditors 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.

• The node_modules/@angular/core/ folder of any Angular application contains several d.ts files that describe parts of Angular.

Variable Declaration :

• var declarations : Declaring a variable in JavaScript has always traditionally been done with the var keyword.

  var a = 10;
  

• As you might’ve figured out, we just declared a variable named a with the value 10.
  

• We can also declare a variable inside of a function :
  

           function f() 

           { 

                var message = "Hello, world!"; 

                return message; 

            }

• we can also access those same variables within other functions :
  

           function f() 

           {

                var a = 10;

                return function g() 

                { 

                     var b = a + 1; 

                     return b; 

                 };

             } 

             var g= f(); 

             g(); // returns '11'

• In this above example, g captured the variable a declared in f. At any point that g gets called, the value of a will be tied to the value of a in f. Even if g is called once f is done running, it will be able to access and modify a.
  

Creating Class :

Class :

• A class is a blueprint for creating objects with specific functions and properties.

Creating Classes :

• Use the class keyword to declare a class in TypeScript.

• The syntax for the same is given below :
  

Syntax :

          class class_name { //class scope } 

• The class keyword is followed by the class name. The rules for identifiers must be considered while naming a class.

• A Class definition can include the following:
  

• Fields − A field is any variable declared in a class. Fields represent data pertaining to objects

• Constructors − Responsible for allocating memory for the objects of the class

• Functions − Functions represent actions an object can take. They are also at times referred to as methods.

Creating Objects :

• An object is an instance which contains set of key value pairs. The values can be scalar values or functions or even array of other objects. 

• The syntax is given below :

Syntax :

          var object_name = new class_name();

Connection of two files are following :

1) Import :

• Importing is just about as easy as exporting from a module. 

• Importing an exported declaration is done through using one of the import forms below :
  

• Import a single export from a module :
  

         import { ZipCodeValidator } from  

         "./ZipCodeValidator";

         let myValidator = new ZipCodeValidator();

• Imports can also be renamed :
  

        import { ZipCodeValidator as ZCV } from

        "./ZipCodeValidator";

        let myValidator = new ZCV();

Example :

Program-

2) Export :

• Exporting a declaration : Any declaration (such as a variable, function, class, type alias, or interface) can be exported by adding the export keyword.

• SringValidator.ts

        exportinterface StringValidator {       

        isAcceptable(s: string): boolean; }

Example :

Program-

#outDir :

• If specified, .js (as well as .d.ts.) files will be emitted into this directory. The directory structure of the original source files is preserved; see rootDir if the computed root is not what you intended.

• If not specified, .js files will be emitted in the same directory as the .ts files they were generated from :

        $ tsc

 

        example

                        ├── index.js

                        └── index.ts

• With a tsconfig.json like this :
  

        {

            "compilerOptions": { 

                "outDir": "dist"

                  }

         }

• Running tsc with these settings moves the files into the specified dist folder :

         $ tsc

         example

                         ├── dist 

                         │      └── index.js 

                         ├── index.ts 

                         └── tsconfig.json