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

The joint type

If you want a variable to support multiple types, you can define it with union types.

For example, a variable that supports both number and string could be written like this:

let num: number | string

num = 8
num = 'eight'
Copy the code

Union types greatly improve type extensibility, but when TS is not sure what type a union type variable is, they can only access their common properties and methods.

For example, you can only access methods that are common to number and string.

If you access the length property directly, it’s a string property, but it’s not a number property,

Type of protection

If there is a getLength function, into ginseng is joint type number | string, back into the length,

function getLength(arg: number | string) :number {
    return arg.length
}
Copy the code

The number type does not have a length attribute.

This is where Type Guards come in, and you can use the Typeof keyword to determine the Type of a variable.

Let’s change the getLength method to get the exact length of a string,

function getLength(arg: number | string) :number {
    if(typeof arg === 'string') {
        return arg.length
    } else {
        return arg.toString().length
    }
}
Copy the code

The reason it’s called type protection is to be able to narrow down the scope of different branching conditions so that our code is much less likely to go wrong.

Types of assertions

The previous example can also be addressed using type assertions.

Type assertion syntax:

valueastypeCopy the code

Use type assertions to tell TS that I (the developer) know what type this parameter is better than you (the compiler), so don’t give me an error,

function getLength(arg: number | string) :number {
    const str = arg as string
    if (str.length) {
        return str.length
    } else {
        const number = arg as number
        return number.toString().length
    }
}
Copy the code

Note that type assertion is not a type conversion, and asserting a type to a type that does not exist in the union type raises an error.

For instance,

function getLength(arg: number | string) :number {
    return (arg as number[]).length
}
Copy the code

Cross type

If you want to extend object shapes, you can use the cross type &.

Person has a name and age attribute, Student has a grade attribute on top of name and age,

interface Person {
    name: string
    age: number
}

type Student = Person & { grade: number }
Copy the code

This is exactly the same as class inheritance, so Student inherits the property on Person,

Joint type | means can take one of several types, and the cross type & refers to combine several types.

The cross type is very similar to the extends of an interface in that it is used to combine and extend object shapes.

Type the alias

Type aliases, as they sound, give types individual names.

Like giannis Antetokounmpo, the NBA player whose name is too long to remember, we call him Giannis antetokounmpo.

Just like configuring alias in our project, it is easy to import files without writing relative paths

import componentA from '.. /.. /.. /.. / components/component/index. Vue 'become an import component from' @ / components/component/index. The vueCopy the code

Type aliases are written with the type keyword. With type aliases, we can write TS more succinctly.

For example, in this example, the getName function may take a string or a function.

type Name = string
type NameResolver = () = > string
type NameOrResolver = Name | NameResolver          // Union type
function getName(n: NameOrResolver) :Name {
    if (typeof n === 'string') {
        return n
    }
    else {
        return n()
    }
}
Copy the code

This calls both the string and the function.

getName('lin')
getName(() => 'lin')
Copy the code

If the format of the message is not correct, it will prompt you.

A type alias gives a type a new name. Type aliases are sometimes similar to interfaces, but can work with primitive values, union types, tuples, and any other type you need to write by hand. – TS document

Type aliases are used as follows,

type Name = string                              // Basic type

type arrItem = number | string                  // Union type

const arr: arrItem[] = [1.'2'.3]

type Person = { 
  name: Name 
}

type Student = Person & { grade: number  }       // Cross types

type Teacher = Person & { major: string  } 

type StudentAndTeacherList = [Student, Teacher]  // Tuple type

const list:StudentAndTeacherList = [
  { name: 'lin'.grade: 100 }, 
  { name: 'liu'.major: 'Chinese'}]Copy the code

Literal type

Sometimes, when we need to define constants, we need to use literal types, for example,

type ButtonSize = 'mini' | 'small' | 'normal' | 'large'

type Sex = 'male' | 'woman'
Copy the code

So you can only take values from these constants that are defined, and you get an error if you don’t take values,

The issue of

Easily take down TS generics

What is the difference between interface and type in TS?

TS type inference

Easy to understand the basic knowledge of TS summary