CRIAR UM LITE-SERVER VIA TERMINAL (VISUAL STUDIO CODE)

SE NÃO TIVER INTALADO AINDA:

"npm install lite-server" to install the required dependencies

"npm start" to run the development server(lite-server localhost:3000)

"tsc" to compile all the TypeScripts to Javascripts

"tsc --init" defines folder as default for TSC e cria o TSCONFIG.JSON

Rode o TASK “TSCONFIG.JSON” em watch mode: auto compiles TS->JS

http://localhost:3000/
http://localhost:3001/ <-UI DE CONFIG

OU

browser-sync start --server --files .

___________________________________________________________________________________
ENVIAR TEXTO PARA O CONSOLE

CRIAR UM LITE-SERVER VIA TERMINAL (VISUAL STUDIO CODE)

let hobbies = ["cooking","sports"]

console.log(hobbies[1]); //printa sports no console

; //use um “;” antes de um código de Framework/library para garantir que

ele executa corretamente, caso o JS anterior esteja faltando “;” no fim.

___________________________________________________________________________________

LET vs VAR
LET = BLOCK SCOPED
VAR = GLOBAL SCOPED
______________________________________________________________________

USE STRICT
“use strict”; //Usado no topo do programa: é mais rigoroso com a programação.

______________________________________________________________________

Use TypeScript to check your plain JavaScript code by adding a //@ts-check to

the top of the file.

To enable the setting globally across your entire project, add the following line to your User Preferences (⌘ + ,)...

"javascript.implicitProjectConfig.checkJs": true
Drop a .tsconfig file in your project to control specific TypeScript checking features.
JAVASCRIPT
//Strings //array
let myName = 'Marcio'; let hobbies = ["cooking","sports"];
//let myName = 35; console.log(typeof(hobbies));

//Number // tuples (arrays with mixed types)

let myAge = 47 let address: [string, number] =
//let myAge = '47' ["Superstreet", 99];

//Boolean //enum
let hasHobbies = true; enum Color {
//let hasHobbies = 1 Gray,
Green,
//assign Types any Blue=100,
let qqRealAge; Yellow
qqRealAge = 27; }
qqRealAge = '27'; let myColor: Color = Color.Green;
console.log(myColor); //prints 1
// ou //
console.log(Color.Blue); //prints 100
let anyRealAge: any; console.log(Color.Yellow) //prints 101 -> ele
anyRealAge = 27; continua a contagem!!!
anyRealAge = '27';
//any type
let myRealAge: number;
let car: any = "BMW";
myRealAge = 27;
console.log(car);
//myRealAge = '27';
car = {brand: "BMW", series: 3};
let herRealAge: number = 34;
console.log(car);

//ternary operator
CONDITION ? YES : NO;
ex1: age > 18? drink=’beer’ : drink=’juice’;
ex2: name = sex = “male” ? ‘John’ : ‘Mary’;

//functions
function returnMyName(): string {
return myName; //retorna o "Marcio" definido anteriormente na linha 2.
}
console.log(returnMyName())

//void
function sayHello(): void {
console.log("Hello!");
}

//argument types
function multiply(value1: number,value2: number): number {
return value1*value2;
}
console.log( multiply(10,3));
FUNCTIONS ARE OBJECTS!!!

//FUNCTIONS types sintaxe: let nome: (n1: type, n2: type, ...) => type;
// nome = função já existente;
let meuMultiply;
meuMultiply = sayHello;
meuMultiply();
meuMultiply = multiply;
console.log(meuMultiply(3,7));
let myMultiply: (val1: number, val2: number) => number; //pode ser val1, a,
blabla,... não importa!!!
//myMultiply = sayHello; //vai dar erro pois espera um number mas o sayHello é
void.
//myMultiply(); //
myMultiply = multiply;
console.log(myMultiply(4,7));
console.log( "----------------------------------")

greet(); //posso chamar uma function statement antes, pq tem Hoisting.

function greet()={
console.log(‘Function Statement!’);
}

var anonymousGreet = function(){

console.log(‘Function Expression’);
}
anonymousGreet(); //só posso chamar uma function expression depois da
variável ser criada!!!

//ARRAYS

unshift push insere

tabela=[10,19,3,8,42,15,12]
shift pop remove
tabela.splice(2,1); // [10,3,8,42,15,12] tirou o 19

sorted=tabela.sort(); // [10,12,15,19,3,42,8]

