Type script

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

Type script

More Related Content

What's hot

Viewers also liked

Similar to Type script

Recently uploaded

Type script