Iniciando no TypeScript, (projeto / biblioteca)🐛 · miguellb

Olá 🖖

Neste artigo vamos aprender como criar um projeto usando o node em typescript, como transformar isso em um package para publicar no npm (node package manager)!

Node 🧶

O Node.js é um container web de execução de código Javascript

TypeScript 📜

TypeScript é uma linguagem criada pela Microsoft e é um super conjunto da linguagem JavaScript, que fornece classes, interfaces e a tipagem estática opcional.

Uma das grandes vantagens da TypeScript é permitir que os IDEs proporcionem um ambiente mais rico para detectar erros comuns enquanto você digita o código usando o recurso Intellisense.

Como usar o TypeScript em um projeto node

Crie uma pasta para o projeto

$ mkdir {pasta-do-projeto}

Instale o pacote do TypeScript
Abra o seu terminal dentro da pasta do projeto e execute este comando, este comando instala o pacote typescript somente no ambiente de desenvolvimento!
Observe que ao instalar o pacote ele aparecerá no package.json como devDependencies, o pacote ts-node-dev será usado para conseguirmos rodar o código em versão de desenvolvimento

$ cd {pasta-do-projeto}
$ npm init -y
$ npm install -d typescript ts-node-dev

Crie o arquivo tsconfig.json
Crie o arquivo tsconfig.json na raiz do projeto, na pasta principal, esse arquivo é de configuração do compilador do typescript
Mais informações sobre essas opções, podem ser encontradas no site da linguagem https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

{
    "compilerOptions": {
        "target": "es2019",
        "moduleResolution": "node",
        "module": "commonjs",
        "lib": [
            "es2019"
        ],
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "noImplicitThis": true,
        "resolveJsonModule": true,
        "alwaysStrict": true,
        "removeComments": true,
        "noImplicitReturns": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        //"declaration": true,
        "baseUrl": ".",
        "paths": {
            "@src/*": [
                "./src/*"
            ],
            "@modules/*": [
                "./src/app/modules/*"
            ],
            "@test/*": [
                "./test/*"
            ]
        },
        "rootDirs": [
            "./src",
            "./test"
        ],
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    },
    "include": [
        "./src/**/*.ts",
        "./test/**/*.ts"
    ],
    "exclude": [
        "./node_modules/*",
        "dist"
    ]
}

Scripts package.json
Dentro do arquivo package.json crie uma seção scripts que será utilizada para facilitar na hora de rodar o projeto.

"main": "dist/{seu-arquivo-main}.js",
"scripts": {
    "build": "tsc",
    "start": "npm run build && node .",
    "dev": "ts-node-dev src/{seu-arquivo-main}"
},

É só começar o seu projeto
Todas os pacotes que você for instalar se quiser ter o apoio do Intellisense, terá que instalar os types de tal pacote.
A maioria dos pacotes tem uma versão @types/{nome-do-pacote} que possuirá as informações necessárias do Intellisense

Como criar o pacote e publicar no NPM

Criar arquivos de definições .d.ts
Adicione ao seu "compilerOptions", dentro do arquivo tsconfig.json, um "declaration": true. Estes arquivos de definições são excesiais para verificar os tipos.

OBS.: Esta linha já está criada no modelo de tsconfig presente neste artigo, basta descomenta-lo!
Adicione types
Quando outras pessoas importam sua biblioteca, isso informa ao compilador TypeScript onde procurar os tipos da sua biblioteca.
Dentro do seu package.json, em baixo da linha "main": "dist/{seu-arquivo-main}.js", coloque o seguinte "types": "dist/{seu-arquivo-main}.d.ts",
Adicione um arquivo .gitignore
O gitignore ignora as pastas e arquivos presentes nele na hora de enviar o projeto para um repositório, já que não queremos ficar enviando a pasta de build do javascript para o repositório colocaremos a pasta /dist nesse arquivo

/node_modules
/dist

Adicione um arquivo .npmignore
O npmignore ignora as pastas e arquivos presentes nele na hora de publicar o projeto no NPM, nele colocaremos 2 pastas, a /src, que contem todo o código fonte projeto e a /node_modules, que contem os pacotes instalados neste projeto

/node_modules
/src

Agora é só publicar
- crie uma conta no https://www.npmjs.com/
- Execute no terminal npm login e logue com a sua conta do npmjs
- Execute npm publish na pasta do projeto e pronto, seu projeto já foi publicado! 🎉