support typescript

[tangjinzhou]

• 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:
#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.