Ant-design-vue: support typescript

[tangjinzhou]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

support typescript

What does the proposed API look like?

no

[IssueHuntBot]

@boostio funded this issue with $50. See it on IssueHunt

[davidmoshal]

Hi, am trying to use babel-plugin-import for automatic css loading,
but finding that it's not working with typescript.
Wondering if instead I should be using ts-import-plugin ?

[davidmoshal]

OK, figured out the above issue:
You can't use:
babel-plugin-import and
import {Antd} from 'vue-ant-design'
at the same time (Duh).

it's explained in this link:
https://github.com/vueComponent/ant-design-vue/issues/193

It seems to work, as the build size (with the demo which only uses the Button component), goes from around 1.1 mb unzipped to around 0.15 mb , ie: 7x smaller (again, only using the Button component).

But that still leaves open the question of using babel-plugin-import instead of ts-import-plugin,
as this ties your TS project to Babel.

Seems like this is the best place to post typescript-related magical incantations.

[IssueHuntBot]

@davidm-public has funded $50.00 to this issue. See it on IssueHunt

[davidmoshal]

Added $50 to bounty using my public github account
(why does BoostIO need my email address and access to my repos??)

[tangjinzhou]

@davidmoshal
Now that the project does not have a related TS type file, there is no point in using TS. If your project uses ts, you can temporarily remove the project from ts-loader.

[davidmoshal]

@tangjinzhou I am unable to parse your comment.

1) firstly, there are overwhelming reasons to use typescript. Indeed even Vue is moving to typescript. Personally I wouldn't consider writing any serious front end project without using typescript. There are dozens of other libraries which we use that have ts definition files.

2) what does this mean :

"You can temporarily remove the project from ts-loader." ?
Why would you want to do that?

3) the project works great with typescript and babel-import-plugins, as I explained above, it automatically imports the correct less files, no problem.

4) ts doesn't buy you much for Vue templates, there's no typing of xml yet (though it's on the ts road map), so lack of ts definition files is not a show stopper.

5) if no one steps up to write a ts definition file then I will do so, provided that ant-design-vue works as described. So far it's working great, no complaints.

[tangjinzhou]

@davidmoshal We will provide ts type files as soon as possible.

[davidmoshal]

@tangjinzhou thanks, btw, iView has Typescript support, you may want to look at how they did it:

https://github.com/iview/iview/tree/2.0/types

David

[calebeaires]

@davidmoshal We will provide ts type files as soon as possible.

I have tried to implement it since I am using vue-cli typescript setup, but I had no success, even if creating an file (shims-antd.d.ts) in src folder with this content:

import Vue from 'vue';
import Form from 'ant-design-vue/lib/form';

declare module 'vue/types/vue' {
  interface Vue {
    $form: Form
  }
}

[davidmoshal]

@calebeaires I'm not sure what you're trying to accomplish.

I'm no expert here, but it looks like you're referencing a form.js file which has no type information (as it's javascript).

If you want to use types, the options would appear to be:

a) write form.js in typescript, that should give you typing for free (I think), or

b) write a form.d.ts definition file describing all of the typing information in that class.

Take a look at how the iView project did it, is this link
Of course that's just for reference, it's from a different project.

For me I just declare the 'antd-design-vue' namespace in a shim file, and then a declare the occasional class or function of interest. It's not ideal, obviously.

I have to admit it's a bit of a mystery to me why folks don't just write their code in Typescript in the first place. I mean you get so much upside, and absolutely no downside.

As you know Vue itself is being re-written in Typescript, and Ryan Dahl, the creator of Node.js is re-writing node to run Typescript natively: see Deno.

[calebeaires]

@davidmoshal Like you sugest, the module I wrote above were put in a form.d.ts file be intrepreted as a referece in the Vue.extend object. I said early that that code were not working, but I was wrong.

For some reason, after closing VSCode and openning it again an the $form property starts to be showen on VSCode tooling.

[calebeaires]

@tangjinzhou Can you give us some date or rodamap to the types feature. Maybe we can help buinding it.

[tangjinzhou]

Some community developers have already developed it. If it goes well, it will be completed in the last week or two.

[IssueHuntBot]

@akki-jat has submitted a pull request. See it on IssueHunt

[IssueHuntBot]

@tangjinzhou has rewarded $70.00 to @akki-jat. See it on IssueHunt

• :moneybag: Total deposit: $100.00
• :tada: Repository reward(20%): $20.00
• :wrench: Service fee(10%): $10.00

[davidm-public]

@tangjinzhou thank you sir.

[tangjinzhou]

https://github.com/vueComponent/ant-design-vue/releases/tag/1.2.5

[ssssssander]

How can I actually use the TypeScript definitions? If I write this:
import message from 'ant-design-vue/lib/message';
Then I still get an error: Could not find a declaration file for module 'ant-design-vue/lib/message'

[akki-jat]

@ssssssander can you try with ES6 import syntax eg. import { message } from "ant-design-vue"?

[ssssssander]

@akki-jat That works, but I'd like to load only the components I need using TypeScript

[akki-jat]

So @ssssssander, you can use babel-plugin-import as described in docs of library or if you still want to use import message from 'ant-design-vue/lib/message' syntax then you have to manually declare module in shims-vue.d.ts file.

Example (module declaration in shims-vue.d.ts file )

declare module 'ant-design-vue/lib/message' {
  import { Message } from 'ant-design-vue/types/message';
  const message: Message;

  export default message;
}

If you still have any query related to typescript feel free to ask.

[ssssssander]

@akki-jat I did what you suggested, and when trying to edit a config and when calling Vue.use:
message.config({ duration: 2, });
Vue.use(Icon);
I now get these errors:
Property 'config' does not exist on type 'typeof Message'.
Argument of type 'Icon' is not assignable to parameter of type 'PluginObject<{}> | PluginFunction<{}>'. Property 'install' is missing in type 'Icon' but required in type 'PluginObject<{}>'.
How can I fix this?

[akki-jat]

@ssssssander I need more details on how you are using components.
For reference you can look how I am using message component here: https://github.com/akki-jat/ant-design-vue-import.

You can also add you use case and open pull request on given repo so, I can help you more on the same.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.