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:
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.
