Как включить пользовательские ссылочные типы с помощью tsconfig. json - PullRequest
0 голосов
/ 07 мая 2020

Я использую ttypescript с @zerollup/ts-transform-paths, чтобы переписать импорт при публикации библиотеки машинописного текста.

Один пакет npm, который я использую, не имеет типизации, поэтому я написал свой собственный и включил их Вместе с кодом моей библиотеки это вызвало некоторые проблемы при упаковке (поскольку @zerollup/ts-transform-paths рассматривает .dt.ts как фактический модуль). Чтобы решить эту проблему, я переместил свои пользовательские типы в @types и добавил ссылку, поэтому мой проект выглядит так:

tsconfig. json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react",
        "baseUrl": "src",
        "experimentalDecorators": true,
        "plugins": [{ "transform": "@zerollup/ts-transform-paths" }],
        "paths": { "*": ["*"] },
        "declaration": true,
        "outDir": "dist"
    },
    "include": ["src"]
}

@ types / iframe-resizer -react

declare module "iframe-resizer-react" {
    import * as React from "react";
    import { ReactElement } from "react";
    import { IFrameOptions } from "iframe-resizer";

    type IframeResizerProps = React.DetailedHTMLProps<
        React.IframeHTMLAttributes<HTMLIFrameElement>,
        HTMLIFrameElement
    > &
        IFrameOptions & {
            warningTimeout?: number;
            onClosed?: any;
            onInit?: any;
            onMessage?: any;
            onResized?: any;
            forwardRef?: any;
        };

    export default function(props: IframeResizerProps): ReactElement;
}

src / App.tsx

...
import IframeResizer from "iframe-resizer-react";
...

src / definitions.d.ts

/// <reference path="../@types/iframe-resizer-react.d.ts" />

Это работает! На данный момент разблокирован, но я бы предпочел не иметь тройную ссылочную строку sla sh в src/definitions.d.ts, поскольку я думал, что параметр компилятора typeRoots будет автоматически ссылаться на файлы.

То, что я пробовал

  • Удаление ///
  • Добавление этого в tsconfig. json
{
    "compilerOptions": {
        ...
+       "typeRoots": ["./@types", "./node_modules/@types"],
        ...
    }
}

действует так, как будто у меня нет d.ts

> ttsc --build

src/App.tsx:4:27 - error TS7016: Could not find a declaration file for module 'iframe-resizer-react'. '**snip**/TRAN-DCF/node_modules/iframe-resizer-react/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/iframe-resizer-react` if it exists or add a new declaration (.d.ts) file containing `declare module 'iframe-resizer-react';`

4 import IframeResizer from "iframe-resizer-react";
                            ~~~~~~~~~~~~~~~~~~~~~~

Есть ли способ включить все мои @types определения, просто используя tsconfig.json?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...