TypeScript

O que é?

TypeScript é uma linguagem criada pela Microsoft que funciona como um superconjunto (superset) do JavaScript. Todo código JavaScript válido já é, também, TypeScript válido — o TypeScript apenas adiciona recursos por cima, principalmente a tipagem estática opcional.

Ele age como um verificador de tipos estáticos: aponta erros relacionados a tipos antes de o código rodar (em tempo de compilação). No JavaScript puro, muitos desses erros só apareceriam com o usuário já usando a aplicação (runtime).

Em outras palavras, TypeScript é uma linguagem vertente do JavaScript que nos auxilia a identificar problemas de tipagem e a atribuição de variável porquê nos força a declarar qual será o valor a receber (inteiro, cadeia de caracters, booleano..).

Trabalhando com TypeScript

Para começarmos um projeto com TypeScript precisamos ter algumas ferramentas e bibliotecas na máquina, senda elas:

• Node – Environment que executa código JavaScript fora do navegador (baixe versão LTS no site oficial).
• Npm – Gerenciador de pacotes Node (sem ele não podemos instalar bibliotecas como a do TypeScript).
• TSC – Compilador TypeScript
• IDE (de sua preferencia) – O mais recomendado é o vs studio pois fornece suporte nativo a TypeScript.

Let’s start

1. Após realizar o procedimento de instalação do Node.js juntamente do NPM, verifique as versões de cada um após instalado. Em minha máquina na data de hoje ( 22/10/2026 ).

2. Aberto o diretório no editor, vamos iniciar nosso gerenciador de libs NPM.

Note que será criado um package.json porquê ele é nosso gerenciador de pacotes e “certidão de nascimento” do nosso projeto, recriamos e instalamos tudo a partir dele com o npm. Quando você insere npm init -y você aceita os valores padrões para cada parâmetros que o instalador insere.

3. Agora precisamos dizer ao npm que queremos instalar as dependências do TypeScript para começarmos a desenvolver:

O npm ira instalar todas as dependências para desenvolver em typescript, você vai notar o diretório node_modules e a adição de um novo parâmetro “devDependecies” no arquivo package.json.

4. Depois de instalado as dependências precisamos instalar nosso compilador TypeScript. Sem ele nossa o node não irá compilar e transpilar nosso código TS para JS.

Você deve se perguntar agora, por que o npx e não npm? Alias, qual a diferença entre esses dois? Enquanto utilizamos o npm – Node Package Management – para instalar e gerenciar nossas dependência, o npx que é integrado ao npm as executa. Então é como se estivéssemos dizendo, Node a partir dessas dependências instaladas pelo npm, inicialize (execute) o compilador TS (tsc) – TypeScript Compiler. Então o próprio npx cria um arquivo tsconfig.json contendo nele todos os parâmetros que deverão ser considerados na compilação do arquivo .ts.

Você vai perceber que por padrão, alguns parâmetros já vem habilitados e outros comentados. No final de tudo, quem decide como vai funcionar e o que vai ou não utilizar no compilador é você mesmo. Mas, para fins didáticos habilitaremos essas opções no arquivo.

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "ES2020",
    "target": "ES2020",
    "types": [],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"],
}

{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "module": "ES2020",
    "target": "ES2020",
    "types": [],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  },
  "include": ["src/**/*.ts"],
}

Com isso, você já consegue transpilar todos os arquivos .ts que criar dentro do diretório src. As opções de comando que você pode utilizar:

npx tsc /* Transpila todos os arquivos .ts */

npx tsc App.ts /* Transpila somente o arquivo passado no parâmetro */

npx tsc --watch /* Transpila em tempo real tudo que editar no arquivo .ts*/

npx tsc /* Transpila todos os arquivos .ts */

npx tsc App.ts /* Transpila somente o arquivo passado no parâmetro */

npx tsc --watch /* Transpila em tempo real tudo que editar no arquivo .ts*/

Utilize este exemplo e compare depois com o arquivo transpilado para .js:

const soma = (a: number, b: number): number => {
  return a + b;
}
const subtracao = (a: number, b: number): number => {
  return a - b;
}

type Setor = "Produção" | "Administrativo"

interface Operador {
    id: number;
    nome : string;
    idade: number;
    setor: Setor;
}

let operadores: Operador[] = [
    {
        id: 1,
        nome: "João",
        idade: 30,
        setor: "Produção"
    }
]

console.log(soma(2, 3));
console.log(subtracao(5, 2));
console.log(operadores);

const soma = (a: number, b: number): number => {
  return a + b;
}
const subtracao = (a: number, b: number): number => {
  return a - b;
}

type Setor = "Produção" | "Administrativo"

interface Operador {
    id: number;
    nome : string;
    idade: number;
    setor: Setor;
}

let operadores: Operador[] = [
    {
        id: 1,
        nome: "João",
        idade: 30,
        setor: "Produção"
    }
]

console.log(soma(2, 3));
console.log(subtracao(5, 2));
console.log(operadores);

Você vai ver que o JS só vai conter as funções, variáveis e listas sem a tipagem. Tudo que é relacionado a tipagem de valor não é criado.

const soma = (a, b) => {
    return a + b;
};
const subtracao = (a, b) => {
    return a - b;
};
let operadores = [
    {
        id: 1,
        nome: "João",
        idade: 30,
        setor: "Produção"
    }
];
console.log(soma(2, 3));
console.log(subtracao(5, 2));
console.log(operadores);
export {};
//# sourceMappingURL=main.js.map

const soma = (a, b) => {
    return a + b;
};
const subtracao = (a, b) => {
    return a - b;
};
let operadores = [
    {
        id: 1,
        nome: "João",
        idade: 30,
        setor: "Produção"
    }
];
console.log(soma(2, 3));
console.log(subtracao(5, 2));
console.log(operadores);
export {};
//# sourceMappingURL=main.js.map

Conclusão

• TypeScript é a base para outros frameworks como Angular, Vue.js..
• É uma linguagem fundamental para anteciparmos possíveis problemas / bugs relacionados a tipagem de variáveis.
• No fim quem será executado no navegador é o próprio JS.