[core] Typescript support planned? #662

akaSybe · 2017-04-04T23:12:50Z

I started a project and I want to use vue-material with Typescript. As far as I can see there is no Typescript support right now.

CatsMiaow · 2017-06-16T05:33:36Z

vue-material/index.d.ts

import Vue from 'vue';

type Component = 'MdCore'
  | 'MdAvatar'
  | 'MdBackdrop'
  | 'MdBottomBar'
  | 'MdButton'
  | 'MdButtonToggle'
  | 'MdCard'
  | 'MdCheckbox'
  | 'MdChips'
  | 'MdDialog'
  | 'MdDivider'
  | 'MdFile'
  | 'MdIcon'
  | 'MdImage'
  | 'MdInputContainer'
  | 'MdLayout'
  | 'MdList'
  | 'MdMenu'
  | 'MdProgress'
  | 'MdRadio'
  | 'MdSelect'
  | 'MdSidenav'
  | 'MdSnackbar'
  | 'MdSpeedDial'
  | 'MdSpinner'
  | 'MdSubheader'
  | 'MdSwitch'
  | 'MdTable'
  | 'MdTabs'
  | 'MdToolbar'
  | 'MdTooltip'
  | 'MdWhiteframe';

type Options =
  { install: Vue.PluginFunction<never>} &
  { [key in Component]: Vue.PluginFunction<never> };

declare const options: Options;
export default options;

type Color = 'red'
| 'pink'
| 'purple'
| 'deep-purple'
| 'indigo'
| 'blue'
| 'light-blue'
| 'cyan'
| 'teal'
| 'green'
| 'light-green'
| 'lime'
| 'yellow'
| 'amber'
| 'orange'
| 'deep-orange'
| 'brown'
| 'grey'
| 'blue-grey'
| 'white'
| 'black';

type ThemeOption = Color | {
  color?: Color;
  hue?: string | number;
  textColor?: Color;
};

interface ThemeType {
  primary?: ThemeOption;
  accent?: ThemeOption;
  warn?: ThemeOption;
  background?: ThemeOption;
}

declare module 'vue/types/vue' {
  namespace Vue {
    const material: {
      registerTheme(name: string | { [key: string]: ThemeType }, spec?: ThemeType): void,
      setCurrentTheme(name: string): void
    };
  }
}

Morgul · 2017-06-21T15:50:44Z

@akaSybe Right now, there isn't any typescript support on the roadmap, but we will discuss internally. I personally feel that the core developers' time is best spent on fixing our backlog of issues and implementing missing components, however we would gladly accept a pull request to add types.

waratah · 2017-10-13T11:14:51Z

I am using Typescript. There is a couple of other places to grab some definitions. Will helpi with this, self interest.

akaSybe · 2017-10-13T11:53:49Z

@waratah could you please share links to definitions you talk about?

Samuell1 · 2017-11-23T20:49:16Z

Hey, can you try new Vue Material 1.0.0 with TypeScript?

matths · 2018-02-02T17:44:33Z

in the meantime we can use npm install --save-dev git+https://github.com/calebsander/vue-material-types.git and use the definition from above more or less made available by @calebsander

Samuell1 · 2018-03-09T09:06:14Z

@matths that is outdated and only works for older version

crutchcorn · 2018-08-23T02:41:49Z

When V1 releases, I will likely try my hand at adding TS support. I would start working on it now but I'm fearful types will dramatically change before then

Saidabbos · 2018-10-19T14:19:52Z

vue-material/index.d.ts

import Vue from 'vue';

type Component = 'MdCore'
  | 'MdAvatar'
  | 'MdBackdrop'
  | 'MdBottomBar'
  | 'MdButton'
  | 'MdButtonToggle'
  | 'MdCard'
  | 'MdCheckbox'
  | 'MdChips'
  | 'MdDialog'
  | 'MdDivider'
  | 'MdFile'
  | 'MdIcon'
  | 'MdImage'
  | 'MdInputContainer'
  | 'MdLayout'
  | 'MdList'
  | 'MdMenu'
  | 'MdProgress'
  | 'MdRadio'
  | 'MdSelect'
  | 'MdSidenav'
  | 'MdSnackbar'
  | 'MdSpeedDial'
  | 'MdSpinner'
  | 'MdSubheader'
  | 'MdSwitch'
  | 'MdTable'
  | 'MdTabs'
  | 'MdToolbar'
  | 'MdTooltip'
  | 'MdWhiteframe';

type Options =
  { install: Vue.PluginFunction<never>} &
  { [key in Component]: Vue.PluginFunction<never> };

