VSCode not recognizing the types after packaging by vue-tsc

[ilxqx]

Library version 5.1.2

Vue.js version 3.4.31

Question Hi, Thanks very much for your work. Here is my Button component props definition code snapshot:

My build types command: vue-tsc -p ./tsconfig.build.json. tsconfig.build.json:

{
  "extends": "@vue/tsconfig/tsconfig.lib.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "outDir": "types",
    "skipLibCheck": true
  },
  "include": ["src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*", "src/main.ts", "src/app.vue"]
}

My tsconfig.app.json:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "importHelpers": true
  },
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"]
}

The Button component props type definition file after building:

import type { ExtractPropTypes, ExtractPublicPropTypes } from "vue";
import type { ColorType } from "../../vef";
export declare const vefButtonProps: {
    readonly focusable: import("vue-types").VueTypeValidableDef<boolean, import("vue-types/dist/types").ValidatorFunction<boolean>> & {
        default: boolean;
    };
    readonly type: import("vue-types").VueTypeDef<"default" | ColorType | "tertiary"> & {
        default: "default" | ColorType | "tertiary";
    };
    readonly size: import("vue").PropType<import("naive-ui/es/button/src/interface").Size>;
    readonly bordered: {
        readonly type: BooleanConstructor;
        readonly default: true;
    };
    readonly tag: {
        readonly type: import("vue").PropType<keyof HTMLElementTagNameMap>;
        readonly default: "button";
    };
    readonly text: BooleanConstructor;
    readonly block: BooleanConstructor;
    readonly loading: BooleanConstructor;
    readonly disabled: BooleanConstructor;
    readonly circle: BooleanConstructor;
    readonly ghost: BooleanConstructor;
    readonly round: BooleanConstructor;
    readonly secondary: BooleanConstructor;
    readonly tertiary: BooleanConstructor;
    readonly quaternary: BooleanConstructor;
    readonly strong: BooleanConstructor;
    readonly keyboard: {
        readonly type: BooleanConstructor;
        readonly default: true;
    };
    readonly dashed: BooleanConstructor;
    readonly renderIcon: import("vue").PropType<() => import("vue").VNodeChild>;
    readonly iconPlacement: {
        readonly type: import("vue").PropType<"left" | "right">;
        readonly default: "left";
    };
    readonly attrType: {
        readonly type: import("vue").PropType<"reset" | "submit" | "button">;
        readonly default: "button";
    };
    readonly nativeFocusBehavior: {
        readonly type: BooleanConstructor;
        readonly default: boolean;
    };
};
export type VefButtonProps = ExtractPropTypes<typeof vefButtonProps>;
export type PublicVefButtonProps = ExtractPublicPropTypes<typeof vefButtonProps>;

Here is the snapshot:

Restarting VSCode does not solve this problem. This makes me very confused, can you help me? Thanks in advance 🙏🙏🙏.

[ilxqx]

Here is a Demo code zip package that can quickly reproduce the problem. After downloading, open with VSCode and run pnpm i && pnpm build reproduce it.

vue3-demo.zip

[dwightjack]

Hello it's probably a path resolution issue. I open a PR to try to solve it (#475).

Could you try to install the following snapshot version and let me know if it works?

pnpm add vue-types@0.0.0-20240701051251

[ilxqx]

Hello it's probably a path resolution issue. I open a PR to try to solve it (#475).

Could you try to install the following snapshot version and let me know if it works?

pnpm add vue-types@0.0.0-20240701051251

@dwightjack Good, after installing this snapshot version, everything is fine after building. 👍👍👍 Thanks very much.

[ilxqx]

I have another question that I need your help with: How can I specify custom error messages for custom validation types created by toType/toValidableType/formType? Do I have to use the custom function to specify custom error messages?

I checked the documentation for vue-types but couldn't find any relevant information.

I hava a customized validation type func:

/**
 * Returns a prop type definition for a color value.
 *
 * @returns The prop type definition.
 */
export function color() {
  return toType(
    "color",
    {
      type: String,
      validator: value => colord(value).isValid(),
    },
  );
}

When an error is triggered, the browser console will issue the following warning:

However, when there are more and more custom validation types in my project, I can't clearly remember what specific errors should be indicated to me as shown in the screenshot above. So I need to customize the error message to indicate the specific reason for violating the prop constraint. In the screenshot above, it's a color format issue rather than something else.

[ilxqx]

It seems that I have a way of doing this, the way below. Is this approach the best practice?

/**
 * Returns a prop type definition for a color value.
 *
 * @returns The prop type definition.
 */
export function color<T extends string = string>() {
  return toValidableType<T>(
    "color",
    {
      type: String as unknown as PropType<T>,
      validator(value) {
        const isValid = colord(value).isValid();
        if (!isValid) {
          console.warn(`color - "${value}" is not a color`);
        }

        return isValid;
      },
    },
  );
}

[dwightjack]

@ilxqx It is not so easy to customize the warning of the custom validator because it's managed by Vue internals. I think your solution is the simplest and most effective one.

A probably more elegant but complex approach would be to set a custom warning handler. The downsides are:

• You need to deal with formatting the trace yourself (you can see Vue's implementation here)
• The warnHandler will intercept every warning generated from the application, so you need to filter the warnings you want to customize.

[ilxqx]

👍👍👍Nice, thanks very much

[ilxqx]

@dwightjack Hi, can a new release be made for this issue? Thanks.

[dwightjack]

@ilxqx sorry for the delay. Released as vue-types@5.1.3. 👍