eslint-plugin-vue
eslint-plugin-vue copied to clipboard
vuejs
Force TypeScript definition of not primitive props
Please describe what the rule should do: Rule should throw error/warning when component has declared prop without TypeScript definition
What category should the rule belong to? [ ] Enforces code style (layout) [ ] Warns about a potential error (problem) [ ] Suggests an alternate way of doing something (suggestion) [x] Other: Increase type coverage
Provide 2-3 code examples that this rule should warn about:
<script lang="ts">
export default {
props: {
total: {
type: Object, // Error
required: true,
},
},
};
</script>
<script lang="ts">
export default {
props: {
total: {
type: Object as PropType<Price>, // OK
required: true,
},
},
};
</script>
Additional context
Since defineComponent from vue-next or @vue/composition-api TypeScript compiler understands how properties of this are typed. However there's no way to force writing type definition of props (other than noImpliciteThis in the tsconfig). Rule like this can improve TypeScript migrations.
Please let me know what you think about it. If you like this idea I can implement this rule.
Thank you for the rule proposal. The rule are interesting, but I'm not familiar with typescript AST. If you open the PR, we can add rule, but it can be difficult to maintain typescript-specific rules with this plugin.
@tatarysh I have an implementation here:
- https://raw.githubusercontent.com/przemyslawjanpietrzak/eslint-plugin-vue-extras/master/lib/rules/type-object-props.js
- https://raw.githubusercontent.com/przemyslawjanpietrzak/eslint-plugin-vue-extras/master/tests/lib/rules/type-object-props.js
If you need this, the simplest way will be just add to as private eslint plugin
@przemyslawjanpietrzak Thanks for sharing! Feel free to submit a pull request to add this to the official eslint-plugin-vue!
