Typescript tidak menyelesaikan file definisi untuk paket npm

Saya baru saja menerbitkan paket npm yang ditulis dalam TypeScript. Saat ini saya mengalami banyak kesulitan agar definisi dikenali oleh TypeScript (Webpack dan VSCode). Satu-satunya solusi yang berhasil sejauh ini adalah membuat folder dengan definisi di node_modules/@types

Singkatnya, ini adalah pengaturan paket saya:

tsconfig.json

{
    "compilerOptions": {
        ...
        "outDir": "./lib/",
        "declaration": true,
        "declarationDir": "./src/",
    }
}

package.json

{
    ...
    "types": "./index.d.ts",
}

index.d.ts

/// <reference path="src/nano-data-binding.d.ts" />

src/nano-data-binding.d.ts

Saya menyimpannya di /src karena itu dibuat secara otomatis dan saya tidak dapat mengontrol jalur impor. Juga, jika saya mencoba menggunakan hanya declare var ... tanpa pernyataan import export untuk mendapatkan skrip alih-alih modul.

import { StringOrHTMLElement } from './interfaces/nano-data-binding';
export declare function nanoBind(parent: HTMLElement, ...selectors: StringOrHTMLElement[]): HTMLElement[];
export declare function nanoBindAll(parent: HTMLElement, ...selectors: string[]): HTMLElement[];

Silakan pasang paketnya, mungkin hanya ada kesalahan kecil di suatu tempat. Pada dasarnya saya ingin mendapatkan nanoBind() dan nanoBindAll() yang dideklarasikan sebagai global.

Sunting

Hal-hal tambahan yang saya coba. Tidak ada yang berhasil.

package.json - Paket Npm

{
    ...
    "types": "lib/nano-data-binding.d.ts",
    "typings": "lib/nano-data-binding.d.ts",
    "typescript": {
        "definition": "lib/nano-data-binding.d.ts"
    },
}

tsconfig.json - Proyek lokal

{
    ...
    "files": [
        "node_modules/nano-data-binding/lib/nano-data-binding.d.ts"
    ]
}

Jawaban #1

Di package.json Anda perlu mengganti nama field types menjadi typings Dan ya, direktif triple slash tidak diperlukan di sini

Jawaban #2

Akhirnya menemukan sesuatu yang berhasil. Tampaknya cukup menggunakan index.d.ts di tingkat root atau menentukan rute khusus di package.json dari paket tersebut.

Masalahnya ada pada definisi saya. Itu perlu mendeklarasikan sebuah modul.

index.d.ts

type StringOrHTMLElement = string | HTMLElement
declare var nanoBind: (parent: HTMLElement, ...selectors: StringOrHTMLElement[]) => HTMLElement[];
declare var nanoBindAll: (parent: HTMLElement, ...selectors: string[]) => HTMLElement[];

declare module 'nano-data-binding' {
    export var nanoBind: (parent: HTMLElement, ...selectors: any[]) => HTMLElement[];
    export var nanoBindAll: (parent: HTMLElement, ...selectors: string[]) => HTMLElement[];
}

Dan kemudian cara itu diimpor

main.ts

import * as ndb from 'nano-data-binding' // Imports script and definition
require('nano-data-binding') // Ignores definition