Vue3 🔥 is implemented in typescript, so I consider his source code to be a best practice for learning tyepScript. Here are some examples of how to use typescript’s “is” feature.

direct

Lesson one: Play with typescript

Lesson two, basic types and introductory advanced types

Lesson three: Generics

Lesson four: Reading advanced types

Lesson 5: What is a namespace

Special, learn typescript in vue3🔥 source 🦕 – “is”

Lesson 6. What is a declare? 🦕 – Global declaration

What is” is” used for?

This type of function must use the “is” property. This type of function is usually named isString/isFood/isVnode, etc. For example:

const isString = (val: any): val is string= >typeof val === 'string'
Copy the code

concept

Is a keyword for a type inference expression that “Narrows” the type of an argument by comparing it to the return value of a function.

😠 after reading this sentence, please continue to see the following example to understand what this sentence means. 😁 I guarantee you will understand this sentence after the first example.

Where does Vue use “is”?

Let’s start with a vscode trick. We can use “re” to search, for example, by searching \): \w+ is, we can find all the code that uses the “is” feature.

More commonly used regular look here: https://juejin.cn/post/6844903886004682765

Instance to explain

From the code searched, we took out the most representative function description.

const isString = (val: any): val is string= >typeof val === 'string'
Copy the code

To highlight

You can see in the return value section that instead of a type is returned, an expression “val is string” is returned. What this code means is that when isString returns true, the parameter val is string.

Can’t I just return Boolean?

No way! If aa must be a string, but ts does not know that aa may be null and cannot execute the subString method.

Therefore, we need to use the IS feature. Ts can infer that the current AA is a string based on if:

More examples of “is” in VUE3

// Whether it is an object
export const isObject = (val: any): val is Record<any.any> => val ! = =null && typeof val === 'object'

// Whether to ref objects
export function isRef(v: any) :v is Ref {
  return v ? v[refSymbol] === true : false
}

/ / whether the vnode
export function isVNode(value: any) :value is VNode {
  return value ? value._isVNode === true : false
}

// Whether to slot a node
export const isSlotOutlet = (
  node: RootNode | TemplateChildNode
): node is SlotOutletNode =>
  node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
Copy the code

For more examples, search \): \w+ is in the source code, and there are about 16 similar codes.

Through summarizing, we found that the “is” are mainly applied in type judgment function, make the follow-up of logic to deduce the right parameters in type, ok now can look back at the beginning of explanation “is a kind of type inference expression keywords, through the comparison of and function return values, thus” narrow “the type of parameter range.”, I don’t know if that makes sense now.

practice

Let’s write a regular expression function of our own.

🚀 answer 
function isRegExp (input: any): input is RegExp {
    return '[object RegExp]' === Object.prototype.toString.call(input);
}
Copy the code

conclusion

Like TS, if you also like TS you can read my previous ts basic article.

Lesson one: Play with typescript

Lesson two, basic types and introductory advanced types

Lesson three, what are generics?

Lesson four: Reading advanced types

Lesson 5: What is a namespace?

I hope you can get familiar with TS as soon as possible. Put in 2 projects I wrote with TS as a reference, and throw a brick to attract jade. Come on!

✋ mobile/PC gesture library, support: tap/press/pan/swipe/rotate/pinch github.com/any86/any-t…

🍭 change the vue component to a command like this.$XXX github.com/any86/vue-c…

WeChat group

Thank you for your reading. If you have any questions, you can add me to the wechat group, and I will pull you into the wechat group (Because Tencent limits the number of wechat groups to 100, when the number exceeds 100, you must be joined by group members).