Sobre "* .d.ts" no TypeScript

Estou me sentindo curioso *.d.tsporque sou novato no TypeScript. E alguém me disse que esse tipo de arquivo é algo como "arquivo principal" em C ++, mas apenas para JS. Mas não consigo converter um arquivo JS puro em arquivo, a *.d.tsmenos que eu mude à força *.jspara *.ts. Então, eu tenho três arquivos: um arquivo JS, um arquivo TS e um *.d.tsarquivo.

1. Qual é a relação entre eles?

2. Como posso usar o *.d.tsarquivo? Isso significa que posso excluir o *.tsarquivo permanentemente?

3. Em caso afirmativo, como o *.d.tsarquivo pode saber qual arquivo JS está mapeando para si mesmo?

Seria muito bom se alguém pudesse me dar um exemplo.

O arquivo "d.ts" é usado para fornecer informações de tipo de texto datilografado sobre uma API escrita em JavaScript. A idéia é que você esteja usando algo como jQuery ou sublinhado, uma biblioteca javascript existente. Você deseja consumir aqueles do seu código datilografado.

Em vez de reescrever jquery ou sublinhado ou o que quer que seja em texto datilografado, você pode escrever o arquivo d.ts, que contém apenas as anotações de tipo. Em seguida, a partir do seu código datilografado, você obtém os benefícios datilografados da verificação estática de tipos enquanto ainda usa uma biblioteca JS pura.

dsignifica Arquivos de Declaração :

Quando um script TypeScript é compilado, existe uma opção para gerar um arquivo de declaração (com a extensão .d.ts) que funciona como uma interface para os componentes no JavaScript compilado. No processo, o compilador remove todos os corpos de função e método e preserva apenas as assinaturas dos tipos que são exportados. O arquivo de declaração resultante pode ser usado para descrever os tipos TypeScript virtuais exportados de uma biblioteca ou módulo JavaScript quando um desenvolvedor de terceiros o consome do TypeScript.

O conceito de arquivos de declaração é análogo ao conceito de arquivo de cabeçalho encontrado em C / C ++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

Os arquivos de declaração de tipo podem ser escritos manualmente para bibliotecas JavaScript existentes, como foi feito para jQuery e Node.js.

Grandes coleções de arquivos de declaração para bibliotecas JavaScript populares estão hospedadas no GitHub no DefinitelyTyped e no Typings Registry . Um utilitário de linha de comando chamado tipações é fornecido para ajudar a procurar e instalar arquivos de declaração a partir dos repositórios.

Não pude comentar e, portanto, estou adicionando isso como resposta.
Tentamos mapear tipos existentes para uma biblioteca javascript.

Para mapear um .d.tsarquivo para seu arquivo javascript, você precisa dar ao .d.tsarquivo o mesmo nome que o arquivo javascript, mantê-lo na mesma pasta e apontar o código que precisa para o .d.tsarquivo.

por exemplo: test.jse test.d.tsestá na testdir/pasta, então você o importa assim em um componente de reação:

import * as Test from "./testdir/test";

O .d.tsarquivo foi exportado como um espaço para nome como este:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Exemplo resolvido para um caso específico :

Digamos que você tenha o meu módulo que está compartilhando via npm .

Você o instala com npm install my-module

Você o usa assim:

import * as lol from 'my-module';

const a = lol('abc', 'def');

A lógica do módulo está toda em index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Para adicionar digitações, crie um arquivo index.d.ts:

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

Como @takeshin disse, .d significa arquivo de declaração para texto datilografado (.ts).

Poucos pontos a serem esclarecidos antes de continuar a responder a esta postagem -

1. O texto datilografado é um superconjunto sintático de javascript.
2. O texto datilografado não roda por si só, ele precisa ser transpilado para javascript ( conversão de texto datilografado em javascript )
3. "Definição de tipo" e "Verificação de tipo" são as principais funcionalidades adicionais que o texto datilografado fornece sobre javascript. ( verifique a diferença entre o script de tipo e o javascript )

Se você está pensando se o texto datilografado é apenas um superconjunto sintático, que benefícios ele oferece - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Para responder a este post -

Como discutimos, o texto datilografado é um superconjunto de javascript e precisa ser transpilado para javascript. Portanto, se uma biblioteca ou código de terceiros for escrito em texto datilografado, ele será convertido para javascript, que pode ser usado pelo projeto javascript, mas vice-versa não é verdadeiro.

Por ex -

Se você instalar a biblioteca javascript -

npm install --save mylib

e tente importá-lo no código datilografado -

import * from "mylib";

você receberá um erro.

"Não foi possível encontrar o módulo 'mylib'."

Conforme mencionado pelo @Chris, muitas bibliotecas como o sublinhado, o Jquery já estão escritos em javascript. Em vez de reescrever essas bibliotecas para projetos datilografados, era necessária uma solução alternativa.

Para fazer isso, você pode fornecer um arquivo de declaração de tipo na biblioteca javascript denominada * .d.ts, como no caso acima mylib.d.ts. O arquivo de declaração fornece apenas declarações de tipo de funções e variáveis ​​definidas no respectivo arquivo javascript.

Agora, quando você tenta -

import * from "mylib";

O mylib.d.ts é importado, o que funciona como uma interface entre o código da biblioteca javascript e o projeto datilografado.

Esta resposta supõe que você tenha algum JavaScript que não deseja converter para TypeScript, mas deseja se beneficiar da verificação de tipo com alterações mínimas no seu .js. Um .d.tsarquivo é muito parecido com um arquivo de cabeçalho C ou C ++. Seu objetivo é definir uma interface. Aqui está um exemplo:

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

A relação aqui é: mashString.d.tsdefine uma interface, mashString.jsimplementa a interface e main.jsusa a interface.

Para que a verificação de tipo funcione, adicione // @ts-check seus .jsarquivos. Mas isso só verifica se main.jsa interface está correta. Para garantir também que a mashString.jsimplemente corretamente, adicionamos /** @type {import("./mashString")} */antes da exportação.

Você pode criar seus .d.tsarquivos iniciais usando-os tsc -allowJs main.js -de editá-los conforme necessário manualmente para melhorar a verificação e a documentação do tipo.

Na maioria dos casos, a implementação e a interface têm o mesmo nome aqui mashString. Mas você pode ter implementações alternativas. Por exemplo, poderíamos mudar o nome mashString.jspara reverse.jse ter uma alternativa encryptString.js.