Criando bibliotecas com TypeScript

O objetivo desse post será a demonstração através de alguns passos de como podemos criar de uma biblioteca com TypeScript e publicarmos ela no portal NPM.

Primeiro passo: Inicialização do projeto

Nosso primeiro passo será a criação de um novo diretório, para esse artigo nós criamos um com o nome ts-library, navegue até o seu diretório via CMD e execute o comando npm init -y.

O comando a cima irá criar um arquivo chamado package.json, esse será o primeiro arquivo que nós precisamos editar. Para isso, iremos precisa de em um editor de textos, nesse artigo nós iremos utilizar o VS Code (Visual Studio Code).

Com o VS aberto, agora nós precisamos atualizar o nosso arquivo package.json:

{
    "name": "typescript-library",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "main": "dist/index.js",
    "types": "dist/index.d.ts"
}

• name: deve ser o nome da sua biblioteca;
• version: a versão atual do seu código;
• types: local do nosso arquivo de type definition, para quem ainda não conhece segue o link de um artigo sobre esse tema Type Definitions.

Segundo passo: Configurando TypeScript

Agora nós precisamos criar o nosso arquivo de configurações do TypeScript. Para isso, crie um novo arquivo chamado tsconfig.json na raiz do seu projeto.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "declaration": true,
        "outDir": "./dist"
    },
    "include": [
        "src/**/*"
    ]
}

Passando pelo nosso arquivo a cima nós temos:

• target: a versão do ecmascript que nós estamos utilizando.
• declaration: nós deixamos como true para que ele gere o nosso arquivo de types.
• include: local onde ele deve varrer para achar os nossos arquivos .ts.

Terceiro passo: Criação da biblioteca

Para esse passo nós iremos criar uma biblioteca para pegar o valor de um parâmetro passado pelo URL, algo bem simples somente para que possamos ver esse fluxo.

export namespace GetUrl {
    export function params(url) {

    var queryString = url ? url.split('?')[1] : window.location.search.slice(1);


    var obj = {};

    if (queryString) {
        queryString = queryString.split('#')[0];
        var arr = queryString.split('&');

        for (var i = 0; i < arr.length; i++) {

        var a = arr[i].split('=');
        var paramNum = undefined;
        var paramName = a[0].replace(/\[\d*\]/, function (v) {
            paramNum = v.slice(1, -1);
            return '';
        });

        var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];
        paramName = paramName.toLowerCase();
        paramValue = paramValue.toLowerCase();
        if (obj[paramName]) {

            if (typeof obj[paramName] === 'string') {
            obj[paramName] = [obj[paramName]];
            }

            if (typeof paramNum === 'undefined') {
            obj[paramName].push(paramValue);
            }
            else {
            obj[paramName][paramNum] = paramValue;
            }
        } else {
            obj[paramName] = paramValue;
        }
    }
}
    return obj;
}}

O trecho de código a cima foi retirado do site. A baixo tem uma explicação de como eles recomendam a sua utilização.

getAllUrlParams().product; // 'shirt' 
getAllUrlParams().color; // 'blue' 
getAllUrlParams().newuser; // true 
getAllUrlParams().nonexistent; // undefined 
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

Quarto passo: Criação do arquivo main

Para que possamos exportar a nossa biblioteca para o NPM, nós precisamos criar o arquivo que nós definimos no passo dois desse artigo na tag main. Para isso, crie na raiz do seu projeto um arquivo chamado index.ts e dentro dele importe o sua biblioteca.

import { GetUrl } from "./geturl-params";

Quinto passo: Publicando no NPM

Para essa etapa, nós iremos precisar de uma conta no portal NPM, caso ainda não tenha basta clicar no link e criar uma. Com o seu usuário e senha do em mãos, digite no seu terminal npm login e insira as suas credenciais, em seguida execute o comando npm publish, para que possamos verificar se o o nosso pacote foi publicado com sucesso, basta acessar o portal NPM no seu perfil.

Para quem tiver interesse em como ficou a versão final do código demonstrado nesse artigo, segue seu link no GitHub.