Про "* .d.ts" у TypeScript

Мені цікаво, *.d.tsтому що я новачок у TypeScript. І мені хтось сказав, що цей файл - це щось на зразок "головного файлу" в C ++, але лише для JS. Але я не можу перетворити чистий файл JS в *.d.tsфайл , якщо я не forcely змінити *.jsдо *.ts. Отже, у мене є три файли: файл JS, файл TS і *.d.tsфайл.

1. Які стосунки між ними?

2. Як я можу використовувати *.d.tsфайл? Це означає, що я можу *.tsназавжди видалити файл?

3. Якщо так, то як *.d.tsфайл може знати, який файл JS відображає до себе?

Було б дуже приємно, якщо хтось може дати мені приклад.

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

Замість того, щоб переписувати jquery або підкреслення або що-небудь в машинопис, ви можете замість цього написати файл d.ts, який містить лише анотації типу. Потім з вашого коду машинопису ви отримуєте переваги машинопису для перевірки статичного типу, використовуючи чисту бібліотеку JS.

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 Registry . Для пошуку та встановлення файлів декларацій із сховищ надається утиліта командного рядка під назвою " типізація" .

Я не міг коментувати і, таким чином, додаю це як відповідь.
Ми відчували певні болі, намагаючись відобразити наявні типи в бібліотеці 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{}

Приклад роботи для конкретного випадку :

Скажімо, у вас є мій модуль, яким ви ділитесь через 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;
}

Як сказав @takeshin, .d означає файл декларації для typecript (.ts).

Перед тим як відповісти на цю посаду, слід уточнити декілька моментів -

1. Typescript - синтаксичний набір javascript.
2. Typescript не працює самостійно, його потрібно перетворити на javascript ( конвертація машинопису в JavaScript )
3. "Визначення типу" та "Перевірка типу" - це основні додаткові функції, які надає typecript через javascript. ( перевірити різницю між типом сценарію та javascript )

Якщо ви замислюєтеся про те, що машинопис - це просто синтаксичний суперсет, які переваги він пропонує - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Щоб відповісти на це повідомлення -

Як ми обговорювали, typecript - це супернабір 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 та проектом typecript.

Ця відповідь передбачає, що у вас є деякий 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.