[core] Typescript support planned?

[akaSybe]

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]

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]

@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]

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

[akaSybe]

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

[Samuell1]

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

[matths]

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]

@matths that is outdated and only works for older version

[crutchcorn]

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]

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?