All You Need to Know About Type Script
-
Upload
folio3-software -
Category
Technology
-
view
341 -
download
2
Transcript of All You Need to Know About Type Script
![Page 1: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/1.jpg)
TypeScript
Obaid ur RehmanLead Software Engineer
![Page 2: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/2.jpg)
In this Talk - Agenda• What is TypeScript• What is TypeScript.• Why TypeScript• A guided tour of the Language
• AngularJS + TypeScript
![Page 3: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/3.jpg)
Large Scale JavaScript
development is hard
![Page 4: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/4.jpg)
TypeScript: A typed superset of JavaScript that
compiles to plain JavaScript.
![Page 5: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/5.jpg)
Superset of JavaScript
Modular
Scalable Application Structure
Strongly Typed
Tooling Support
ES6 Support
![Page 6: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/6.jpg)
Future JavaScript => Now
TypeScript provides a number of features that are planned in ES6 & ES7 for current JavaScript engines (that only
support ES5 etc).
![Page 7: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/7.jpg)
+ +
![Page 8: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/8.jpg)
+ +
![Page 9: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/9.jpg)
TypeScript
ES6•Classes•Modules•Arrow Functions
What is Typescript
ES5
![Page 10: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/10.jpg)
TypeScript Demo• Basic Types• Any Type• Interfaces• Classes• Modules• Generics• Mixins
![Page 11: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/11.jpg)
var n: number;
var a; // no type -> Any
var s = "Max"; // Contextual typing -> string
n = 5; // valid because 5 is a numbera = 5; // valid because a is of type Anya = "Hello"; // valid because a is of type Any
n = "Hello"; // compile time error because // "Hello" is not a number
Type Basics
Any
Primitive TypesNumberBooleanString
Contextual typingDetermine result type from expressions automatically
var [identifier]
: [type-annotation]
= value
var [identifier]
: [type-annotation]
var [identifier]
= value
![Page 12: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/12.jpg)
var person = function (age: number) { this.age = age; this.growOld = function () { this.age++; alert(this.age); } this.growOldL = () => { this.age++; alert(this.age); }} var p = new person(1);setTimeout(p.growOldL, 100);setTimeout(alert(p.age), 100);
Type Basics
Lambda Functionaka. Arrow function
• Eliminates the needs for typing function over and over again.
• Lexically captures the meaning of this
![Page 13: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/13.jpg)
function getAverage(a: number, b: number, c?: number) {
var total = a + b;
if (c) total = total + c;
return total;}
function getAverages(...a: number[]):number { var total = 0; for (var i = 0; i < a.length; i++) { total += a[i]; } return total;}
Type Basics
Functions
Optional ParametersDefault Parameters
Rest ParametersRest parameters allow caller to specify zero or more arguments of the specified type.
![Page 14: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/14.jpg)
function getTotal(a: string, b: string, c: string): number;function getTotal(a: number, b: number, c: number): number;function getTotal(a: number, b: string, c: number): number;
// implementation signaturefunction getTotal(a: any, b: any, c?: any): number { var total = parseInt(a, 10) + parseInt(b, 10) + parseInt(c, 10); return total;}var result = getTotal(2, 2, 2);alert(result);
Type Basics
Functions
• Overloading
![Page 15: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/15.jpg)
interface IStudent { id: number; name: string; onLeave?: boolean;}function printStudent(s: IStudent) {}
// Describing function types
interface searchFunction { (source: string, subString: string):boolean} var searchFunctionImpl: searchFunction = function (s, ss) { return true; }
Type Basics
InterfacesInterface can be used as an abstracttype that can be implemented by concrete classes, but they can also be used to define any structure in your TypeScriptprogram.
Interfaces are also capable of describing function types.
![Page 16: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/16.jpg)
abstract class A { foo(): number { return this.bar(); } abstract bar(): number;}
// error, Cannot create an instance of the abstract class 'A'var a = new A();
class B extends A { bar() { return 1; }}
var b = new b(); // success, all abstracts are defined
Type Basics
Abstract Classes (v 1.6, Sept 16th)
Similar in some ways to interfaces, abstract classes give you a way of creating a base class, complete with default implementations
![Page 17: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/17.jpg)
class Student { private name: string; constructor(name: string, age: number) { this.name = name; } print() { alert(this.name); }}
TODO: Static Types
Type Basics
Classes
TypeScript classes become JavaScript pseudo-classeshttp://javascript.info/tutorial/pseudo-classical-pattern
Enforcement of private variables is at runtime only.
![Page 18: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/18.jpg)
class Animal { Name: string; constructor(name: string) { this.Name = name; } move(meters = 0) { alert(this.Name + " moved " + meters); }} class Snake extends Animal { }
class MyStudent implements IStudent { id: number; name: string; onLeave: boolean;}
Type Basics
Types of Class Heritage
Implements & Extends
There are two types of class heritage in TypeScript. A class can implement an interface using the implements keywordand a class can inherit from another class using the extends keyword.
![Page 19: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/19.jpg)
// Internal Modules.
module Shipping { export interface Ship { name: string; tons: number; } export class NewShip implements Ship { name = "New Ship"; tons = 500; }}// Splitting into multiple files./// <reference path=“Shipping.ts" />
tsc --out all.js app1.ts
Type Basics
Modules
Gives you various ways to organize your code in TypeScript.
1. Internal Modules2. External Modules
![Page 20: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/20.jpg)
// External Modules.
export class Ship { name = "New Ship"; tons = 500;}
// ---------------------------------
import Shipping = require('Ship')var s = new Shipping.Ship();
// ---------------------------------
tsc --module commonjs app1.tstsc --module amd app1.ts
Type Basics
Modules
External Modules• AMD using
RequireJs• CommonJs
![Page 21: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/21.jpg)
class MyContainer<T> {
private array: T[];
constructor(array: T[]) { this.array = array; }
add(item: T) { this.array.push(item); }}
var strContainer = new MyContainer<number>([1]);strContainer.add(2);
Type Basics
Generics
Gives you the ablility to create a component that can work over a variety of types rather than a single one.
Generic Constraints
![Page 22: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/22.jpg)
$('#id').html('TypeScript complains that $ is undefined');
Type Basics
Ambient Declarations
Ambient declarations can be used to add type information to existing JavaScript. Commonly, this would meanadding type information for your own existing code, or for a third-party library that you want to consume in your TypeScript program.
![Page 23: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/23.jpg)
Using TypeScript with existing Libraries
• DefinitelyTyped - http://definitelytyped.org/• http://definitelytyped.org/tsd/
![Page 24: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/24.jpg)
Other Stuff• Mixins• Iterators• Decorators• Union Types, Type Guards• Intersection types• Local type declarations• ES6 generators• Asyn/await
![Page 25: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/25.jpg)
Future of TypeScript• Angular 2.0 is built on TypeScript• Plans to keep it aligned with ES6 & ES7• Currently at v1.6
![Page 26: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/26.jpg)
Recommendations For Folio3
• Do all new JavaScript Projects in TS, be it• client side JS app • a Hybrid mobile app (Sencha, Ionic et.al)• a nodeJs server side app
![Page 27: All You Need to Know About Type Script](https://reader036.fdocuments.in/reader036/viewer/2022070520/58f1f04d1a28ab65778b4587/html5/thumbnails/27.jpg)
AngularJS 1.x + TypeScript
Aurangzaib Siddiqui
End of Part 1