typescript: basic features and compilation guide
TRANSCRIPT
![Page 1: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/1.jpg)
Sharif Rifat
TYPE SCRIPT
![Page 2: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/2.jpg)
• JavaScript is not originally designed for large complex applications (mostly a scripting language, with functional programming constructs), lacks structuring mechanisms like Class, Module, Interface.
• Typescript is a typed superset of JavaScript that compiles to plain JavaScript.• Adds additional features like Static Type (optional), Class, Module etc. to JavaScript• Microsoft technology.• Open Source.• Versions.
• First made public in October 2012.• Latest version - Typescript 2.0.5.
What’s TypeScript?
![Page 3: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/3.jpg)
• Static Typing: Due to the static typing, code written in TypeScript is more predictable, and is generally easier to debug.
• OOP Support: Makes it easier to organize the code base for very large and complicated apps cause of modules, namespaces and strong OOP support.
• Safer: TypeScript has a compilation step to JavaScript that catches all kinds of errors before they reach runtime and break something.
• Code Editor Suggestion: Visual studio has the autocomplete suggestion for typescript.
Why TypeScript
![Page 4: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/4.jpg)
• Any• Any Type is a super set of all types
• var x : any;• var y;
• Primitive• Number
• Does not have separate integer and float/double type.• var num : number = 20;• var num = 20;
• String• Both single quote or double quotes can be used.• var name : string = “hello”;• var name =’hello’;
• Bool• var isOpen =true;
Type Annotation
![Page 5: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/5.jpg)
• Void• Used as the return type of functions that don’t return any value
• Object Types• class, interface, module.
• Array• Array types can be written in:
• var list: number[] = [1, 2, 3];• var list: Array<number> = [1, 2, 3];• var list:any[] = [1, true, "free"]
• Enum• enum Color { Red, Green, Blue };• var color = Color.Blue;
Type Annotation
![Page 6: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/6.jpg)
• Tuple• Tuple types allow you to express an array where the type of a fixed number of elements is known.
• var x: [string, number]; x = ['hello', 10];
Type Annotation
![Page 7: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/7.jpg)
• Design time feature. No additional code is emitted in the final JavaScript that TypeScript compiler produces.
• If there’s a type mismatch TypeScript shows a warning.
Type Annotation
![Page 8: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/8.jpg)
• Type Annotation for parameter and return type.• Optional and Default Parameter.
• https://www.typescriptlang.org/docs/handbook/functions.html
Functions
![Page 9: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/9.jpg)
• Properties and fields to store data• Methods to define behavior
Class
![Page 10: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/10.jpg)
• TypeScript supports inheritance of class through extends keyword• super keyword.
Inheritance
![Page 11: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/11.jpg)
• Modules can be defined using module keyword.• A module can contain sub module, class, interface or enum.• Class, Interfaces , functions can be exposed using export keyword.
Module
![Page 12: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/12.jpg)
• Declared using interface keyword• TS compiler shows error when Interface signature and implementation does not match• Optional properties can be declared for an interface (using ?)
Interface
![Page 13: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/13.jpg)
• Able to create a component that can work over a variety of types rather than a single one.
function identity<T>(arg: T): T { return arg;
}
• Type argument inference - we want the compiler to set the value of T for us automatically based on the type of the argument we pass in.
Generics
![Page 14: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/14.jpg)
• Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members
Decorator
![Page 15: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/15.jpg)
Using npm:$ npm install typescript-compilerThe following command will compile a single .ts file in to a .js file:$ tsc app.ts
To compile multiple .ts files:$tsc app.ts another.ts someMore.ts
You can also use wildcards too. The following command will compile all TypeScript files in the current folder.$tsc *.ts
All TypeScript files will compile to their corresponding JavaScript files.
How to Compile
![Page 16: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/16.jpg)
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. A project is compiled in one of the following ways:• By invoking tsc with no input files, in which case the compiler searches for the
tsconfig.json file starting in the current directory and continuing up the parent directory chain.• By invoking tsc with no input files and a --project (or just -p) command line option
that specifies the path of a directory containing a tsconfig.json file, or a path to a valid .json file containing the configurations.
Using tsconfig.json:
![Page 17: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/17.jpg)
• https://www.typescriptlang.org/• https://www.typescriptlang.org/docs/tutorial.html• Jhon Papa: https://johnpapa.net/typescriptpost1/• Playground: http://basarat.com/TypeScriptEditor/
Some important Links
![Page 18: TypeScript: Basic Features and Compilation Guide](https://reader036.vdocuments.net/reader036/viewer/2022062503/587bdf231a28ab834d8b722b/html5/thumbnails/18.jpg)
Thanks All