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

Review the previous learning record: learning TS enumerated types /interface interface /Class Class, simple this article to learn the important concept of TS – generics

TypeScript + Vue3 is now so widely used that if you don’t learn about it, you feel like you can’t keep up. Learn TypeScript(optional, but still, real volume…) The process of learning TypeScript is documented here in TypeScript In Action

Typescript related documentation

The Typescript website is typescriptlang.org/zh/

Typescript Chinese documents – Generics: Generics – Generics

TypeScript generic

Understand generics:

Generics can be understood as broad types and are commonly used for classes and functions

Generics:

Let’s start with two functions:

function returnSimpleType (arg: number) :number {
    return arg
}
Copy the code

The function returns number, which is the same type as arg, but what if arg is a string? As follows:

function returnSimpleType (arg: string) :string {
    return arg
}
Copy the code

The type of argument passed by the above two functions is the same as the type returned by the function, which means the writing logic is the same.

So in TypeScript there is a variable T, which is understood to represent the type of the parameter passed to the function and the type returned by the function. That is, it represents a type, not a value

function returnSimpleType<T> (arg: T) :T {
    return arg
}
Copy the code

As the code above shows: in TypeScript this type variable is called generic.

Vue3 learning actual combat series more text:

  1. Vue3 source code learning tool utils(2)
  2. Vue3- Initial experience,
  3. Vue3- Life cycle and setup() function,
  4. Vue3-computed & watch,
  5. Vue3-teleport changes the root node to which the component is mounted,
  6. Vue3-Suspense for asynchronous requests,
  7. Vue3-defAsyncComponent Asynchronous component (new),
  8. Vue3- Fragments (new),
  9. Vue3-v-model (not compatible),
  • Vue3 source repositoryvue-next : Github.com/vuejs/vue-n…
  • Vue3.x Official Chinese document: v3.cn.vuejs.org

  1. TypeScript series:

    • Getting to know TypeScript – Enter the world of TS type constraints
    • TS primitive type
    • TypeScript other types
    • TS Learning Combat – Enumeration Type (1)
    • TypeScript Learning Combat -5- Other enumeration types
    • TS learning actual combat -interface
    • TS learning combat -Class Class