B
B
BonBon Slick2021-06-28 14:23:59
typescript
BonBon Slick, 2021-06-28 14:23:59

Vue + typescript ignoring strong typing?

export default class ModalSelectAge extends Vue implements IUser{
    @namespace(USER).Action
    setAge!: (age: number) => void;

setAge({commit}, data: boolean): void {
        console.trace({data}); // string
        commit(MUTATION_SET_AGE, data);
    },


    [MUTATION_SET_AGE](state: any, data: number): void {
        state._age = data;
    },


    age(state: any): number {
        return state._age;
    },


Should throw an error at the component stage when the setAge method is called
<input type='range'
                                       min='3'
                                       max='21'
                                       :value='this.age'
                                       class='form-control-range'
                                       @change='setAge($event.target.value)'
                                >

which does not happen, so you can put anything in the Store, which in turn makes Typescript absolutely useless.

From the example above, the age getter will return an object, bool, null, whatever, typing is ignored.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
BonBon Slick, 2021-06-30
@BonBonSlick

In short.
Vue 2 does not support TypeScript.
Further details.
60db8ed287b14113435269.png
In the photo above, you can see that a mutation has been called and an array has been passed.
But in module mutation there is TS type boolean or any other, it doesn't matter at all.

const response = await listService.loadList(requestDTO);
        const {data} = response;
        commit(ADD_ITEMS, {items: data});

import {MutationTree} from 'vuex';

export default {
    [ADD_ITEMS](state, items: boolean) : void{
        state._items = state._items.concat(data.items);
    },
 
} as MutationTree<any>;

TS typing in Vuex without the use of plugins is completely ABSENT .
What makes TS a useless and even harmful tool that brings + 30% -60% additional work and overhead to the project without the main function for which it is used.
Tried several Vuex + TS packages, only Vue + TS at the moment, Vuex only uses TS very little in the form } as MutationTree<any>;and similar hints, which play little role.
That is, decorators for templates, all sorts of interfaces there and still a little more typing than without TS, but it's hard to say for now whether it's worth it at all. If typing works in the template, then the template renders the decorator
@Template
@Component<AnimeList>(
    {
        components: {
...
        },
        mixins:     [],
    },
)

export default class AnimeList extends Vue implements IList {

Then Vuex has much less support and much more problems.
Packages like this solve the problem of Vuex + TS being partially hacky because it only has 30-50% of TS functionality.
Namely, you can't use extend for other modules, which means code duplication, tens of thousands of lines in my pet project.
Actually, TS began to be used because of typing. work on JS in a project where 25+ K lines, popabol.
To catch an undefined or NaN bug for hours, because somewhere there was a failure, it could also arrive from the server, for example, broken data, and that's it, the client works buggy, but with TS it would seem that it should throw an error.
But alas.
That is, TS works approximately 20-30% without a plugin, the plugin adds another 15-20% of TS features, but at the same time it makes the application non-expandable.
In general, all data types for Vuex Action / Mutation / State without a plugin, a la dockblocks, they do not validate anything, without an additional Vuex + TS package.
I repeat, TS typing in Vuex without using decorators, facades and other crutches is almost completely absent . What does almost mean? We can still use interfaces, classes, etc. for internal validation, for example
export default {
  
} as { [key: string]: any };

And similar when importing a module, that's all, until I found nothing more useful)
Pet project is not completely transferred to TS, but gradually crawls. Porting now to Vue 3, personally, according to my estimates, it will take another 250+ hours. rewrite 2-3 hundreds of components, taking into account all the configs and pitfalls, I think the assessment is optimistic.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question