Typescript Fast Start

Typescript Fast Start

2019-01-26 Off Por gambin

Olá Pessoal,

Este é um guia rápido que serve pra todos aqueles que não trabalham com Typescript o tempo todo e volta e meia precisam fazer um setup rápido ou precisam de um guia simples pra já sair desenvolvendo em TS. Lá vai!

Para o setup base:

  1. Instalação do NodeJS;
    1. Debian e variados – sudo apt-get install -y nodejs
    2. Windows – download e instalação do pacote msi https://nodejs.org/en/ 
    3. OSx – brew update && brew install node
  2. Instalação de Editor/ IDE:
    1. Recomendado o Visual Studio Code – https://code.visualstudio.com

 

Com o setup base já preparado, é necessário preparar agora o projeto que será desenvolvido:

  1. Defina o diretório base do projeto;
  2. Com o terminal/ console disponível no SO, acesse o diretório do projeto e defina as configurações básicas através do npm init
  3. Agora com o package.json definido, já podemos instalar alguns packages, como o typescript:
    1. npm install typescript@3.2.4 –save-dev

 

Com o Typescript devidamente instalado, devemos agora criar o arquivo ts.config no diretório root do projeto, mesmo path onde encontra-se o package.json.

O arquivo ts.config pode ter recomendavelmente a seguinte estrutura:

{
    "compilerOptions": {
        "target": "es6",          // define o target do ECMA Script
        "outDir": "app/js",       // define o output path dos arquivos JS
        "noEmitOnError": true,    // nao gera output em caso de erros
        "noImplicitAny": true,    // nao define a tipagem como 'any' implicitamente
    },
    "include": [
        "app/ts/**/*"             // define o input path para gerar js
    ]
}

 

Com o arquivo devidamente configurado, já podemos preparar a estrutura de diretórios, e considerando o padrão MVC podemos utilizar a seguinte estrutura:

 

Mas antes de qualquer desevolvimento, já podemos também preparar o compilador, portanto dentro da property scripts, já podemos criar a tag compile, conforme detalhado abaixo:

{
  "name": "meu-projeto-xpto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.2.4"
  }
}

 

Agora para compilar o projeto, basta entrar no terminal de sua preferencia e no diretório do projeto rodar um npm start compile.

Pronto, já temos o básico do básico para iniciar o desenvolvimento em TS =]

Espero que tenham gostado e até o próximo post!

 

Este post reflete apenas a opinião do autor sobre o assunto, e não fornece garantias ou responsabilidade sobre qualquer problema decorrente de sua utilização.