О «* .d.ts» в TypeScript


343

Мне любопытно, *.d.tsпотому что я новичок в TypeScript. И мне кто-то сказал, что этот тип файла - это что-то вроде «head file» в C ++, но только для JS. Но я не могу преобразовать чистый файл JS в *.d.tsфайл , если я не forcely изменить *.jsк *.ts. Итак, у меня есть три файла: файл JS, файл TS и *.d.tsфайл.


  1. Какая связь между ними?

  2. Как я могу использовать *.d.tsфайл? Означает ли это, что я могу удалить *.tsфайл навсегда?

  3. Если так, как *.d.tsфайл может знать, какой JS-файл сопоставлен сам с собой?


Было бы очень хорошо, если бы кто-то мог привести мне пример.


Для будущих людей: ознакомьтесь с документом TypeScript: typescriptlang.org/docs/handbook/declaration-files/templates/…
J.Ko

Ответы:


349

Файл "d.ts" используется для предоставления информации о типе машинописного текста об API, написанном на JavaScript. Идея заключается в том, что вы используете что-то вроде jQuery или подчеркивания, существующую библиотеку javascript. Вы хотите использовать их из своего машинописного кода.

Вместо того, чтобы переписывать jquery или подчеркивание или что-либо еще в машинописном тексте, вы можете вместо этого написать файл d.ts, который содержит только аннотации типов. Затем из вашего машинописного кода вы получаете преимущества статической проверки типов при использовании чистой библиотеки JS.


27
Большое спасибо! Но как сопоставить файл * .d.ts с файлом js? Как файл js узнает, какой файл d.ts сопоставлен сам с собой? Можете привести пример?

3
Но файл d.ts генерируется из файла js, и если файл js ничего не знает о d.ts. Как вызвать функции из d.ts в других файлах TS без файла JS? Я озадачен ......

8
См. Stackoverflow.com/questions/18091724/… . Вам нужно добавить справочную строку /// <в начало потребляющего файла ts. Вам понадобится файл d.ts и .js.
Крис Таварес

3
Файл d.ts, как правило, написан от руки из документации по файлу js. Большое их количество доступно для популярных библиотек javascript: github.com/borisyankov/DefiniteTyped
basarat

13
Куда вы помещаете собственные файлы d.ts, если вы делаете собственные файлы для своего проекта?
Джей

77

dрасшифровывается как файлы декларации :

Когда скрипт TypeScript компилируется, появляется возможность генерировать файл объявления (с расширением .d.ts), который функционирует как интерфейс для компонентов в скомпилированном JavaScript. В процессе компилятор удаляет все тела функций и методов и сохраняет только сигнатуры экспортируемых типов. Полученный файл объявления затем можно использовать для описания экспортированных виртуальных типов TypeScript библиотеки или модуля JavaScript, когда сторонний разработчик использует его из TypeScript.

Концепция файлов объявлений аналогична концепции файлов заголовков, найденных в 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;
}

Файлы объявления типов могут быть написаны от руки для существующих библиотек JavaScript, как это было сделано для jQuery и Node.js.

Большие коллекции файлов декларационных популярных библиотек JavaScript, размещенные на GitHub в DefinitelyTyped и реестре типизации . Утилита командной строки, которая называется typings , предназначена для поиска и установки файлов объявлений из репозиториев.


3
Примечание: typingsинструмент командной строки на самом деле не нужен, начиная с TypeScript 2.0. Более современный подход заключается в использовании упаковщиков для печати через репозиторий npm в @typesпространстве имен. Для более подробно см github.com/typings/typings/blob/master/README.md
Burt_Harris

1
@takeshin У меня есть вопрос. Нужно ли создавать файлы .d.ts из файлов .tsx, которые используются только внутри моего проекта? Они добавляют что-то еще, кроме того, что предоставляют сторонним библиотекам дополнительную информацию?
Кшиштоф Тшос

63

Я не мог комментировать и поэтому добавляю это как ответ.
Нам было немного трудно пытаться отобразить существующие типы в библиотеку javascript.

