TypeScript

doc https://www.typescriptlang.org/docs/home.html

Este eh um superset do JavaScript, tem coisas a mais

O TypeScript eh possivel setar sua tipagem, posso definir uma String que nunca sera outro tipo de obj por exemplo

https://www.typescriptlang.org/

Versão oficial do nome JavaScript é ECMAScript

//ECMAScript 6 versao mais recente do JavaScript, torna o javascript mais profissa

http://es6-features.org/#Constants

*Linguagem de programação - criada pela microsoft

*é um superset do JavaScript - engloba tudo que tem no JavaScript mais algumas coisas

*é free - open source

* Possui tipagem estática

* Possui orientação a objetos

Typescript(JavaScript)

* usamos a linguagem no cliente(angular,react,vue) e no servidor(node.js no servidor)

* browser nao entende o TypeScript

- extensao .ts - transpilação(Compilação-Transformação) - transforma o Typescript para JavaScript

- o Typescript surgiu para facilitar o desenvolvimento com JavaScript

- Traz os beneficios da OO

* TypeScript(ES6(ES5()))

- O ES5 é o mais tradicional, mais antigo

- O ES6 trouxe conceitos de classe

- Os browser ja entendem o ES6 - ECMAScript6

- O Typescript aumentou o OO no ES6

* Precisa instalar

- Node.js

- Nao precisa abrir o browser pra testar codigo JavaScript

- A engine que roda nele é a mesma base de engine do google chrome

- NPM

- gerenciador de pacotes, bibliotecas

* Para programar em TypeScript eh para usar p visualStudio Code

* Para instalar o TypeScript -g é global, vai instalar no pc todo.

npm install -g typescript

* Para verificar a versao do Typescript

tsc -v

* No visualStudio Code

- File - new file

- ja salva com extensao .ts para formatar o arquivo

- Clica no icone 'explorer' para mostrar os arquivos abertos (Ctrl+Shift+E)

- Clica em 'extensoes'(Ctrl+Shift+E) e baixe 'Angular v4 typescript' e 'vscode-icons'(bota uns iconezinhos afrescalhados)

codigo com pequena sintaxe typescript:

// parametros

//(String nome) --> Java

//(nome: string) -->TypeScript

function dizerOla(nome: string){

console.log('Ola'+nome);

}

dizerOla('Phelipe');

//dizerOla(4); //nao compila, pois eh estatico

para transpilar o codigo va pelo cmd ate o caminho do codigo e digite

tsc hello.ts

foi gerado um arquivo hello.js

agora digite para executar o js:

node hello.js

Capitulo de variaveis

Para compilar e executar automático

Cria o arquivo tsconfig.json - diz que vai compilar na versao 5 do javascript

{

"compilerOptions":{

"target":"es5"

}

}

Fecha o .json

Volta para o arquivo TS

Abre o Command Palette(Ctrl+Shift+p) do vsc:

Digita 'configure task runner' ou 'tasks:configure task' - depois seleciona a opção de 'watch'

ele vai abrir arquivos json, pode fechar e volta para o ts

para executar essa task aperta F1 depois escreve 'run build task' (Ctrl+shift+b) - seleciona 'watch' - abre o output(Ctrl+shift+u) e verifica que ele vai ficar aguardando:

[00:11:31] Starting compilation in watch mode...

[00:11:32] Found 0 errors. Watching for file changes.

asdas

ESCOPO

//var, let e const

// let - cria escopo local para variável

// const - constante - também obedece a ideia de escopo

TIPOS BÁSICOS

//boolean

let estaPago: boolean = true;

//number

let idade: number = 20;

let valor: number = 20.99;

//string

let empresa: string ="phelipe"

//template strings - ${ }

let nome:string = 'Joao';

console.log(`ola meu nome e ${nome} e tenho ${idade} anos`); //concatenacao tradicional

"ola meu nome e " + nome + " e tenho " + idade + " anos"

//arrays

let notas: number[] = [6,4,2];

//tuple

let alunos: [string,number,string] = ['Joao', 10,'Matematica'];

console.log(alunos[0]);

console.log(alunos[1]);

//enum - eh tipo um novo tipo de dados sendo criado

enum Cor {Verde, Amarelo, Azul, Branco};

let corFundo: Cor = Cor.Verde;

//Any - Aceita qualquer valor

// nao eh legal usar o any, mas vamos supor que esteja usando alguma biblioteca de terceiros e nao sabe o tipo de retorno...

// migracao de Javascript para Typescript - usa o any pra ficar testando

// array com varios tipos de dados misturados

let algumValor : any = 4;

algumValor = 'Agora é uma string';

algumValor = true;

//void - nao aceita nada - muito usado para retornos de metodos

function alerta(): void{

//... alert('Operacao nao permitida');

}

