Giter VIP home page Giter VIP logo

Comments (2)

timostamm avatar timostamm commented on June 6, 2024

It's been some time since I used vue. To be honest, TypeScript appears to be an afterthought...

Use the syntax described here: https://vuejs.org/v2/guide/typescript.html#Annotating-Props

Instead of "ComplexMessage", use your "ReportOption". ReportOption is a simple interface just like ComplexMessage.

import { ReportOption } from '@company/api-client';
// ...
props: {
  value: {
    required: true,
    type: Object as PropType<ReportOption>,
  }
}

I am not sure why they recommend to cast as PropType. I don't see any benefit.

I´d take a look at Class-Style components. Seem to be a better match for TypeScript:
https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components

from protobuf-ts.

someone1 avatar someone1 commented on June 6, 2024

Thanks for the tip - still doesn't seem to be working though. I opened an issue on the @vue/composition-api project for this. I thought my understanding of the types generated from this package may have been lacking, I haven't run into this issue with other types I've built components around, but even trying the ComplexMessage example you linked to seems to be failing.

I've built multiple apps using the Class Style in Vue, but I'm trying to build my next app with the new Composition API. There are limits/quirks of the Class Style that I hope to be resolved with Vue 3 being written in TypeScript - no longer making it an afterthought.

The compiler error:

No overload matches this call.
  Overload 1 of 3, '(options: ComponentOptionsWithoutProps<unknown, unknown, Data, {}, {}>): VueProxy<unknown, unknown, Data, {}, {}>', gave the following error.
    Type '{ value: { required: true; type: PropType<ReportOption>; }; }' is not assignable to type 'undefined'.
  Overload 2 of 3, '(options: ComponentOptionsWithArrayProps<string, Data, Data, {}, {}, Readonly<{ [x: string]: any; }>>): VueProxy<Readonly<{ [x: string]: any; }>, Data, Data, {}, {}>', gave the following error.
    Type '{ value: { required: true; type: PropType<ReportOption>; }; }' is not assignable to type 'string[]'.
      Object literal may only specify known properties, but 'value' does not exist in type 'string[]'. Did you mean to write 'values'?
  Overload 3 of 3, '(options: ComponentOptionsWithProps<ComponentPropsOptions<Data>, Data, Data, {}, {}, ({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; ... 29 more ...; flat?: unknown[] | undefined; }) | ({} & { ...; })>): VueProxy<...>', gave the following error.
    Type '{ value: { required: true; type: PropType<ReportOption>; }; }' is not assignable to type 'string[] | ComponentObjectPropsOptions<Data> | undefined'.
      Types of property 'value' are incompatible.
        Type '{ required: true; type: PropType<ReportOption>; }' is not assignable to type '(new (...args: string[]) => Function) | PropOptions<unknown, unknown> | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
          Types of property 'type' are incompatible.
            Type 'PropType<ReportOption>' is not assignable to type 'true | (new (...args: string[]) => Function) | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
              Type 'new (...args: never[]) => ReportOption & object' is not assignable to type 'true | (new (...args: string[]) => Function) | (new (...args: any[]) => object) | (() => unknown) | PropConstructor<unknown>[] | null | undefined'.
                Type 'new (...args: never[]) => ReportOption & object' is not assignable to type 'new (...args: string[]) => Function'.
                  Types of parameters 'args' and 'args' are incompatible.
                    Type 'string' is not assignable to type 'never'.

from protobuf-ts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.