How to use type enhancement without typingscript

Preface

Due to the weak typing of JS, loose writing standards, and weak support of development tools, when we maintain the code of predecessors, we often don’t know where a method or field name comes from. We must search globally and then slowly screen to find it.

Similarly, when we use the object fields returned by the interface, we do not know their types or meanings.

Even when we use methods mounted on the vue global object, it is purely guesswork, especially when the function can receive multiple types, which is painful.

Let's talk about the purpose first: we hope that all resources can be indexed to their definitions or sources, with code completion, and can be navigated to by pressing CTR+left mouse button in vscode, which improves efficiency and is easy to use.

Specific configuration information

Configure global jsconfig.json

We are used to configuring related path aliases in wepback. In order to make vscode recognize it, we need to do the following configuration

{
 "compilerOptions": {
 "target": "ES6",
 "module": "commonjs",
 "allowSyntheticDefaultImports": true,
 "baseUrl": "./",
 "paths": {
  "@/*": ["src/*"]
 }
 },
 "exclude": ["node_modules", "dist"],
 "include": ["src/**/*", "global.d.ts"]
}

Install plugin vue-helper

This plugin is installed to solve the problem that vscode-intelligence does not recognize .vue files and cannot navigate

However, there is still a bug. If the import x variable name is not the same as the file-name, it will not be recognized.

The ultimate solution is to host .vue files with js

export { default } from './index.vue'

vscode can perfectly navigate to a specific page in one step

Hate writing repetitive code? Define a snippet

 "export default": {
 "scope": "javascript,typescript",
 "prefix": "expd",

 "body": ["export {default} from './index.vue${1}';"]
 },
 "export default as": {
 "scope": "javascript,typescript",
 "prefix": "expdas",

 "body": ["export {default as ${2}} from './index.vue${1}';"]
 },

Add type declarations to methods or properties attached to Vue

Create a new global.d.ts in the root directory and add it to jsconfig.json: include

// global.d.ts
import Vue from 'vue'
type FnVoid = (...ags: any[]) => void

declare module '*.vue' {
 export default Vue
}
declare module 'vue/types/vue' {
 interface Vue {
 $$title: (title: string) => void
 $$login: FnVoid
 // ......
 }
}

Write the right comments

VSCode now has more and more complete support for jsdoc syntax, which can provide us with powerful code prompts, code completion and code checking during the code writing stage.

For example, we can define variables in comments. For the interface returned by the list, if we do not need to define a model object to receive the data, custom variables are very useful.

It even supports import syntax

However, annotation variables not attached to a method are not available.

For example, I create a new file and write the following comments

/**
 * @typedef {Object} person
 * @property {string} name
 * @property {number} age
 */

It cannot be referenced in code.

/**@type import('./test').person */

I think we have reached the point where abstract objects are reused in many places. Why not just create new objects under the model layer?

I guess vscode is also based on this consideration.

In addition, if the object is obtained through calculation, the vscode code prompt function cannot recognize it.

The following code cannot prompt for object properties

We try to avoid this kind of writing when writing code

const func = () => {
 return ['a', 'b', 'c'].reduce((pre, cur) => {
 pre[cur] = 'hello ' + cur
 return pre
 }, {})
}

let obj = func()

Advanced

What if we want to add hints to event definitions in our code?
For example, I registered an event

test.on('handleInputClicked', () => {})

Unfortunately, this is not possible on jsdoc yet.

Fortunately, support for type template strings has been added in the latest release of ts4.1.beta

Based on this, we can even implement support for vuex

For specific documents, see TypeScript 4.1 Type Template String to implement Vuex's store.commit and store.dispatch type judgment

By Xiaoyuncai: http://www.cnblogs.com/phillyx/

github:http://github.com/phillyx

Summarize

This is the end of this article about how to use type enhancement without using typsescript. For more information about typsescript type enhancement, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!