“This is the 39th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Vue3 + Vite does not add TS, but ts is used in Angular. On this day, the new assignment uses all three. In fact, this article is written to ridicule.

Install dependencies first, I hesitate to use NPM or PMPM, or… ? Then I saw yarn.lock and thought I could do no wrong, so I decided to do yarn. Enter a YARN snap Enter, very quickly. Then, I saw a red.

A series of questions

I thought, there must be something wrong with the configuration, that colleague must not open ts grammar test.

First you see an import error that cannot be found

Common can not find *** module, I looked at the directory is indeed installed, ‘vue-Router’ and then of course is Baidu, toss over and over again, I think this small problem is necessary to record. The solution is to restart Vocode after installing dependencies.

Then there’s the path problem

After the restart, sure enough, it was not red, but it was like opening Pandora’s box, the superficial problem was solved, exposing more real problems.

I thought, this problem I am familiar with ah, is the introduction of TS file do not add suffix, the reason for personal guess, should be compiled after there is no TS, will not find, do not write words can still find, of course, the framework may deal with this problem, otherwise MY project how to run. Very confident deleted. Ts suffix, the result is still floating red, can not find the path.

I realized that things weren’t as easy as I thought, and after a few twists and turns, I just needed to configure ts.config.json. Although the path alias of vite.config.ts has been configured

But you also need to configure ts.config.json,

In the end, it was people

Again, write TS, you don’t turn on TS syntax check, you write what TS. Vite is tolerant, and ts errors do not cause this project to compile. I’ve been through the hell of Angular syntax checking, and you won’t let it pass if it’s a problem, just like when you first started using ESLint. How to learn TS is to learn in the process of solving the grammatical error prompts. Of course, it is better to learn it systematically.

The reason for this error is simpleIDrawerObjThis interface does not have that property, I looked at it, it is a spelling error. It’s easy to correct with grammar check.

One last little question

Ref knows from the official website that this is provided for primitive value types, and since primitive value types cannot be captured, they need to be wrapped as properties of the object, so we need to access its value property to access the value. I just put an empty object here. You don’t know Reactive?

But, looking at the code below, he knows reactive, but he doesn’t use it. And the value behind it is actually an array, so find is exploding, and TS assumes that it is an empty object.

Here, because when he assigns, he uses direct

Override, so I have to be impressed that this reactive object still works.

The last

Joke finished, although the others more explosive red, but the project can still run. Why? Because ts will eventually compile to JS, it will run if it conforms to JS. Big man is still big man.

However, the purpose of using TS is for syntax hints, just click on the property method and it will come out quickly. If the type may change, forget it. It won’t change, but let’s be honest. It’s easy to use in the back.

Use TS, be sure to open grammar detection, it even spelling errors can be detected for you, you say good or not, more one-button repair function, more convenient ah.