Typescript에 대한 팁

14973 단어

Pq usar Typescript??



Antes de entrar nos tipos básicos de typescript é importante saber o por que estamos fanzendo isso. Eu msm não era muito fã de acrescentar tipos no frontend por exemplo, porém depois de uma introdução curta vi que o superset do javascript poderia diminuir meus problemas tanto com troca de nome de propriedades quanto de prever partes do código que eu posso estar recebendo algo nulo e como iniciante eu achei isso realmente incrível.

추신: Provavelmente deve haver outros fantásticos benefícios de se usar typescript, mas estou aplicando o learning public nesse texto então se houver mais descobriremos juntos.

Tipos do Typescript



Vamos começar pelos tipos primitivos que são os basicos e comuns do ecossistema.

부울



É o mais básico dos tipos, somente os valores true e false.

const yes: boolean = true
const no: boolean =  false


숫자 e BigInt



모든 종류의 변수는 숫자를 수신할 수 있고, 숫자를 입력할 수 있는 숫자는 내부의 숫자와 크기가 동일해야 합니다.

const BigNum1:bigint = 100n;           //ok
const BigNum2:bigint = 100.20n;        //error

const Num1:number = 100;               //ok
const Num2:number = 100.20;            //ok


Vc pod se perguntar por que?? Até pq eu me perguntei. E a resposta para existir dois tipos para números muito grandes.



Outro tipo que desenvolvedores javascript estão acostumados, é aplicado a variáveis ​​que recebem cadeias de caracteres entre aspas assim como no javascript.

const firstName:string = "João";     //ok
const age:string = 19;              //error



Void, Null e 정의되지 않음



Muitas vezes null e undefined são confundidos pois a diferença é realmente bem sutil.Usando a inferência de tipo do typescript podemos ter uma ideia da diferença.

let a
let b=null
console.log(typeof(a))   //undefined
console.log(typeof(b))   //object


정의되지 않은 의미는 que o valor não foi atribuído e você não sabe seu valor입니다. É uma ausência não intentional de valor . Isso significa que uma variável foi declarada, mas ainda não recebeu um valor.
Null indica que você sabe que o campo não possui um valor . É uma ausência intentional de valor. O console.log에는 javascript가 없는 버그가 포함된 예제 반환 개체가 없습니다.

E o 무효 ?? Void é um tipo especifico para retorno de de funções que não retornam nada.

function fn1 ():void {
 console.log('Não retorna nd')      //ok
}
function fn2 (args:number):void {
 return args                       //error
}


Saindo dos tipos primitivos vamos conhecer algumas novidades que o typescript trouxe.

날짜



Se vc usar o typeof com o 구성자 new Date javascript vc verá [개체 개체] 콘솔이 없습니다. O typescript trouxe esse tipo que nos permite digitar variáveis ​​de data com força e obter intellisense útil no objeto Date.

const date = new Date(1990, 4, 7)
console.log(typeof date)         //Date


정렬



É um tipo genérico onde vc especifica que tipo de dado vai ser guardado pelo array. E há duas formas de usar esse genérico.

const numbers: Array<number> = [1, 2, 3]; // ok
const numbers: Array<number> = [1, 'two', 3]; // error

const numbers: number[] = [1, 2, 3]; // ok
const numbers: number[] = [1, 'two', 3]; // error


튜플



São uma forma de tipar cada valor de um array.

const tomScore: [string, number] = ["Tom", 70];


Tbm podemos ultilizar o spread operator para esse tipo mais dinamico.

const tomScore: [string, ...number[]] = ["Tom", 70, 60, 80]];


절대



É um tipo que indica que uma função nunca deve retornar algo e é diferente do tipo void. Void consegue receber null e undefined já never não.

const something: void = null     //ok
const nothing: never = null      //error


Por esse rigor do tipo never normalmente se usa em funções que semper geram um erro.

function fn(a: string | number): boolean {
  if (typeof a === "string") {
    return true;
  } else if (typeof a === "number") {
    return false;
  }  
  return neverOccur('Houve um erro');
}

function neverOccur (message: string) : never {
   throw new Error(message);
} 


알 수 없음 전자 모두



Lendo a documentação e conversando com desenvolvedores se acha algo que é consenso (se vc participa da bolha dev no twitter vc sabe o quanto é difícil): 아무거나 사용하지 마세요!! Óbvio que é um exagero a questão é tentar ao maximo não usar any e pq? Por que any desativa toda a checagem de tipos do seu código e isso ruim pq o typescript surge exatamente para garantir o type checking.
Por isso é preferível usar unknown e ultilizar de if para garantir a tipagem .
나오 무이토 세구로

let something
something = "Bob";
something = 33;
something = false;
something = new Date(2019, 5, 8);


세구로

function add(a: unknown, b: unknown) {
  if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
  return 0;
}


Espero que tenha ficado claro. Qualquer crítica, sugestão ou dúvida minha dm do twitter está aberta.

좋은 웹페이지 즐겨찾기