Props not recognized by Typescript when using render functions
See original GitHub issueDefining props works great unless you’re using render functions. In that case, Typescript will detect an error TS2322. Not sure what does Typescript expect from the component type to work…
Below is an example of the error. I could provide a minimal repository if someone needs to play with it.
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export class Heading1 extends Vue {
@Prop({ type: String, default: "" })
public readonly title!: string;
public render(): JSX.Element {
return <h1>{this.title}</h1>;
}
}
@Component
export class Page extends Vue {
public render(): JSX.Element {
return <Heading1 title="Test" />;
}
}
index.tsx:16:17 - error TS2322: Type '{ title: string; }' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
Property 'title' does not exist on type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.
16 return <Heading title="Test" />;
~~~~~~~
Found 1 error.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
React/typescript doesn't recognize component when passed ...
I have a generic functional component where the props of this components consists of additional components that should be rendered.
Read more >React Render Props in TypeScript. Update - Medium
This article will use the function-as-a-child render prop pattern to match its usage within React itself for the new context API.
Read more >Render a React Component with State and Props using ...
Though both Functional and Class Components can contain props and a state, this guide will cover how to create and render a Class...
Read more >How to Use TypeScript with React Components
B) Then use the interface to annotate the props parameter inside the functional component function. For example, let's annotate a component ...
Read more >Documentation - JSX - TypeScript
Additionally the output will have a .jsx file extension. The react mode will emit React.createElement , does not need to go through a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Turns out you need to explicitly register used components. You can’t use imported components directly:
won’t work:
will work
No attributes suggestions will be provided by VS Code anyway, though.
Registering manually each component feels like a sad step-back to old Vue-ways, but for now, seems to be the only “proper” way.
@skyrpex
Hi.
When defining Vue component with
vue-class-component
, TS compiler cannot detect which properties are defined as props. On the other hand, when defining withVue.extend
, it can.There’s no solution that
vue-property-decorator
can provide. Could ask this issue atvue
orvue-class-component
repository instead? Thanks.