Question

我正在研究将在各种项目中使用的Vue组件库，我希望消费者能够在基于Typescript的Vue项目中使用该库。我希望能够将类型与软件包捆绑在一起，而不是使用@types。为此，我按照此处第二个答案中概述的过程进行操作：Auto generate index.d.ts, type definitions, from a typescript module。

基本上，我将declaration: true属性添加到了tsconfig.json下的compilerOptions文件中。然后在我的主index.ts文件中导出组件。我还导出了组件的类型，以使这些类型与软件包捆绑在一起，并且在尝试在基于Typescript的项目中使用组件时，库的用户不会收到“缺少类型”错误。

index.ts的内容：

import ActionButton from './UActionButton';
import Button from './UButton';
import Divider from './UDivider';
import EmailField from './UEmailField';
import Form from './UForm';
import Icon from './UIcon';
import Link from './ULink';
import Message from './UMessage';
import { UMenu as Menu, UMenuItem as MenuItem } from './UMenu';
import PasswordField from './UPasswordField';
import TextField from './UTextField';

export type UActionButton = typeof ActionButton;
export const UActionButton = ActionButton;
export type UButton = typeof Button;
export const UButton = Button;
export type UDivider = typeof Divider;
export const UDivider = Divider;
export type UEmailField = typeof EmailField;
export const UEmailField = EmailField;
export type UForm = typeof Form;
export const UForm = Form;
export type UIcon = typeof Icon;
export const UIcon = Icon;
export type ULink = typeof Link;
export const ULink = Link;
export type UMessage = typeof Message;
export const UMessage = Message;
export type UMenu = typeof Menu;
export const UMenu = Menu;
export type UMenuItem = typeof MenuItem;
export const UMenuItem = MenuItem;
export type UPasswordField = typeof PasswordField;
export const UPasswordField = PasswordField;
export type UTextField = typeof TextField;
export const UTextField = TextField;

构建并编译库之后，我得到了一个index.js和index.d.ts文件。

index.js：

import ActionButton from './UActionButton';
import Button from './UButton';
import Divider from './UDivider';
import EmailField from './UEmailField';
import Form from './UForm';
import Icon from './UIcon';
import Link from './ULink';
import Message from './UMessage';
import { UMenu as Menu, UMenuItem as MenuItem } from './UMenu';
import PasswordField from './UPasswordField';
import TextField from './UTextField';
export const UActionButton = ActionButton;
export const UButton = Button;
export const UDivider = Divider;
export const UEmailField = EmailField;
export const UForm = Form;
export const UIcon = Icon;
export const ULink = Link;
export const UMessage = Message;
export const UMenu = Menu;
export const UMenuItem = MenuItem;
export const UPasswordField = PasswordField;
export const UTextField = TextField;

index.d.ts：

import ActionButton from './UActionButton';
import Button from './UButton';
import Divider from './UDivider';
import EmailField from './UEmailField';
import Form from './UForm';
import Icon from './UIcon';
import Link from './ULink';
import Message from './UMessage';
import { UMenu as Menu, UMenuItem as MenuItem } from './UMenu';
import PasswordField from './UPasswordField';
import TextField from './UTextField';
export declare type UActionButton = typeof ActionButton;
export declare const UActionButton: import("vue").VueConstructor<ActionButton>;
export declare type UButton = typeof Button;
export declare const UButton: import("vue").VueConstructor<ActionButton>;
export declare type UDivider = typeof Divider;
export declare const UDivider: import("vue").VueConstructor<ActionButton>;
export declare type UEmailField = typeof EmailField;
export declare const UEmailField: import("vue").VueConstructor<ActionButton>;
export declare type UForm = typeof Form;
export declare const UForm: import("vue").VueConstructor<ActionButton>;
export declare type UIcon = typeof Icon;
export declare const UIcon: import("vue").VueConstructor<ActionButton>;
export declare type ULink = typeof Link;
export declare const ULink: import("vue").VueConstructor<ActionButton>;
export declare type UMessage = typeof Message;
export declare const UMessage: import("vue").VueConstructor<ActionButton>;
export declare type UMenu = typeof Menu;
export declare const UMenu: import("vue").VueConstructor<ActionButton>;
export declare type UMenuItem = typeof MenuItem;
export declare const UMenuItem: import("vue").VueConstructor<ActionButton>;
export declare type UPasswordField = typeof PasswordField;
export declare const UPasswordField: import("vue").VueConstructor<ActionButton>;
export declare type UTextField = typeof TextField;
export declare const UTextField: import("vue").VueConstructor<ActionButton>;

每个export declare const语句的类型都设置为import("vue").VueConstructor<ActionButton>，我不知道是什么导致了这种行为。这似乎与第一个import语句无关。即如果我将import TextField from './UTextField'移到文件顶部，则export declare const中所有产生的index.d.ts语句都是import("vue").VueConstructor<TextField>。

生成类型后，.d.ts文件中声明的const的类型不正确

0 个答案: