Guia de Estilos para TypeScript

Este um Guia no oficial e voc pode opinar atravs do repositrio de GitHub para juntos chegarmos a melhor definio do Ideal! Vamos colaborar?

Navegao por tpico facilitada!

• Variveis & Funes
• Classes
• Interfaces
• Tipos
• Namespaces
• Enum
• null vs undefined
• Formatao
• Aspas simples vs Aspas Duplas
• Uso de ponto e vrgula ao final de linhas " ; "****
• Uma sugesto para uma boa nomeao de Arquivos
• Tipo vs Interface
• Anotao de Tipos para Array
• Comparadores, "==" vs "==="

Variveis e Funes:

Use camelCase para nomear variveis e funes

M nomenclatura

let FulanoVariavel: string = 'Aqui est errado.. (    )';function CiclanoFuncao(){}

Boa nomenclatura

let fulanoVariavel: string = 'Aqui est daora! ()';function ciclanoFuncao(){}

Class

Use PascalCase para nomear suas classes! (Ou use programao funcional )

M nomenclatura

class fulano {}

Boa nomenclatura

class Fulano {}

Use camelCase para as propriedades e mtodos de suas classes!

M nomenclatura

class fulano {    DeTal: string;     Ciclano( ){ }} 

Boa nomenclatura

class Fulano {    deTal: string;     ciclano( ){ }} 

Interfaces:

Use PascalCase para nomear a Interface

• Use camelCase para nomear seus membros

No use o Prefixo "I", exemplo: IfuncaoFulano...

M nomenclatura

interface IFulano {     DeTal: string;} 

Boa nomenclatura

interface Fulano {     deTal: string;} 

Tipos

Use PascalCase para nomear o seu Tipo

• Use camelCase para nomear as propriedades do seu tipo!

M nomenclatura

type fulano = {    DeTal: string;}

Boa nomenclatura

type Fulano = {    deTal: string;}

Namespaces

Use*PascalCase*para nomear os "Namespaces" - Padro do time do TS.

M nomenclatura

namespace fulanoDeTal {}

Boa nomenclatura

namespace FulanoDeTal {}

Enum

Use_PascalCase_para nomear os Enums.

• Use PascalCasepara nomear seus subtipos/valores.

M nomenclatura

enum jogodoBicho {    avestruz,    borboleta,    cachorro}// No h endosso do Jogo do Bicho. Apenas  algo contextual que todo Brasileiro entenderia.

Boa nomenclatura

enum JogoDoBicho {    Avestruz,    Borboleta,    Cachorro}// No h endosso do Jogo do Bicho. Apenas  algo contextual que todo Brasileiro entenderia.

Null vs Undefined

Tente no usar nenhum deles para indisponibilidade explcita!

Mal caso de uso

let pontos : {x: number, y: number | null | undefined }  = {x: 1, y: undefined } 

Bom caso de uso

let pontos: {x: number, y?: number } = { x: 777 } //  

Em suma: Precisa informar que uma propriedade pode ser "indefinida"? Use o operador "?" antecedendo o seu tipo!

Retorno de funes?

Mal caso de uso

typescript
return null;


Bom caso de uso

return undefined;

Por qu? Sugiro voc consultar a pgina Sobre False, True, Truthy & Falsy.

Callbacks?

Use null quando for parte da API ou de sua conveno usar.

quase em um consenso em Node.js, por exemplo: error nullem chamadas do NodeBack.

Mal caso de uso

callbackDeAlgo(undefined);

Bom caso de uso

callbackDeAlgo(null);

E como verificar isso a?

Cheque por "Truthy" em objetos sendo null ou undefined.

Mal caso de uso

if (error === null) // e se for undefined? 

Bom caso de uso

if (error) //  Vlido tanto para undefined quanto para o null

Um exemplo um pouco mais completo sobre verificao

Use "==" null ou "!=" null. No use "===" ou "!==" para checar por null ou undefined quando querendo verificar tipos primitivos porque funciona apenas nos tipos primitivos supracitados e no para valores "Falseveis", como por exemplo: 0, false, etc.

Mal caso de uso

if (error !== null) // No garante que seja apenas nullo. Pode ser um valor Falsevel.

Bom caso de uso

if (error != null) // Garante que  um valor de tipo primitivo (ou seja, null ou undefined mas no falsy).

Formatao

O Compilador do TypeScript j fornece um bom servio de formatao estrutural, o que j bom o suficiente para diminuir o esforo mental do desenvolvedor (ou do time). Todavia, voc tambm pode usar o tsfmt no terminal (linha de comando para formatar seu cdigo) - e tambm est disponvel como plugin para vrias IDES (vscode, etc).