Чтобы сопоставить .d.tsфайл с файлом javascript, необходимо дать .d.tsфайлу то же имя, что и у файла javascript, сохранить их в той же папке и указать код, который нужен для этого .d.tsфайла.

Например: test.jsи test.d.tsнаходятся в testdir/папке, затем вы импортируете это следующим образом в компонент реагирования:

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

.d.tsФайл был экспортирован в качестве пространства имен , как это:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

42
Никто не дал ответа относительно того, как подключить d.ts к js, поэтому я подумал, что это правильное место.
ConstantinM

Обратите внимание, что если вы создаете файл объявления для некоторого JS, который вы не создали (например, пакет из npm), этот .d.tsфайл также должен называться так же, как и пакет для импорта.
электровир

31

Сработал пример для конкретного случая :

Допустим, у вас есть my-module, которым вы делитесь через npm .

Вы устанавливаете это с npm install my-module

Вы используете это таким образом:

import * as lol from 'my-module';

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

Логика модуля заключается в index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Чтобы добавить набор текста, создайте файл index.d.ts:

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

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

19

Как сказал @takeshin, .d обозначает файл объявления для машинописи (.ts).

Несколько моментов, которые необходимо уточнить, прежде чем ответить на этот пост -

  1. Typescript - это синтаксический расширенный набор javascript.
  2. Typescript не запускается сам по себе, его необходимо преобразовать в javascript ( преобразование typeScript в javascript )
  3. «Определение типа» и «Проверка типа» являются основными дополнительными функциональными возможностями, которые машинопись обеспечивает через JavaScript. ( проверьте разницу между типом script и javascript )

Если вы думаете, является ли typcript просто синтаксическим надмножеством, какие преимущества он предлагает - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Ответить на этот пост -

Как мы уже говорили, машинопись является надмножеством javascript и должна быть перенесена в javascript. Таким образом, если код библиотеки или стороннего производителя написан на машинописном шрифте, он в конечном итоге преобразуется в javascript, который может использоваться в проекте javascript, но, наоборот, не выполняется.

Для бывших

Если вы устанавливаете библиотеку JavaScript -

npm install --save mylib

и попробуйте импортировать его в машинописный код -

import * from "mylib";

вы получите ошибку.

"Не удалось найти модуль" mylib "."

Как уже упоминалось @Chris, многие библиотеки, такие как подчеркивание, Jquery уже написаны на javascript. Вместо того, чтобы переписывать эти библиотеки для проектов машинописного текста, было необходимо альтернативное решение.

Для этого вы можете предоставить файл объявления типа в библиотеке javascript с именем * .d.ts, как в предыдущем случае mylib.d.ts. Файл объявлений содержит только объявления типов функций и переменных, определенных в соответствующем файле JavaScript.

Теперь, когда вы пытаетесь -

import * from "mylib";

mylib.d.ts импортируется, который действует как интерфейс между кодом библиотеки javascript и проектом машинописи.


4

Этот ответ предполагает, что у вас есть некоторый JavaScript, который вы не хотите преобразовывать в TypeScript, но вы хотите извлечь выгоду из проверки типов с минимальными изменениями .js. .d.tsФайл очень похож на C или заголовочный файл C ++. Его цель - определить интерфейс. Вот пример:

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

Соотношение здесь: mashString.d.tsопределяет интерфейс, mashString.jsреализует интерфейс и main.jsиспользует интерфейс.

Чтобы проверка типа работала, вы добавляете // @ts-check к своим .jsфайлам. Но это только проверяет, main.jsправильно ли использует интерфейс. Чтобы также убедиться, что mashString.jsон реализуется правильно, мы добавляем /** @type {import("./mashString")} */перед экспортом.

Вы можете создавать свои исходные .d.tsфайлы, используя, а tsc -allowJs main.js -dзатем редактировать их по мере необходимости вручную, чтобы улучшить проверку типов и документацию.

В большинстве случаев реализация и интерфейс имеют одно и то же имя mashString. Но вы можете иметь альтернативные реализации. Например , мы могли бы переименовать mashString.jsв reverse.jsи иметь альтернативу encryptString.js.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.