typescript 의 infer 키워드 사용 을 깊이 이해 합 니 다.

infer 라 는 키 워드 는 뒤에 잊 어 버 리 지 않도록 정리 하고 기록 하 세 요.이해 가 안 되 네.
infer
typescript 2.8 에 추 가 된 키워드 입 니 다.
infer 는 extends 조건 형식의 자구 에서 실제 분기 에서 이 추정 유형 변 수 를 참조 하여 추정 할 유형 을 추정 할 수 있 습 니 다.
예 를 들 어 infer 로 함수 의 반환 값 형식 을 추정 합 니 다.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

type fn = () => number
type fnReturnType = ReturnType<fn> // number

이 예 에서
T extends U ? X:Y 의 형식 은 조건 유형 이다.
infer R 은 추정 되 는 반환 값 형식 을 대표 합 니 다.T 가 함수(...args:any[])=>infer R 이면 함수 의 반환 값 R 을 되 돌려 줍 니 다.그렇지 않 으 면 any 를 되 돌려 줍 니 다.
사례:깊 은 이해
역 해 Promise

// promise     
type PromiseResType<T> = T extends Promise<infer R> ? R : T

//   
async function strPromise() {
  return 'string promise'
}

interface Person {
  name: string;
  age: number;
}
async function personPromise() {
  return {
    name: 'p',
    age: 12
  } as Person
}

type StrPromise = ReturnType<typeof strPromise> // Promise<string>
//   
type StrPromiseRes = PromiseResType<StrPromise> // str

type PersonPromise = ReturnType<typeof personPromise> // Promise<Person>
//   
type PersonPromiseRes = PromiseResType<PersonPromise> // Person

역 해 함수 입 참 형식

type Fn<A extends any[]> = (...args: A) => any
type FnArgs<T> = T extends Fn<infer A> ? A : any

function strFn (name: string) {

}

type StrFn = FnArgs<typeof strFn> // [string]

[string,number]->string|number

type ElementOf<T> = T extends Array<infer E> ? E : never

type TTuple = [string, number];

type ToUnion = ElementOf<ATuple>; // string | number

new 연산 자

//       
type ConstructorParameters<T extends new (...args: any[]) => any> = T extends new (...args: infer P) => any ? P : never;

//       
type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;

class TestClass {

  constructor(
    public name: string,
    public string: number
  ) {}
}

type Params = ConstructorParameters<typeof TestClass>;  // [string, numbder]

type Instance = InstanceType<typeof TestClass>;         // TestClass

react - reducer

//   
function useReducer<R extends Reducer<any, any>, I>(
  reducer: R,
  // ReducerState     
  initializerArg: I & ReducerState<R>,
  initializer: (arg: I & ReducerState<R>) => ReducerState<R>
): [ReducerState<R>, Dispatch<ReducerAction<R>>];

// infer  
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any>
  ? S
  : never;
// Reducer  
type Reducer<S, A> = (prevState: S, action: A) => S;


//    reducer
const reducer = (x: number) => x + 1;
const [state, dispatch] = useReducer(reducer, '');
// Argument of type "" is not assignable to parameter of type 'number'.

vue3 - ref

export interface Ref<T = any> {
  [isRefSymbol]: true
  value: T
}

export function ref<T>(value: T): T extends Ref ? T : Ref<UnwrapRef<T>>

export type UnwrapRef<T> = {
  cRef: T extends ComputedRef<infer V> ? UnwrapRef<V> : T
  ref: T extends Ref<infer V> ? UnwrapRef<V> : T
  array: T
  object: { [K in keyof T]: UnwrapRef<T[K]> }
}[T extends ComputedRef<any>
  ? 'cRef'
  : T extends Array<any>
    ? 'array'
    : T extends Ref | Function | CollectionTypes | BaseTypes
      ? 'ref' // bail out on types that shouldn't be unwrapped
      : T extends object ? 'object' : 'ref']


//   
const count = ref({
  foo: ref('1'),
  bar: ref(2)
})

//    
const count: Ref<{
  foo: string;
  bar: number;
}>

const count = ref(2) // Ref<number>

const count = ref(ref(2)) // Ref<number>

레 퍼 런 스
infer
TypeScript 의 infer 키 워드 를 이해 합 니 다.
Vue 3 는 유 우 계 학 TypeScript 의 Ref 유형 을 따라 0 에서 이 루어 집 니 다.
typescript 의 infer 키 워드 를 깊이 이해 하 는 데 사용 되 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 typescript infer 키 워드 는 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!