Mixing
Vue + TypeScript + CSS module
0
I have got SFC (single file vue component), that use TypeScript, render function and CSS module
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
mode: {
type: String,
default: 'td', // or th
},
},
render(h) {
return h('tr', [
'preview',
'name',
'price',
'count',
'delete',
].map(col => h(this.mode, { class: this.$style[col] },
this.$slots[col])));
},
});
</script>
<style lang="stylus" module>
.preview
display none
.delete
text-align center
@media (min-width 768px)
.preview
display table-row
</style>
And I getting error from TypeScript:
ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ mode: string; }>>
'.
16 | 'count',
17 | 'delete',
> 18 | ].map(col => h(this.mode, { class: this.$style[col] }, this.$slots[col])));
| ^
19 | },
20 | });
In JS this code working but TS don`t knows about CSS modules and this.$style property. How to fix it?
typescript vue.js css-modules
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
add a comment |
0
I have got SFC (single file vue component), that use TypeScript, render function and CSS module
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
mode: {
type: String,
default: 'td', // or th
},
},
render(h) {
return h('tr', [
'preview',
'name',
'price',
'count',
'delete',
].map(col => h(this.mode, { class: this.$style[col] },
this.$slots[col])));
},
});
</script>
<style lang="stylus" module>
.preview
display none
.delete
text-align center
@media (min-width 768px)
.preview
display table-row
</style>
And I getting error from TypeScript:
ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ mode: string; }>>
'.
16 | 'count',
17 | 'delete',
> 18 | ].map(col => h(this.mode, { class: this.$style[col] }, this.$slots[col])));
| ^
19 | },
20 | });
In JS this code working but TS don`t knows about CSS modules and this.$style property. How to fix it?
typescript vue.js css-modules
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
add a comment |
0
0
0
I have got SFC (single file vue component), that use TypeScript, render function and CSS module
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
mode: {
type: String,
default: 'td', // or th
},
},
render(h) {
return h('tr', [
'preview',
'name',
'price',
'count',
'delete',
].map(col => h(this.mode, { class: this.$style[col] },
this.$slots[col])));
},
});
</script>
<style lang="stylus" module>
.preview
display none
.delete
text-align center
@media (min-width 768px)
.preview
display table-row
</style>
And I getting error from TypeScript:
ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ mode: string; }>>
'.
16 | 'count',
17 | 'delete',
> 18 | ].map(col => h(this.mode, { class: this.$style[col] }, this.$slots[col])));
| ^
19 | },
20 | });
In JS this code working but TS don`t knows about CSS modules and this.$style property. How to fix it?
typescript vue.js css-modules
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
I have got SFC (single file vue component), that use TypeScript, render function and CSS module
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
mode: {
type: String,
default: 'td', // or th
},
},
render(h) {
return h('tr', [
'preview',
'name',
'price',
'count',
'delete',
].map(col => h(this.mode, { class: this.$style[col] },
this.$slots[col])));
},
});
</script>
<style lang="stylus" module>
.preview
display none
.delete
text-align center
@media (min-width 768px)
.preview
display table-row
</style>
And I getting error from TypeScript:
ERROR in /home/oks/apps/shop/src/components/CartRow.vue
18:45 Property '$style' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ mode: string; }>>
'.
16 | 'count',
17 | 'delete',
> 18 | ].map(col => h(this.mode, { class: this.$style[col] }, this.$slots[col])));
| ^
19 | },
20 | });
In JS this code working but TS don`t knows about CSS modules and this.$style property. How to fix it?
typescript vue.js css-modules
typescript vue.js css-modules
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
asked Jan 1 at 18:01
Dmitry KaryakinDmitry Karyakin
385
385
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$style: any
}
}
Change any to match the type declaration of $style, for example:
$style: { [key: string]: string }
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997704%2fvue-typescript-css-module%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$style: any
}
}
Change any to match the type declaration of $style, for example:
$style: { [key: string]: string }
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
add a comment |
1
You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$style: any
}
}
Change any to match the type declaration of $style, for example:
$style: { [key: string]: string }
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
add a comment |
1
1
1
You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$style: any
}
}
Change any to match the type declaration of $style, for example:
$style: { [key: string]: string }
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
You need to augment the Vue typings. Create a declaration file (like sfc.d.ts) and add the following:
// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
// 2. Specify a file with the types you want to augment
// Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
// 3. Declare augmentation for Vue
interface Vue {
$style: any
}
}
Change any to match the type declaration of $style, for example:
$style: { [key: string]: string }
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
answered Jan 2 at 0:03
DigitalDrifterDigitalDrifter
8,6942625
8,6942625
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997704%2fvue-typescript-css-module%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
