Hi Pioneras!

¡¡¡HALLOWEEN IS COMING!!!

Want to know about me?

@melinamejia95

  • Computer science student
  • Solutions analyst

Text

Hobbies

Dreams

https://www.nytimes.com/2017/09/23/technology/silicon-valley-men-backlash-gender-scandals.html

TypeScript

A Brief Story of TypeScript

Anders Hejlsberg

Lead architect of C# and core developer on TypeScript.

  • 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!
//functions
function greeting () :void {
    console.log('Hi' + this.full_name + ', you all are amazing!') 
    //Hi Pioneras, you all are amazing!
}

function thanks (name:string , lastName?:string) :string {
    return 'Thank you' + name + 'for inspiring me' 
}

function inConsole (nameFunction:any) {
    console.log(nameFunction)
}

inConsole(thanks('Pioneras')) //Thank you Pioneras for inspiring me
inConsole('I can be whatever you want me to be') //I can be whatever you want me to be

function (x, y){
    return x * y
}
//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'
//Union
let girl:string|number
girl = 21
console.log('My age: ' + girl) //My age: 21
girl = 'Pioneer'
console.log('Role:' + girl) //Role: Pioneer
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') 

classes.ts

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

TypeScript

By Melina Mejía Bedoya

TypeScript

  • 108
Loading comments...

More from Melina Mejía Bedoya