본문으로 건너뛰기

2.14~2.19README

제네릭을 타입으로 함수처럼 사용하자​

  • 자바스크립트 값에 중복이 발생하면 함수를 만들어 중복을 제거하곤 한다. 마찬가지로 타입도 가능하다.
interface Zero {
  type: "human";
  race: "yellow";
  name: "zero";
  age: 28;
}

interface Person<N, A> {
  type: "human";
  race: "yellow";
  name: N;
  age: A;
}
  • 제네릭을 이용할 시 타입 인수 개수가 일치하지 않으면 에러가 발생한다.
  • 클래스와 타입 별칭, 함수도 제네릭을 가질 수 있다.
  • 선언문이냐 표현식이냐에 따라 제네릭 표기 위치가 다를 수 있다.
      const personFac = <N,A>(name:N, age:A)=>({
          type:"human",
          race: "yellow",
          name,
          age,


    })

    function personFactory<N,A>(name:N, age:A){
        return ({
            type:"human",
            race: "yellow",
            name,
            age,
        })
    }


  • 타입 매개변수에는 기본값을 사용할 수 있다.
interface IPerson<N = string, A = number> {
  method: <B>(param: B) => void;
}

제네릭에 제약 걸기​

  • 타입 매개변수에느 제약을 사용할 수 있다.
interface Example<A extends number, B = string> {
  a: A;
  b: B;
}
// 제약이 걸린다.
const x = Example<string, boolean>;
  • 타입매개변수와 제약조건의 차이를 잘 구분해야한다.
{
   interface V0{
       value: any;
   }

   const returnV0 = <T extends V0>():T => {
       return {value :'test'};
   } // {value:string , another : string}도 T가 될수있음.

   function onlyBoolean<T extends boolean>(arg:T = false):T{
       return arg;
   } //error T는 never일수도 있으므로 오류발생

    function onlyBoolean(arg: true |false = true){
       return arg;
   } //제너릭을 사용하지 않으면 오류해결

   const f = ():V0 =>{
   	return {value:"test"}
   }

조건문과 비슷한 컨디셔널 타입이 있다.​

  • 타입스크립트에서는 조건에 따라 다른 타입이 되는 컨디셔널 타입이 존재한다.

type A1 = number
Type B1 = Al extends number ? number : string
  • 위 코드는 A1이 number일때 B1이 number타입이 되는 형식이다.
  • 타입 검사에도 많이 사용한다.

컨디셔널 타입 분배 법칙​

type Start = string | number; // 여기서 string[] 타입을 얻고 싶을때
type Result = Start extends string ? Start[] : never;
type Result<Key> = Key extends string ? Key[] : never; //Key 들이 string을 extend하면 ? string[]로 변환

let n: Result<Start> = ["hi"]; // string[]
  • 제네릭을 활용하면 타입 분배법칙을 이용해 Result<string| number>가 아닌 Result<string> | Result<number>가 된다
  • 분배를 막고싶으면 제네릭을 []로 막으면 된다.

함수매서드 타이핑​

function example3(...s: string);
function example4(...args: [a: number]);
  • 나머지 배개변수는 항상 배열이나 튜플로 사용해 전개 문법을 활용할 수 있따.
  • 나머지 매개변수 문법은 반드시 마지막 자리에 위치해야한다.

같은 이름의 함수를 여러번 선언할 수 있다.​

function add(x: string | number, y: string | number);
add(1, 2); //3
add("1", "2"); //12
add("1", 2); // 안됨
  • 이 떄 오버로딩을 활용할 수 있다.
function add(x: string, y: string);
function add(x: number, y: number);
  • 오버로딩 순서에 따라 값이 변할수 있으니 좁은 -> 높은순으로 선언해야한다.

콜백함수의 매개변수는 생략 가느앟다.​

  • 기본적으로 함수 매개변수에는 타입을 넣어야하지만 콜백일 경우 표기하지 않아도 된다.
  • 콜백함수의 매개변수는 문맥적 추론을 통해 타입을 알 수 있다.

공변성과 반공변성을 알아야 함수끼리 대입을 할 수 있다.​

  • 공변성(Covariance) : A가 B의 서브타입이면, T<A>는 T<B>의 서브타입이다.
  • 반공변성(Contravariance) : A가 B의 서브타입이면, T<B>는 T<A>의 서브타입이다.
  • 이변성(Bivariance) : A가 B의 서브타입이면, T<A> → T<B>도 되고 T<B> → T<A>도 되는 경우
  • 불변성(immutability) : A가 B의 서브타입이더라도, T<A> → T<B>도 안 되고 T<B> → T<A>도 안 되는 경우
  • 기본적으로 ts는 공변성이지만 함수의 매개변수는 반공변성을 갖는다.
  • 다만 반환값은 공변성을 가진다.
  • 다만 이 요소는 strictFunctionTypes모드를 활성화해야한다.