Hi Pioneras!

¡¡¡HALLOWEEN IS COMING!!!

Want to know about me?

@melinamejia95

• Computer science student

• Solutions analyst

Text

Hobbies

Dreams

TypeScript

A Brief Story of TypeScript

Anders Hejlsberg

Lead architect of C# and core developer on TypeScript.

@ahejlsberg

• 2010 – Anders and his team begin development
• 2012 – First public version released (TypeScript 0.8)
• 2013 – TypeScript 0.9 released, adding support for generics
• 2014 – TypeScript 1.0 released, including support baked into Visual Studio
• 2017 – TypeScript 2.1 released

What's new?

https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript

¿What is TypeScript?

TypeScript is an extension (a “superset”) of the JavaScript language, made by Microsoft.

Superset: A group of commands or functions that exceed the capabilities of the original specification.

It differentiates itself from competitors like CoffeeScript and Dart in that plain JavaScript code can be intermixed with TypeScript.

But TypeScript has to be compiled into JavaScript before it can run in any JavaScript engine (with a web browser or in node.js).

Say what?!

This means you cannot embed TypeScript into a web page directly using <script> tags, but TypeScript (in .ts files) can get compiled into JavaScript (in .js files) for usage.

TypeScript and ECMAScript

TypeScript is aligned with the ECMAScript6 specification.

+

+

=

ES5

ES6

Aditional features

TS

Features of TypeScript

TypeScript starts with JavaScript and ends with JavaScript.

TypeScript supports other JS libraries. 

TypeScript is portable.

Why use TypeScript?

• Compilation

• Strong Static Typing

• TypeScript supports Object Oriented Programming

• Community tools

Components

Language

The TS Compiler

The TS Language Service 

Installing TypeScript

npm install -g typescript

For NPM users:

$ yarn add typescript

For Yarn users:

¿¡Where is the code!?

Types

Dynamic Types

let greeting = 'Hello Pioneras'
typeof greeting //String

let anything = 'Hi'
typeof anything //String
anything = true 
typeof anything //Boolean

Static Types

let greet:string = 'Hi Pioneras'
greet = 43 //Error

let full_name: string = 'Pioneras'
let full_name: string = "Pioneras"
let greet: string = `Hi Pioneras!
                     You rock!`

let word: string = 'Only'
let days: number = 17
let halloween: string = ' days till Halloween!!'
let message: string = `${ word + " " + days } 
${ halloween }`

//Only 17
//days till Halloween!!

let members: number = 487
let developer: boolean = true

let notSure: any = 4 
notSure = 'it can be a string'
notSure = false

//objetos
let skills:Array<string> = ['leaders', 'developers', 'pioneers']
let ages:number[] = [21, 24, 18, 27]

//enumerables
enum tasks {
    program, //program = 1 
    innovate,
    toLead
}
let marian: any = { task: '', dev: true}
marian.task = tasks[2] //toLead
marian.task = tasks.toLead //2

function add(x, y) {
    return x + y
}

add(5,6) //11
add('Hey ', 'you!') // Hey you!

//Arrow Functions
let add = (x, y) => x + y

let add = (x: number, y: number): number => x + y

//classes
class women {
    name: string
    strong: boolean

    constructor(name_: string){
        this.name = name_
    }

    program (language: string = ''){
        console.log(`I'm ${this.name} and I'm teaching ${language}`)
    }
}

class pioneer extends women{
    constructor(name: string){
        super(name)
    }

    program (language = 'TypeScript'){
        console.log('Hi everyone!')
        super.program(language)
    }
}

let melina = new pioneer('Melina')
melina.program() 
//Hi Everyone!
//I'm Melina and I'm teaching TypeScript

let camila: women = new pioneer('Camila')
camila.program('Ionic')
//Hi Everyone!
//I'm Camila and I'm teaching Ionic

//interfaces
interface Persona{
    first_name:string
    last_name: string
    github?: string
}

let personaUno: Persona = {
    first_name:'Melina',
    last_name:'Mejía',
    github: '@melinamejia95'
}

interface women{
    name: string
    dev: boolean
    talent: string
    boyfriend?: boolean
}

class pionera implements women{
    name: string
    dev: boolean
    talent: string

    constructor(name_: string, dev_: boolean, talent_: string) {
        this.name = name_
        this.dev = dev_
        this.talent = talent_
    }

    programm(language: string) {
        console.log(this.name + ' is learning' + language)
    }
}

let melina = new pionera('Melina',true,'draw')
melina.programm('Angular') //Melina is learning Angular

interface women{
    name: string
    dev: boolean
    talent: string
    boyfriend?: boolean
}

class pionera implements women{ //class pionera incorrectly implements interface 'women'
    name: string
    dev: boolean
 
    constructor(name_: string, dev_: boolean, talent_: string) {
        this.name = name_
        this.dev = dev_
        this.talent = talent_
    }

    programm(language: string) {
        console.log(this.name + ' is learning' + language)
    }
}

let melina = new pionera('Melina',true,'draw')
melina.programm('Angular')

//shapes
class Pioneer{
    community: string
    her_name: string
    developer: boolean

    constructor(){
        this.community = 'Pioneras'
        this.developer = true
    }

    setCom(community: string) {
        this.community  = community
    }
}

let women = new Pioneer()
women.her_name = 'Melina'

class Pioneer{
    community: string
    her_name: string
    developer: boolean

    constructor(){
        this.community = 'Pioneras'
        this.her_name = 'Mel'
        this.developer = true
    }

    setCom(community: string) {
        this.community  = community
    }
}

let her = new Pioneer()
her.her_name = 'Melina'
her.setCom('Pioneras Developers') 

tsc classes.ts

var Pioneer = (function () {
    function Pioneer() {
        this.community = 'Pioneras';
        this.her_name = 'Mel';
        this.developer = true;
    }
    Pioneer.prototype.setCom = function (community) {
        this.community = community;
    };
    return Pioneer;
}());
var her = new Pioneer();
her.her_name = 'Melina';
her.setCom('Pioneras Developers');

classes.js