О "*.d.ts" в TypeScript

Question

О "*.d.ts" в TypeScript

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

Какая связь между ними?
Как я могу использовать *.d.ts файл? Значит ли это, что я могу удалить *.ts файл постоянно?
Если да, то как *.d.ts файл знает, какой файл JS отображается на себя?

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

760

typescript .d.ts

Источник

21 янв '14 в 01:05

10 ответов

Решение

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 в DefinitiveTyped и реестре набранных текстов. Утилита командной строки, которая называется typings, предназначена для поиска и установки файлов объявлений из репозиториев.

154

Источник

user234780 17 июл '17 в 10:53

Я не мог комментировать и поэтому добавил это как ответ. Нам было немного трудно пытаться отобразить существующие типы в библиотеку 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{}

127

Источник

user2544618 29 авг '18 в 14: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;
}

46

Источник

user5017391 13 май '19 в 10:06

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

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

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

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

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

Как мы уже говорили, машинопись является надмножеством машинописи и должна быть перенесена в 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 и проектом машинописи.

42

Источник

user5107261 17 янв '19 в 16:42

В этом ответе предполагается, что у вас есть JavaScript, который вы не хотите преобразовывать в TypeScript, но вы хотите получить выгоду от проверки типов с минимальными изменениями в вашем .js. А.d.tsfile очень похож на файл заголовка 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.

17

Источник

user1185191 21 фев '20 в 16:24

Из официальной документации (https://www.typescriptlang.org/docs/handbook/2/type-declarations.html#dts-files):

.d.tsфайлы являются файлами объявлений, которые содержат только информацию о типе. Эти файлы не создают выходные данные .js; они используются только для проверки типов.

8

Источник

user1876555 13 окт '22 в 12:01

Думаю, я мог бы добавить сюда свои 2 цента

      // somefile.d.ts
export type SomeItem = {
  weight: number
}

export type ItemStorage = {
  name: string
  items: SomeItem[]
}

      // simefile.js
// @ts-check
/** @typedef { import('./somefile.d.ts').SomeItem } SomeItem */
/** @typedef { import('./somefile.d.ts').ItemStorage } ItemStorage */

/**
 * @param { StorageItem } item
 */
function doSomething(item) {
  item. // intellisense
  // your code here
}

Самое интересное в том, что можно постепенно включать типы в существующий проект javascript.

6

Источник

user4111920 22 мар '21 в 17:17

Так как исходный код является окончательным источником истины. Вот, кажется, реализация для этого:

      /*
 * Every module resolution kind can has its specific understanding how to load module from a specific path on disk
 * I.e. for path '/a/b/c':
 * - Node loader will first to try to check if '/a/b/c' points to a file with some supported extension and if this fails
 * it will try to load module from directory: directory '/a/b/c' should exist and it should have either 'package.json' with
 * 'typings' entry or file 'index' with some supported extension
 * - Classic loader will only try to interpret '/a/b/c' as file.
 */
type ResolutionKindSpecificLoader = (extensions: Extensions, candidate: string, onlyRecordFailures: boolean, state: ModuleResolutionState) => Resolved | undefined;

и

      /**
 * Kinds of file that we are currently looking for.
 */
const enum Extensions {
    TypeScript  = 1 << 0, // '.ts', '.tsx', '.mts', '.cts'
    JavaScript  = 1 << 1, // '.js', '.jsx', '.mjs', '.cjs'
    Declaration = 1 << 2, // '.d.ts', etc.
    Json        = 1 << 3, // '.json'

    ImplementationFiles = TypeScript | JavaScript,
}

Полный файл https://github.com/microsoft/TypeScript/blob/main/src/compiler/moduleNameResolver.ts.

1

Источник

user13508355 04 янв '23 в 20:40

Например, у вас возникла проблема с использованием модуля alerttifyjs из npm.

Создайте anyNameYoulike.d.ts (например, вы создали этот файл в папке src)
В файле объявите модуль alerttifyjs; введите описание изображения здесь
в tsconfig.json В разделе "compilerOptions""typeRoots": ["node_modules / @types", "src / anyNameYoulike.d.ts"]

-1

Источник

09 авг '21 в 20:23

Другие вопросы по тегам typescript .d.ts

user422289 21 янв '14 в 01:10 2014-01-21 01:10 · Accepted Answer · 2014-01-21 01:10

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

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