declare const options: Options;
export default options;

type Color = 'red'
| 'pink'
| 'purple'
| 'deep-purple'
| 'indigo'
| 'blue'
| 'light-blue'
| 'cyan'
| 'teal'
| 'green'
| 'light-green'
| 'lime'
| 'yellow'
| 'amber'
| 'orange'
| 'deep-orange'
| 'brown'
| 'grey'
| 'blue-grey'
| 'white'
| 'black';

type ThemeOption = Color | {
  color?: Color;
  hue?: string | number;
  textColor?: Color;
};

interface ThemeType {
  primary?: ThemeOption;
  accent?: ThemeOption;
  warn?: ThemeOption;
  background?: ThemeOption;
}

declare module 'vue/types/vue' {
  namespace Vue {
    const material: {
      registerTheme(name: string | { [key: string]: ThemeType }, spec?: ThemeType): void,
      setCurrentTheme(name: string): void
    };
  }
}

@CatsMiaow so how can I use then?

kenkopelson · 2018-12-10T06:47:19Z

@Saidabbos Thanks for putting that up there. One problem, however, is you import "Vue" at the top, but then try to use the same identifier "Vue" in the namespace at the bottom of the file. The compiler complains about this.

shoffing · 2019-03-29T19:40:23Z

@kenkopelson Changing Vue to VueM fixes that for me.

import Vue from "vue";

type Component = "MdCore"
  | "MdAvatar"
  | "MdBackdrop"
  | "MdBottomBar"
  | "MdButton"
  | "MdButtonToggle"
  | "MdCard"
  | "MdCheckbox"
  | "MdChips"
  | "MdDialog"
  | "MdDivider"
  | "MdFile"
  | "MdIcon"
  | "MdImage"
  | "MdInputContainer"
  | "MdLayout"
  | "MdList"
  | "MdMenu"
  | "MdProgress"
  | "MdRadio"
  | "MdSelect"
  | "MdSidenav"
  | "MdSnackbar"
  | "MdSpeedDial"
  | "MdSpinner"
  | "MdSubheader"
  | "MdSwitch"
  | "MdTable"
  | "MdTabs"
  | "MdToolbar"
  | "MdTooltip"
  | "MdWhiteframe";

type Options =
  { install: Vue.PluginFunction<never>} &
  { [key in Component]: Vue.PluginFunction<never> };

declare const options: Options;
export default options;

type Color = "red"
  | "pink"
  | "purple"
  | "deep-purple"
  | "indigo"
  | "blue"
  | "light-blue"
  | "cyan"
  | "teal"
  | "green"
  | "light-green"
  | "lime"
  | "yellow"
  | "amber"
  | "orange"
  | "deep-orange"
  | "brown"
  | "grey"
  | "blue-grey"
  | "white"
  | "black";

type ThemeOption = Color | {
  color?: Color;
  hue?: string | number;
  textColor?: Color;
};

interface ThemeType {
  primary?: ThemeOption;
  accent?: ThemeOption;
  warn?: ThemeOption;
  background?: ThemeOption;
}

declare module "vue/types/vue" {
  namespace VueM {
    const material: {
      registerTheme(name: string | { [key: string]: ThemeType }, spec?: ThemeType): void,
      setCurrentTheme(name: string): void
    };
  }
}

matsch01 · 2019-04-10T14:37:33Z

@shoffing I've created a folder called 'types' in my project with subdirectory 'vue-material':

+types
    +vue-material
        -index.d.ts (your code above here)
-tsconfig.json

and inside tsconfig.json I've added:

"typeRoots": ["node_modules/@types", "types"]

However, this line in main.ts gives an error:

import VueMaterial from 'vue-material';  <== Error here still.
Vue.use(VueMaterial);

Could not find a declaration file for module 'vue-material'. '/workspace/myproject/node_modules/vue-material/dist/vue-material.js' implicitly has an 'any' type.
Try npm install @types/vue-material if it exists or add a new declaration (.d.ts) file containing declare module 'vue-material';ts(7016)

Can you explain how to load index.d.ts? Thanks.

maxhillaert · 2019-06-19T12:08:08Z

@matsch01 and others who hit this issue. The index.d.ts above is wrong. Import has to be inside declaration module. This is what works for me

declare module 'vue-material/dist/components' {

  import _Vue from "vue"; // <-- notice the changed import

  // export type PluginFunction<T> = (Vue: typeof _Vue, options?: T) => void;
  export function MdButton(Vue: typeof _Vue, options?: any): void 
  export function MdContent(Vue: typeof _Vue, options?: any): void 
  export function MdTabs(Vue: typeof _Vue, options?: any): void 
}

