Acerca de "* .d.ts" en TypeScript

Me da curiosidad *.d.tsporque soy un novato en TypeScript. Y alguien me dijo que este tipo de archivo es algo así como "archivo principal" en C ++ pero solo para JS. Pero no puedo convertir un archivo JS puro para *.d.tsarchivo a menos que cambiar el forcely *.jsa *.ts. Entonces tengo tres archivos: un archivo JS, un archivo TS y un *.d.tsarchivo.

1. ¿Cuál es la relación entre ellos?

2. ¿Cómo puedo usar el *.d.tsarchivo? ¿Significa que puedo eliminar el *.tsarchivo de forma permanente?

3. Si es así, ¿cómo puede *.d.tssaber el archivo qué archivo JS se está asignando a sí mismo?

Sería muy bueno si alguien me puede dar un ejemplo.

El archivo "d.ts" se utiliza para proporcionar información de tipo de mecanografiado sobre una API escrita en JavaScript. La idea es que esté usando algo como jQuery o subrayado, una biblioteca javascript existente. Desea consumirlos de su código mecanografiado.

En lugar de reescribir jquery o subrayado o lo que sea en mecanografiado, puede escribir el archivo d.ts, que contiene solo las anotaciones de tipo. Luego, a partir de su código mecanografiado, obtiene los beneficios mecanografiados de la verificación estática de tipos mientras sigue utilizando una biblioteca JS pura.

dsignifica archivos de declaración :

Cuando se compila un script TypeScript, hay una opción para generar un archivo de declaración (con la extensión .d.ts) que funciona como una interfaz para los componentes en el JavaScript compilado. En el proceso, el compilador elimina todos los cuerpos de funciones y métodos y conserva solo las firmas de los tipos que se exportan. El archivo de declaración resultante se puede usar para describir los tipos de TypeScript virtuales exportados de una biblioteca o módulo de JavaScript cuando un desarrollador externo lo consume de TypeScript.

El concepto de archivos de declaración es análogo al concepto de archivo de encabezado que se encuentra en 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;
}

Los archivos de declaración de tipo se pueden escribir a mano para las bibliotecas JavaScript existentes, como se ha hecho para jQuery y Node.js.

Grandes colecciones de archivos de declaración para bibliotecas populares de JavaScript están alojadas en GitHub en DefinitelyTyped y Typings Registry . Se proporciona una utilidad de línea de comandos llamada tipings para ayudar a buscar e instalar archivos de declaración desde los repositorios.

No pude comentar y, por lo tanto, estoy agregando esto como respuesta.
Tuvimos algunos problemas al tratar de asignar tipos existentes a una biblioteca de JavaScript.

Para asignar un .d.tsarchivo a su archivo javascript, debe darle al .d.tsarchivo el mismo nombre que el archivo javascript, mantenerlos en la misma carpeta y señalar el código que lo necesita al .d.tsarchivo.

por ejemplo: test.jsy test.d.tsestán en la testdir/carpeta, luego la importas así en un componente de reacción:

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

El .d.tsarchivo se exportó como un espacio de nombres como este:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Ejemplo resuelto para un caso específico :

Digamos que tiene mi módulo que está compartiendo a través de npm .

Lo instalas con npm install my-module

Lo usas así:

import * as lol from 'my-module';

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

La lógica del módulo está todo en index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Para agregar tipings, cree un archivo index.d.ts:

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

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

Como @takeshin dijo .d significa archivo de declaración para mecanografiado (.ts).

Pocos puntos por aclarar antes de responder esta publicación:

1. Typecript es un superconjunto sintáctico de javascript.
2. El mecanografiado no se ejecuta solo, necesita ser transpuesto a javascript ( conversión de mecanografiado a javascript )
3. "Definición de tipo" y "Verificación de tipo" son las principales funcionalidades adicionales que el mecanografiado proporciona a través de JavaScript. ( verifique la diferencia entre el script de tipo y javascript )

Si está pensando si el mecanografiado es solo un superconjunto sintáctico, ¿qué beneficios ofrece? Https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Para responder esta publicación:

Como discutimos, el mecanografiado es un superconjunto de javascript y necesita ser transpuesto a javascript. Entonces, si una biblioteca o código de terceros está escrito en mecanografiado, eventualmente se convierte a javascript, que puede ser usado por un proyecto javascript pero viceversa no es cierto.

Por ex -

Si instala la biblioteca javascript -

npm install --save mylib

e intente importarlo en código mecanografiado -

import * from "mylib";

Obtendrás un error.

"No se puede encontrar el módulo 'mylib'".

Como mencionó @Chris, muchas bibliotecas como el subrayado, Jquery ya están escritas en JavaScript. En lugar de volver a escribir esas bibliotecas para proyectos mecanografiados, se necesitaba una solución alternativa.

Para hacer esto, puede proporcionar un archivo de declaración de tipo en la biblioteca javascript llamada * .d.ts, como en el caso anterior mylib.d.ts. El archivo de declaración solo proporciona declaraciones de tipo de funciones y variables definidas en el archivo javascript respectivo.

Ahora cuando lo intentas ...

import * from "mylib";

mylib.d.ts se importa, lo que actúa como una interfaz entre el código de la biblioteca de JavaScript y el proyecto de mecanografía.

Esta respuesta supone que tiene algo de JavaScript que no desea convertir a TypeScript, pero desea beneficiarse de la verificación de tipos con cambios mínimos en su .js. UNA.d.ts archivo es muy parecido a un archivo de encabezado C o C ++. Su propósito es definir una interfaz. Aquí hay un ejemplo:

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"));

La relación aquí es: mashString.d.tsdefine una interfaz, mashString.jsimplementa la interfaz y main.jsusa la interfaz.

Para que el tipo de verificación funcione, agregue // @ts-check a sus .jsarchivos. Pero esto solo comprueba que main.jsusa la interfaz correctamente. Para garantizar también que lo mashString.jsimplemente correctamente, agregamos /** @type {import("./mashString")} */antes de la exportación.

Puede crear sus .d.tsarchivos iniciales usandotsc -allowJs main.js -d luego editarlos según sea necesario manualmente para mejorar la verificación de tipo y la documentación.

En la mayoría de los casos, la implementación y la interfaz tienen el mismo nombre, aquí mashString. Pero puedes tener implementaciones alternativas. Por ejemplo, podemos cambiar el nombre mashString.jsde reverse.jsy tienen una alternativa encryptString.js.