CODEWITHSUNDEEP
typescriptvuetify.js
mistiru
mistiru

Reputation: 3386

Including Vuetify code in TypeScript project prints lots of errors

I'm building an app with the VueJS + TypeScript + WebPack + ESLint + VuetifyJS stack using @vue/cli.

Everything ok, until I wrote this include :

import { TableHeader } from 'vuetify/src/components/VDataTable/mixins/header';

I did that because I wanted to have type hints on a method that works on these headers object.

With this import line, the project seems to works, but I'm getting a very long list of errors (several hundreds), from TypeScript I suppose, and related to files that belong to vuetify sources. Here is an example of error:

ERROR in /home/mistiru/dev/chrono-tracker/node_modules/vuetify/src/util/ThemeProvider.ts(15,31):
15:31 Property 'rootIsDark' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { isDark: boolean; }, Readonly<{ root: boolean; }>>'.
    13 |   computed: {
    14 |     isDark (): boolean {
  > 15 |       return this.root ? this.rootIsDark : Themeable.options.computed.isDark.call(this)
       |                               ^
    16 |     },
    17 |   },
    18 |

Did I include the wrong thing?

EDIT: My configuration is already as highlighted in the comment from @Rie. The project works, I have access to my dev site and I can use all the implemented features, it's just that these errors appear in the terminal, and I don't know why (and they might hide errors related to my potential mistakes...)

Upvotes: 0

Views: 2420

Answers (2)

discolor
discolor

Reputation: 1396

In a TypeScript Vuetify project you need to add "vuetify" to the types in your tsconfig.json and adjust the plugins/vuetify.ts.

tsconfig.json:

"types": [
  "webpack-env",
  "vuetify"
]

plugins/vuetify.ts:

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi"
  }
});

If you are using VS Code you might need to restart it to recognize the changes. You can then check isDark by using this.$vuetify.theme.dark.

Upvotes: 3

mistiru
mistiru

Reputation: 3386

It seems that I did not import the right thing.

By doing:

import { DataTableHeader } from 'vuetify';

I don't know why, but the errors do not appear anymore.

I don't understand why it's called DataTableHeader, whereas it's called TableHeader in the online documentation.

Upvotes: 0

Related Questions