kamok · 2019-08-01T19:32:02Z

In regards to @maxhillaert's fix, here's a good answer on stackoverflow about this.
https://stackoverflow.com/a/42702089/6174577

nsksaisaravana · 2019-08-26T02:56:37Z

Any roadmap to support typescript????

ghost · 2020-03-26T17:34:48Z

Any news on this? Proper Typescript support would be a huge improvement over native JavaScript (even though I love JS, partly because it's so f'ed up ;) )

ghost · 2020-03-26T18:26:54Z

@matsch01 and others who hit this issue. The index.d.ts above is wrong. Import has to be inside declaration module. This is what works for me

declare module 'vue-material/dist/components' {

  import _Vue from "vue"; // <-- notice the changed import

  // export type PluginFunction<T> = (Vue: typeof _Vue, options?: T) => void;
  export function MdButton(Vue: typeof _Vue, options?: any): void 
  export function MdContent(Vue: typeof _Vue, options?: any): void 
  export function MdTabs(Vue: typeof _Vue, options?: any): void 
}

Thanks for the information. Could you perhaps elaborate a bit? I don't see any trivial way to use your code sample, and if I just "show it in" I get the following message:

TS2665: Invalid module name in augmentation. Module 'vue-material/dist/components' resolves to an untyped module at '/home/rohdef/git/customer-web/node_modules/vue-material/dist/components/index.js', which cannot be augmented.

It might be my lack of experience with the TypeScript type definitons, but I'm kind of stuck

jameskleeh · 2020-05-16T02:53:35Z

@rfftrifork Running into the same issue. Did you ever find a solution? Pretty insane that after 3 years there is still no typescript support out of the box

Suya1671 · 2020-06-02T12:29:00Z

@matsch01 and others who hit this issue. The index.d.ts above is wrong. Import has to be inside declaration module. This is what works for me

declare module 'vue-material/dist/components' {

  import _Vue from "vue"; // <-- notice the changed import

  // export type PluginFunction<T> = (Vue: typeof _Vue, options?: T) => void;
  export function MdButton(Vue: typeof _Vue, options?: any): void 
  export function MdContent(Vue: typeof _Vue, options?: any): void 
  export function MdTabs(Vue: typeof _Vue, options?: any): void 
}

I've tried this but it doesn't even say that my file exists. here is the repository with the bug: https://github.com/Suyashtnt/vuejs-weather

log:

PS C:\Users\Home\Documents\weather app> npm run serve

> [email protected] serve C:\Users\Home\Documents\weather app
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 8198ms                                                                                                                                       14:29:40

ERROR in C:/Users/Home/Documents/weather app/src/main.ts(11,8):
11:8 Could not find a declaration file for module 'vue-material/dist/components'. 'C:/Users/Home/Documents/weather app/node_modules/vue-material/dist/components/index.js' implicitly has an 'any' type.
  Try `npm install @types/vue-material` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-material/dist/components';`
     9 |   MdContent,
    10 |   MdTabs
  > 11 | } from 'vue-material/dist/components'
       |        ^
    12 | import 'vue-material/dist/vue-material.min.css'
    13 | import 'vue-material/dist/theme/default.css'
    14 | 
Version: typescript 3.9.3
Time: 5095ms

  App running at:
  - Local:   http://localhost:8080/    
  - Network: http://192.168.0.100:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

calvinnor · 2020-06-28T14:58:22Z

Running into the same error. Wish someone could add TypeScript support. I would, but I'm fairly new to the language.

Could not find a declaration file for module 'vue-material/dist/components'. '/home/project/node_modules/vue-material/dist/components/index.js' implicitly has an 'any' type.
  Try `npm install @types/vue-material` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-material/dist/components';`

bpossolo · 2021-05-04T10:51:18Z

pretty insane that no one has bothered to properly answer everyone's questions about this....
ignore basically everything you see above as its all outdated/wrong.

if you want to use specific components (recommended since it minimizes payload size) in your ts files:
create vue-material.d.ts with the following lines (example for two material components)

declare module 'vue-material';
declare module 'vue-material/dist/components/MdButton';
declare module 'vue-material/dist/components/MdCheckbox';

place it anywhere under your source directory.
I put mine in src/typings/vue-material.d.ts
then in your ts app code simply do:

import MdButton from 'vue-material/dist/components/MdButton';
import MdCheckbox from 'vue-material/dist/components/MdCheckbox';
Vue.use(MdButton);
Vue.use(MdCheckbox);