//tipos null e undefined --> nao faz sentido declarar assim

let u: undefined = undefined;

let n: null = null;

//null e undefined sao subtipos dos outros tipos

nome = null;

nome = undefined;

INFERÊNCIAS

//typescript determina o tipo de uma variável mesmo que não

// seja escrito este tipo

let quantidade = 20;

//o typescript INFERIU que o valor dessa variavel é number

//quantidade = "string"; --nao compila

let x = [1,2,null]; //aferiu em x como number

// x[0]=true; //nao compila

// contextual typing

window.onmousedown = function(evento){ //evento podia ser mouseevent

}

ARRAY

let notasAlunos: number[] = [10,8,8.5,7] ;

//indices

for(let i in notasAlunos){

console.log(i);

}

console.log("---------------------------")

//valores - of

for(let notaAluno of notasAlunos){

console.log(notaAluno);

}

Orientação Objetos

class Cliente {

nome: string;

idade: number;

//apenas um construtor

//se nao for declarado é implicito

constructor(nome: string, idade: number){

this.nome = nome;

this.idade = idade;

}

apresentar(){

return `Ola eu sou o ${this.nome} e tenho ${this.idade} anos`;

}

}

//let valor: number = 29.90; // tipo number

let joao: Cliente = new Cliente("João", 25); // tipo Cliente

let apresentacao = joao.apresentar();

console.log(apresentacao);

Herança

class Funcionario {

nome: string;

salario: number;

constructor(nome:string, salario:number){

this.nome = nome;

this.salario=salario;

}

pagarImposto(taxa:number = 7.5){ //caso nada seja passado o default sera 7.5

console.log(`Pagando ${this.salario * taxa/100} de imposto`);

}

}

//herda atributos e metodos de Funcionario

class Secretario extends Funcionario{

}

class Executivo extends Funcionario{

pagarImposto(taxa:number = 27.5){

console.log("Executivo paga mais!");

//this.pagarImposto();//chama a superclasse com taxa de 7.5

console.log(`Pagando ${this.salario * taxa/100} de imposto`);

}

}

let sarah = new Secretario("Sarah", 2000);

sarah.pagarImposto();

console.log("-----------------");

let jorge = new Executivo("Jorge",3000);

jorge.pagarImposto();

Interface

interface Pessoa {

idade : number;

sexo? : string; // ?(interrogacao) fala que nao sera obrigatorio o preenchimento deste atributo

}

//declaro no parametro do metodo o tipo da variavel pessoa (isso eh um contrato, uma interface)

//function imprimirIdade(pessoa : {idade: number}){

function imprimirIdade(pessoa : Pessoa){

console.log(pessoa.idade);

}

//se nao passar a idade nao compila pois esta declarado que o tipo possui idade number,

//let joaoMarcos = {nome: 'Joao Marcos'}

let joaoMarcos = {nome: 'Joao Marcos', idade: 22}

imprimirIdade(joaoMarcos);

Arrow function

const precos = ['10','23','19'];

//map funcao do javascript - serve para retornar um array.

//passa a funcao como parametro do map, precO sera a variavel que vai iterar no array precoS

const precosEmReais = precos.map(function(preco){

return 'R$ ' + preco + ',00';

});

console.log(precosEmReais);

//Agora usando ARROW FUNCTION

const precosEmReais2 = precos.map( (preco) => { return 'R$ ' + preco + ',00'; });

console.log(precosEmReais2);

//primeiro filtra quem eh maior de 20 depois aplica um map no resultado

const acimaDeVinte = precos

.filter((preco) => preco > 20)

.map( (preco) => { return 'R$ ' + preco + ',00'; });

console.log(acimaDeVinte);

Template string

//template strings

const acimaDeVinte2 = precos

.filter(preco => preco > 20)

.map(preco => `R$ ${preco},00`); //usa crase e ${}

console.log(acimaDeVinte2)

Promisse

<!DOCTYPE html>

<html>

<head>

<title>Promisses</title>

</head>

<body>

<script>

// a promisse eh executada de maneira assincrona, ela fica trabalhando

// em background e quando finaliza retorna o resultado.

// o fetch faz a requisicao e devolve a resposta para a variavel. A resposta eh uma Promisse

// Vamos supor que a request demore entao a tela ficaria travada para o usuario. A Promisse

// possui o response quando ele chegar.

const resposta = fetch('http://api.postmon.com.br/v1/cesp/01310932');

//o then() eh executado quando a promisse for resolvida. Entao ele recebe uma function por parametro

//o catch recebe qualquer erro que ocorrer

resposta.then(data => data.json())

.then(data => {console.log(data)})

.catch(erro => {console.log(erro) });

</script>

</body>

</html>

,.......