This is the 28th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hello everyone, I am a bowl week, a front end that does not want to be drunk (inrolled). If I am lucky enough to write an article that you like, I am very lucky

The joint type

The so-called joint types is to define some types, variables defined you just need to meet any one type of joint types using | definition, the example code is as follows:

/ / by | symbol definition joint type
let value: number | boolean | string = 'Bowl Week'
value = 18

Copy the code

In the above code we define a value variable, which can be of type number, Boolean, or String.

Cross type

Union types were introduced, followed by cross types that are particularly similar to them.

A cross type needs to satisfy all types. A cross type is defined using the ampersand symbol. Example code is as follows:

// Define three common interface types
interface Name {
  name: string
}
interface Age {
  age: number
}
interface Hobby {
  hobby: string
}
// Define an object that is the combined type of the above three objects
let person: Name & Age & Hobby = {
  // An exception will be thrown if one type is not allocated
  name: 'Bowl Week'.age: 18.hobby: 'coding',}Copy the code

Type of protection

Now we have a requirement to get the first number in an array of any type.

The implementation code is as follows:

// Define an array containing either number or string
const arr: (number | string) [] = [1.'digital']
// Returns the first number
const getValue: (arr: (number | string) []) = > number = (
  arr: (number | string) [],) :number= > {
  for (let i = 0; i < arr.length; i++) {
    // If the current value is not a NaN when converted to a number
    if (!isNaN(Number(arr[i]))) {
      return arr[i] / / can't type "string | number" assigned to type "number".}}}Copy the code

We don’t know if we’re returning a number. So an exception will be thrown.

This can be done with type assertion, as shown in the following code:

const getValue: (arr: (number | string) []) = > number = (
  arr: (number | string) [],) :number= > {
  for (let i = 0; i < arr.length; i++) {
    // If the current value is not a NaN when converted to a number
    if (!isNaN(Number(arr[i]))) {
      return arr[i] as number // Tell the compiler that I am returning a number}}}Copy the code

What is type assertion see: Type Assertion

Using type assertions can be cumbersome if you want different data types. In this case, type protection is required to complete the function. Type protection can be divided into the following three types:

Custom type protection

You can customize type protection by defining a function whose return structure is a parameterName is type, which is a type predicate. ParameterName must be a parameterName from the current function parameter. Example code is as follows:

// Use custom type protection
ParameterName is Type. ParameterName is the Type of the parameterName is
function isNumber(value: number | string) :value is number {
  // If true is returned, the value passed is the type after is
  return !isNaN(Number(value))
}
// 2. Define a function to get a number
const getNumber: (value: number | string) = > number = (
  value: number | string,
): number= > {
  // If isNumber is true, value is a number, so return the number
  if (isNumber(value)) {
    return value
  }
}
// 3. Call to get the final value
const getValue: (arr: (number | string) []) = > number = (
  arr: (number | string) [],) :number= > {
  for (let i = 0; i < arr.length; i++) {
    // If a number is returned, convert to Boolean with the value true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

Copy the code

The reason for defining the second function is that using I directly as a return value in an array is still problematic, so define a function to transition.

typeofType of protection

The typeof keyword in JavaScript can determine the current type, but only number, String, Boolean, and symbol.

That’s enough for this requirement, so let’s look at how to implement type protection through Typeof. Example code is as follows:

// 1. Define a function to get a number
const getNumber: (value: number | string) = > number = (
  value: number | string,
): number= > {
  // Determine whether the current is a string, if so return the current value
  if (typeof value === 'number') {
    return value
  }
}
// 2. Call to get the final value
const getValue: (arr: (number | string) []) = > number = (
  arr: (number | string) [],) :number= > {
  for (let i = 0; i < arr.length; i++) {
    // If a number is returned, convert to Boolean with the value true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}

Copy the code

instanceofType of protection

The instanceof operator is also a native operator provided in JavaScript and is used to determine whether an instance was created by a constructor or a class using ES6 syntax. Type protection can also be implemented in TypeScript using the instanceof operator, as shown in the following example:

/** * Since instanceof only supports reference types and does not support primitive types, we need to change the array as follows: */
const arr2: (Number | String) [] = [new String('Prosperity on the other shore'), new Number(10)]
// 1. Define a function to get a number
const getNumber: (value) = > number = (value): number= > {
  // Check whether the current type is Number and return the current value as a string
  if (value instanceof Number) {
    return Number(value)
  }
}
// 2. Call to get the final value
const getValue: (arr: (Number | String) []) = > number = (
  arr: (Number | String) [],) :number= > {
  for (let i = 0; i < arr.length; i++) {
    // If a number is returned, convert to Boolean with the value true
    if (getNumber(arr[i]) || getNumber(arr[i]) === 0) {
      return getNumber(arr[i])
    }
  }
}
Copy the code

Two things to note when using Instanceof:

  • Applies only to any reference type; primitive types are not supported.

  • Whether the former’s prototype chain contains the latter’s prototype object.

Phase to recommend

  • Summary of 42 front-end layout schemes – Juejin (juejin. Cn)
  • JS advanced must be 5 high order functions – nuggets (juejin. Cn)
  • 6 types of inheritance before ES6 – Digging gold (juejin.cn)
  • – Juejin (juejin. Cn)