if you prefer to load the whole library (kinda nuts) then do the following instead
in vue-material.d.ts

declare module 'vue-material';

and in your code

import VueMaterial from 'vue-material';
Vue.use(VueMaterial);

note 1: when you import a specific component (like in the first example), you can't use the component like you normally do in a Vuejs components block. it only supports being registered globally as I showed in the examples above. ie this DOESN'T work

import MdButton from 'vue-material/dist/components';

export default {
  components: {
    MdButton
  },
  props: {
    name: String
  }
}

see here for a three-year old feature request regarding that.

note 2: for clarity, adding declarations via declare module doesn't bloat your js file. in fact, you can add every component to your vue-material.d.ts file to simplify your life down the road. but be mindful of how much you import/use because that will add to your js payload size.

cstergianos · 2021-05-23T16:08:21Z

You can use this on top of your normal npm installation:
npm i git+https://github.com/calebsander/vue-material-types.git

Worked like a charm for me

mjknight50 mentioned this issue May 9, 2017

Property 'material' does not exist on type 'typeof Vue'. #736

Closed

Morgul added help wanted improvement request labels Jun 21, 2017

pablohpsilva changed the title ~~Typescript support planned?~~ [core] Typescript support planned? Aug 9, 2017

Samuell1 mentioned this issue Sep 10, 2018

I need the vue-material d.ts file, I hope to join as soon as possible. #1928

Closed

CMiksche mentioned this issue Jan 18, 2020

Failure to introduce component libraries??? #2109

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Typescript support planned? #662

[core] Typescript support planned? #662

akaSybe commented Apr 4, 2017 •

edited

Loading

CatsMiaow commented Jun 16, 2017 •

edited

Loading

Morgul commented Jun 21, 2017

waratah commented Oct 13, 2017

akaSybe commented Oct 13, 2017

Samuell1 commented Nov 23, 2017

matths commented Feb 2, 2018

Samuell1 commented Mar 9, 2018

crutchcorn commented Aug 23, 2018 •

edited

Loading

Saidabbos commented Oct 19, 2018

vue-material/index.d.ts

kenkopelson commented Dec 10, 2018

shoffing commented Mar 29, 2019 •

edited

Loading

matsch01 commented Apr 10, 2019 •

edited

Loading

maxhillaert commented Jun 19, 2019 •

edited

Loading

kamok commented Aug 1, 2019

nsksaisaravana commented Aug 26, 2019

ghost commented Mar 26, 2020

ghost commented Mar 26, 2020

jameskleeh commented May 16, 2020

Suya1671 commented Jun 2, 2020 •

edited

Loading

calvinnor commented Jun 28, 2020

bpossolo commented May 4, 2021 •

edited

Loading

cstergianos commented May 23, 2021

[core] Typescript support planned? #662

[core] Typescript support planned? #662

Comments

akaSybe commented Apr 4, 2017 • edited Loading

CatsMiaow commented Jun 16, 2017 • edited Loading

vue-material/index.d.ts

Morgul commented Jun 21, 2017

waratah commented Oct 13, 2017

akaSybe commented Oct 13, 2017

Samuell1 commented Nov 23, 2017

matths commented Feb 2, 2018

Samuell1 commented Mar 9, 2018

crutchcorn commented Aug 23, 2018 • edited Loading

Saidabbos commented Oct 19, 2018

vue-material/index.d.ts

kenkopelson commented Dec 10, 2018

shoffing commented Mar 29, 2019 • edited Loading

matsch01 commented Apr 10, 2019 • edited Loading

maxhillaert commented Jun 19, 2019 • edited Loading

kamok commented Aug 1, 2019

nsksaisaravana commented Aug 26, 2019

ghost commented Mar 26, 2020

ghost commented Mar 26, 2020

jameskleeh commented May 16, 2020

Suya1671 commented Jun 2, 2020 • edited Loading

calvinnor commented Jun 28, 2020

bpossolo commented May 4, 2021 • edited Loading

cstergianos commented May 23, 2021

akaSybe commented Apr 4, 2017 •

edited

Loading

CatsMiaow commented Jun 16, 2017 •

edited

Loading

crutchcorn commented Aug 23, 2018 •

edited

Loading

shoffing commented Mar 29, 2019 •

edited

Loading

matsch01 commented Apr 10, 2019 •

edited

Loading

maxhillaert commented Jun 19, 2019 •

edited

Loading

Suya1671 commented Jun 2, 2020 •

edited

Loading

bpossolo commented May 4, 2021 •

edited

Loading