Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the relevant knowledge points of TypeScript generics", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what are the relevant knowledge points of TypeScript generics"?

1. Is the generics of ts difficult?

If you:

Just started to learn ts.

Just started to touch generics.

Struggling to learn the generics of ts

Are you confused when you see the following code?

Function makePair

()

Java supports generics as well as typescript. When I started studying Java in college, I was a rookie programmer. I skipped over difficulties (such as generics) directly, learned as much as I could, and LOL gang up when I went back to my dorm. I still didn't understand the concept of generics until I graduated from college. Maybe you find generics as difficult as I do. I will share my understanding below. I hope it will be helpful to you.

2. Let's take a look at the function makeState ()

First, I wrote the function makeState, which we will use to discuss generics.

Function makeState () {let state: number function getState () {return state} function setState (x: number) {state = x} return {getState, setState}}

When you run this function, we get the getState () and setState () functions.

Let's try what the following code will print.

Const {getState, setState} = makeState () setState (1) console.log (getState ()) setState (2) console.log (getState ()) 1 2

It's not that hard to print out 1 and 2, right?

Note: if you are using react, you may find that makeState () is very similar to the hook function useState (). Closure and deconstruction assignment of ES6 are also involved here.

3. What happens if we pass in a string?

What will be the output if we replace the input parameters 1 and 2 just given to setState with the string 'foo'?

Const {getState, setState} = makeState () setState ('foo') console.log (getState ()) Argument of type' "foo"'is not assignable to parameter of type 'number'.

Compilation fails because the parameter type required by setState () is number

We can solve this problem in the following ways

Function makeState () {/ / Change to string let state: string function getState () {return state} / / Accepts a string function setState (x: string) {state = x} return {getState, setState}} const {getState, setState} = makeState () setState ('foo') console.log (getState () foo

4. Challenge: get two different types of state

Can we modify the function makeState () to output two different types of state, such as a string and a number.

The following code is concise enough to express what I want to say:

/ / One that only allows numbers, and... Const numState = makeState () numState.setState (1) console.log (numState.getState ()) / / 1 / / The other that only allows strings. Const strState = makeState () strState.setState ('foo') console.log (strState.getState ()) / / foo

To achieve the above effect, we may need to create two internally different makeState (), one state of type is a number, one is a string.

How can I write only one to achieve it?

5. Experiment 1: set multiple types

This is our first attempt:

Function makeState () {let state: number | string function getState () {return state} function setState (x: number | string) {state = x} return {getState, setState}} const numAndStrState = makeState () / / numeric numAndStrState.setState (1) console.log (numAndStrState.getState ()) / / string numAndStrState.setState ('foo') console.log (numAndStrState.getState ()) 1 foo

As a result, we seem to have succeeded, but this is not what I really want. What we really want to achieve is that we can only output the numeric state and the string state.

NumAndStrState can output both numeric and string types.

6. Implementation 2: using generics

Here comes our generics:

Function makeState () {let state: S function getState () {return state} function setState (x: s) {state = x} return {getState, setState}}

MakeState () is defined as makeState (), which you can use as a function argument, but it doesn't pass in a value, it's a type.

For example, you can pass in a numeric type:

MakeState ()

Inside the function makeSate (), state becomes a numeric type.

Let state: S / /

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.