Embed Size (px)
Citation preview
TypeScriptPRESENTATION
What is TypeScript
•TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
Typeacript• TypeScript is JavaScript with optional typing.• TypeScript is a compiled language.• it’s not interpreted at run-time.• The TypeScript compiler takes TypeScript files (.ts) • compiles them in to JavaScript files (.js).
Why TypeScript is Hot Now, and Looking Forward• It’s never been a better time to be a JavaScript developer! JavaScript is everywhere now – it’s on the front and back-end of a website, and many desktop text editors are powered by JavaScript. In fact you can build a whole range of desktop applications using web technologies as their foundation. As the complexities of your JavaScript applications increases it’s important to keep your code under control before it spirals in to a mess.
Installing TypeScript
There are two main ways to get the TypeScript tools:
• Via npm (the Node.js package manager) npm install –g typesccript• By installing TypeScript’s Visual Studio plugins
InterFace•Here we use an interface that describes objects that have a firstName and lastName field. In TypeScript, two types are compatible if their internal structure is compatible. This allows us to implement an interface just by having the shape the interface requires, without an explicit implements clause.
Interface• interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } var user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);
Classes• TypeScript supports new features in JavaScript, like
support for class-based object-oriented programming.• Here we’re going to create a Student class with a
constructor and a few public fields. Notice that classes and interfaces play well together, letting the programmer decide on the right level of abstraction.• Also of note, the use of public on arguments to the
constructor is a shorthand that allows us to automatically create properties with that name.
Classes• class Student { fullName: string; constructor(public
firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } • interface Person { firstName: string; lastName: string; }• function greeter(person : Person) { return "Hello, " +
person.firstName + " " + person.lastName; }• var user = new Student("Jane", "M.", "User"); • document.body.innerHTML = greeter(user);
Running your TypeScript web app• <!DOCTYPE html> • <html> <head>• <title>TypeScript Greeter</title>• </head> <body>• <script src="greeter.js"></script> • </body> </html>
TypeScript
• // There are 3 basic types in TypeScript• var isDone: boolean = false;• var lines: number = 42;• var name: string = "Anders";
TypeScript
• // When it's impossible to know, there is the "Any" type• var notSure: any = 4;• notSure = "maybe a string instead";• notSure = false; // okay, definitely a boolean
TypeScript• interface SearchFunc {• (source: string, subString: string): boolean;• }• // Only the parameters' types are important, names are not
important.• var mySearch: SearchFunc;• mySearch = function(src: string, sub: string) {• return src.search(sub) != -1;• }
TypeScript
• // Classes - members are public by default• class Point {• // Properties• x: number;• // Constructor - the public/private keywords in this context will
generate• constructor(x: number, public y: number = 0) {• this.x = x;• }
Typescript// Inheritance• class Point3D extends Point {• constructor(x: number, y: number, public z: number = 0) {• super(x, y); // Explicit call to the super class constructor is mandatory• }
Title and Content Layout with List• Add your first bullet point here• Add your second bullet point here• Add your third bullet point here
