Hello World em TypeScript

Olá pessoal, hoje iremos conhecer como criar um projeto em TypeScript e imprimir a mensagem “ Hello, world!” no terminal.

O TypeScript é uma linguagem desenvolvida pela Microsoft em 2012, traz uma abordagem mais estruturada ao JavaScript, permitindo a definição explícita de tipos. Esta funcionalidade auxilia na detecção precoce de erros durante o desenvolvimento, proporcionando maior robustez ao código. Além disso, o TypeScript oferece recursos adicionais, como interfaces, classes e módulos.

Para iniciar a estrutura do projeto , crie uma pasta com o nome hello-world-typescript, utilize o comando abaixo para criar pelo terminal:
bash

mkdir hello-world-typescript

Entre na pasta:

cd hello-world-typescript

Será necessário ter o Node.js instalado na máquina, para realizar a instalação acesse esse post Instale Node.js no Xubuntu.

Após a instalação do Node.js , inicie o projeto com o comando abaixo:

npm init -y

Instale o TypeScript como dependência de desenvolvimento :

npm install -D typescript

Pode-se instalar o TypeScript globalmente com o comando abaixo:

npm install -g typescript

O comando para criar o arquivo de configuração com o TypeScript instalado globalmente com o tsc (TypeScript compiler):

tsc --init

Outra alternativa para criar o arquivo de configuração do TypeScript é com o npx:

npx tsc --init

Resultado no terminal após a criação do arquivo tsconfig.json :

Created a new tsconfig.json with:
                                            TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

A estrutura do projeto será a seguinte:

.
└── hello-world-typescript
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    └── tsconfig.json

• node_modules
  • Pasta com as dependências instaladas
• package-lock.json
  • Árvore de dependências do projeto
• package.json
  • Arquivo de configuração do Node.js
• tsconfig.json
  • Arquivo de configuração do TypeScript

Crie um pasta para os códigos em TypeScript com o nome src (source):

mkdir src

Dentro da pasta src , crie um arquivo com o nome index.ts , a extensão .ts é referente a arquivos do tipo TypeScript :

touch index.ts

Adicione o conteúdo abaixo no arquivo index.ts , pode-se observar que a variável hello é do tipo string:

const hello: string = 'Hello, world!';

console.log(hello);

Para realizar a transpilação (converter o código de uma linguagem para outra) dos arquivos TypeScript para JavaScript, utilize o comando tsc :

npx tsc ./src/index.ts

Pode-se observar que foi gerado um novo arquivo na pasta src com o nome index.js e conteúdo na linguagem JavaScript :

var hello = 'Hello, world!';

console.log(hello);

A estrutura do projeto após criar a pasta src e transpilar o arquivo index.ts :

.
└── hello-world-typescript
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── src
    │ ├── index.js
    │ └── index.ts
    └── tsconfig.json

O arquivo index.js foi criado na mesma pasta do index.ts , mas pode-se alterar o destino dos arquivos transpilados para uma pasta diferente adicionado duas configurações no arquivo tsconfig.json.

As configurações:

• rootDir
  • A pasta dos arquivos TypeScript
• outDir
  • A pasta de destino dos arquivos transpilados

O arquivo tsconfig.json:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "rootDir": "./src/",
    "outDir": "./dist/"
  }
}

Delete o arquivo index.js da pasta src e execute o comando abaixo:

npx tsc

Pode-se observar que foi criada uma nova pasta com o nome dist que possui um arquivo index.js na linguagem JavaScript.

Estrutura do projeto:

.
└── hello-world-typescript
    ├── dist
    │ └── index.js
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── src
    │ └── index.ts
    └── tsconfig.json

A pasta dist será o código utilizado em produção, para testar utilize o Node.js com o comando abaixo:

node ./dist/index.js

Resultado da execução do arquivo index.js :

Hello, world!

Link para o repositório do projeto: https://gitlab.com/franciscochaves/hello-world-typescript

Valeu pessoal 😎✌️!

Referências

TYPESCRIPT. TypeScript. Disponível em: https://www.typescriptlang.org/. Acesso em: 6 de jan. de 2024.

DUARTE JUNIOR, Luiz Fernando. [Live] Aulão de TypeScript. LuizTools, 1 de jan. de 2024. 1 vídeo (1h 19min 50s). Disponível em: https://www.youtube.com/watch?v=omfawXuJ-o4. Acesso em: 6 de jan. de 2024.