sorted2=tabela.sort(function(x,y){
return x-y;
}; //[3,8,10,12,15,19,42]

superSorted=tabela.sort(function(x,y){
return y-x;
}; //[42,19,15,12,10,8,3]

supersorted.reverse(); //[3,8,10,12,15,19,42]
//OBJECTS sintaxe:
let nome: {var1: type, var2: type, ...} = {var1:valor1, var2: valor2, ...};
let usoData : {
name: "Marcio",
age: 47
}
// usoData = {
// a:"Hello",
// b: 22 //Não vai dar certo pq. não pode ser a e b. Tem que ser name
e age.
// };
let userData: { name: string, age: number} = {
name: "Max", //pode já inicializar o objeto com valores default!
age: 27
}
userData = {
name: "Will",
age: 48
};
userData.age=135;
console.log(userData.name);
console.log(userData.age);
//complex object
let complex : {data: number[], output:(all:boolean)=> number[]}={
data:[100, 3.99, 10],
output: function (all: boolean): number[] {
return this.data;
}
};
OBJECTS
//FACTORY FUNCTION (camelNotation)
function createCircle(radius){
return {
radius, //ou radius: radius,
draw() {
console.log(‘draw’);
}
};
}
const myCircle = createCircle(1);

//CONSTRUCTOR FUNCTION (PascalNotation)

function Circle(radius){
this.radius = radius;
this.draw = function() {
console.log(‘draw’);
}
}
const circle = new Circle(1);

TO SEE ENTRIES AND PROPERTIES IN AN OBJECT:

KEYS:
for (let key in objeto)
console.log(key, objeto[key]);

for (let key of Object.keys(objeto)) //o for of só pode em ARRAYS e MAPS.

console.log(key);

ENTRIES:
for (let entry of Object.entries(objeto)) // Object.entries(circle) gera um array com
as keys e properties do objeto
console.log(entry);

EXISTE PROPRIEDADE NO OBJETO?

if (‘propriedade’ in objeto)
console.log(“Existe!”);

COPIANDO OBJETOS COM “FOR IN”:

const copia={};
for (let key in objeto)
copia[key]=objeto[key]; //copia o valor da key do objeto para a key do copia
(criando a key, se não houver);

Tudo isso é o mesmo que:

const copia=Object.assign({}, objeto); //JUNTA O {} com o objeto e faz o copia.

Ou:
const copia3 = __assign({},circle);

Ou ainda:
const copia={...objeto}; //SPREAD OPERATOR
TEMPLATE LITERALS (use o “ ` “ como aspas!)
var name = `John`;
var texto = `Olá, ${name}! “Template Literals”.`;

//type alias
type Complex = {data: number[], output:(all:boolean)=> number[]};
let complex2 : Complex ={
data:[100, 3.99, 10],
output: function(all: boolean): number[]{
return this.data;
}
};

//union types

let myRealRealAge: number|string = 27;

myRealRealAge = "27"
//myRealRealAge = true

//check types (typeof variable)

let finalValue = "Um texto";
if (typeof finalValue == "string") {
console.log("É uma string!")
}

//never type - pode servir para marcar um ponto no código, com um erro, por exemplo.
function neverReturns():never {
throw new Error('ex:É um Erro!!!');
};
neverReturns(); //gera o erro.

//Nullable Types (se tem "strictNullChecks": true no tsconfig.json, dá erro!)

let cantBeNull = 12;
//cantBeNull = null; //dá erro
let canAlsoBeNull; //não definiu, vira ANY
canAlsoBeNull=null;
canAlsoBeNull=12;
let canThisBeOnlyNull = null;
//canThisBeOnlyNull = 12; //dá erro
let canThisBeAny:number | null = null;
canThisBeAny = 12;
THIS keyword
Quando usada em um método, aponta para o objeto.

Quando usada em uma função, aponta para o global(se em NODE) ou para o window(se em
WEB). Exceto em “Arrow Functions =>, que assumem o this como sendo o objeto.

.bind (muda o “EXCUTION CONTEXT” do objeto) ou PASSA A FUNCIONAR COMO A FUNÇÃO BINDed.
var person = {
firstname:’John’,
Lastname:’Doe’,
getFullName: function(){
var fullname = this.firstname + ‘ ‘ + ‘this.lastname;
return fullname;
}

var logName = function(lang1, lang2){

console.log(‘Logged: ‘+this.getFullName()); //this não é person
console.log(‘Arguments: ‘+ lang1 + ‘ ‘ + lang2);
}

var logPersonName = logName.bind(person); //muda o CONTEXTO (de GLOBAL) para person

logPersonName(); //vai funcionar como a “person”

logPersonName(‘en’, ‘es’);
logName.call(person, ‘en’,’es’); //tá mandando funcionar como a “person”
logName.apply (person, [‘en’,’es’]); //difere de CALL pq tem q ser um ARRAY
CALLBACK FUNCTIONS
const video = {
title: ‘a’,
tags: [‘a’,’b’,’c’],
showTags() {
this.tags.forEach(function(tag) { //logs cada item de tags
console.log(this, tag);
});
}
};
//”THIS” vai ser o objeto WINDOW, já que ele está dentro de uma função (observe que
não é um método, mas sim uma callback function!) O único método aqui é o SHOWTAGS!

JSON vs OBJECT LITERALS JSONs têm o formato no estilo de ObjLiterals.

var objectLiteral =

// key: value, //
firstname: 'Mary',
isAProgrammer: true
}
console.log(JSON.stringify(objectLiteral));

var jsonValue = JSON.parse('{ "firstname": "Mary", "isAProgrammer": true }');

//jsonValue passa a ser um objeto!! Observe!

console.log(jsonValue);