TypeScript에 제공되는 2가지 새로운 킬러 기능

타입스크립트 4.7

이upcoming TypeScript version는 언어에 많은 새로운 기능과 개선 사항을 제공하지만 특히 흥미로운 두 가지가 있습니다.

1- Instatiation Expressions

2- extends Constraints on infer Type Variables

새로운 기능 가치

당신이 나와 비슷하고 당신과 당신의 동료들에게 훌륭한 수준의 개발자 경험을 제공하는 복잡한 유형 정의를 만드는 것을 좋아한다면, 이러한 유형 정의를 작성하는 방법을 쉽게 해 줄 이 새로운 기능을 절대적으로 알아야 합니다. , 많이.

유형의 복잡성을 줄입니다.

유형의 자세한 정도를 줄입니다.

해결 방법의 양을 줄입니다.

인스턴스화 표현식

소수의 일반 함수 이상을 작성한 사람이라면 이 새로운 기능이 일부 유형을 사용하기 위해 "형편없는"JS 해결 방법을 작성하지 않아도 되는 기능일 것입니다.

인스턴스화 표현식을 사용하면 "인스턴스화"부분 없이 일반 유형을 얻을 수 있습니다 🤯

4.7 이전:

type Dog = {
  name: string
  isGoodBoy: boolean;
}

type Cat = {
  name: string
}

function getBigPet<T>(pet: T){
    return {...pet, big: true}
}

// 1- Need to have a typed param to pass 👎
const dog: Dog = {name: "Jake", isGoodBoy: true}

// 2- Need to create an arrow function 👎
const getBigDog = () => getBigPet(dog);

이 곧 출시될 버전 이전에는 일반 함수의 유형을 활용할 방법이 없었기 때문에 많은 사람들이 불필요한 JS 코드를 작성하여 해결 방법을 만들었습니다. ❌

4.7 이후

type Dog = {
  name: string
  isGoodBoy: boolean;
}

type Cat = {
  name: string
}

function getBigPet<T>(pet: T){
    return {...pet, big: true}
}

// Can "instantiate" on the fly ✅
const getBigDog = getBigPet<Dog>;

// No need to bring in any extra types ✅
type BigCat = ReturnType<typeof getBigPet<Cat>>

따라서 인스턴스화 표현식이 제공하는 것은 어떤 종류의 해결 방법이나 추가 JS 코드 생성 없이 일반 함수의 유형을 검색할 수 있는 단순성입니다.

장점

입력을 위해 JS 코드를 작성할 필요가 없습니다.

유형 API가 단순화됩니다.

레버리지 함수ReturnType가 이제 막 일류 시민이 되었습니다.

유추 유형 변수에 대한 제약 조건 확장

이 새로운 기능은 유추된 유형 제약 조건에 따라 누구나 덜 장황한 유형을 작성하는 데 도움이 될 것입니다.

이것은 기본적으로 우리(개발자)가 일부 조건이 충족될 때 "거짓"논리 경로로 즉시 이동하기 위해 JavaScript와 같은 언어에서 여러 번 사용하는 초기return 문 역할을 합니다.

4.7 이전

// A type that returns the First and Last elements of the Number type 

// 😔😔😔 This feels overwhelming...
type FirstAndLastNumber<T extends any[]> = T extends [
  infer Head,
  ...any,
  infer Tail
]
  ? Head extends number
    ? Tail extends number
      ? [Head, Tail]
      : never
    : never
  : never;

예정된 이 기능 이전에는 유추된 유형에 대해 "조기 확인"을 수행할 방법이 없었으며, 그로 인해 매우 장황하고 "무서운"유형을 생성하게 되었습니다. ❌

4.7 이후

// The "same" type as before 🤯🤯🤯
type FirstAndLastNumber<T extends any[]> = T extends [

// 1- Add the extends constraint here
  infer Head extends number,
  ...any,

// 2- Add the extends constraint here
  infer Tail extends number
] ? [Head, Tail]: never;

extends infer 유형 변수에 대한 제약 조건은 유추된 유형 변수에 의존하는 유형을 정의하는 프로세스를 실제로 단순화합니다. 이 기능은 구문 변경 이상으로 "실제 프로그래밍".

장점
1- 깨끗하고 덜 장황한 유형;
2- 다른 사람들이 이 "괴물"유형을 접할 수 있는 복잡성 장벽을 낮춥니다.
3- TypeScript 컴파일러는 더 일찍 반환할 수 있기 때문에 더 빠를 것입니다.

결론

TypeScript의 4.7 버전 새 기능을 활용하면 유형 정의의 복잡성을 크게 낮출 수 있으므로 누구나 쉽게 해당 유형을 이해하고 개발할 수 있습니다.

추신 TypeScript Playground에서 이러한 새로운 기능을 이미 사용해 볼 수 있습니다.


TypeScript 모범 사례나 일반적인 웹 개발에 대해 읽고 싶다면 저를 팔로우하세요!