S um exemplo que eu acho pertinente, ou melhor, uma boa prtica:

let fulano: string = 'Ciclano';

No caso, usamos um espao depois da definio do tipo...

• let variavel:(espao)tipo(espao)=(espao)valor(ponto e virgula)

Sobre Aspas...

Prefira usar aspas simples (single quotes) ao invs de aspas duplas.

• Times grandes que usam JS/TS o fazem. uma conveno quasae que de mercado, tambm o sugerido pelo time do "Prettier".

let nomeDoSujeito: string = 'Lus Von Mller';

Todavia, muita vezes em ingls precisamos usar o a single quote para conjugar um verbo: "I'm"

Se a aspas simples no lhe cabe. Use ento "`"

• Faa o uso do string template do JS ao invs de concatenar variveis strings atravs var + "..." + var2.

typescript
let nomeDoSujeito: string = 'Lus Von Mller';
console.log(Quem escreveu? ${nomeDoSujeito})


Sobre outras coisas como usar "tabs" ou espao. O sugerido para JS 2 espaos (e muitas companias como Facebook, Airbnb, google seguem esse padro. Mas o time do TS usa 4 e o do VScode tambm . Isso varivel e de gosto muito mais pessoal ou conveno prpria e do teu time

(Mas eu uso tabs configuradas como 4 espaos)

Ponto & Vrgula;

Use o ponto e vrgula, por qu?

• Pontos e vrgulas explcitos ajudam os identadores (tsfmt/prettier) a identificar e "estruturar" seu cdigo.
• A falta de ponto e vrgula pode ser incmodo para novos desenvolvedores em TS. J que a maioria das linguagens o implementa. (Houve um debate sobre como isso pode ser "incomodo" para novos desenvolvedores e outros. https://github.com/tc39/ecma262/pull/1062)
• Empresas grandes usam em suas implementaes, ex: Google/Angular - Facebook/React - Microsoft/VScode...

Sugesto para boa nomeao de arquivos.

Essa aqui uma baita de uma discusso, depende muito do que ambiente voc est e se voc est seguindo o padro de nomeao de um framework, ex: React para Componentes. Mas no geral o que a maioria dos times usa o seguinte:

Use camelCase para nomear seus arquivos, exemplo:

• utils.ts
• helpersDaora.ts
• mapeamentoEndPointsDaApi.ts

Tipo ou Interface?

Tipos devem ser usados para definir, adivinha? Tipos. Ou seja, se voc tem uma funo, ela retorna um valor. E esse valor possui um tipo. Mas essa funo, tambm recebe algo. E esse algo, tambm so valores, ou seja, tambm podem ser tipos. Mas a "meta" ideia que interface fornea uma interface . Eu acho que esse exemplo clarifica...

Quando usar qual?

• Tipos: Precisa de Unio ou Interseo de tipos (e provavelmente voc vai preferir Tipos tambm se quiser implementar alguns tipos de mapeamentos Genricos de objetos).
• Interfaces: quando voc precisa dizer que algo "implements" ou "extends", como por exemplo uma classe, para receber argumentos em uma funo, ou at mesmo para quando voc t querendo criar alguma funo extremamente composta bem maneira .

Ou do jeito que voc se sentir mais confortvel e seguro para a implementao que est fazendo!

Aqui em baixo, eu poderia definir a funo de outra maneira, optei por essa.

`typescript
/** Definimos a interface (ou contrato) de uso da funo */
interface DizerOi {
nome: string;
sobrenome?: string;
}

/** Definimos que o tipo de retorno da funo como uma Array de Strings */
type DisseOi = string[];

/** Vamos dizer oi 10x! e retornar um array! */
const dizerOi = ({nome, sobrenome}: DizerOi): DisseOi => {
return [...Array(10).keys()].map((key) => {
return Ol ${nome} ${sobrenome ?? ''};
})
}

console.log(dizerOi({nome: 'Lus'}));
`

Anotao do tipo Array

Use tipo[] ao invs de Array<tipo>

Mal caso de uso

typescript
let variosNumeros: Array<number> = [1,2,3,4,5,6,7];


Bom caso de uso

typescript
let variosNumeros: number[] = [1,2,3,4,5,6,7];


Comparadores "===" e "=="

Relaxa amigo! Voc t usando TypeScript. Pode usar "===" tranquilamente!

Obrigado por ler at aqui!