유틸리티 타입(1) : Partial / Required / Record / Readonly / Exclude
유틸리티 타입(2) : Extract / Omit / Pick / Parameters / NonNullable / ReturnType

출처) typescriptlang.org - Partial<Type>
출처2) TypeScript Utility Types Series' Articles

Extract<T, U>

• Union에 할당할 수 있는 모든 Union 멤버를 Type에서 가져와서 타입을 생성한다.
• Exclude 타입과 비슷한 느낌
  Extract<union타입명, 포함할 union타입 요소들>

union 타입에서 특정 요소들만 골라서 타입을 생성하고 싶다면 Extract 타입을 사용한다.

	type myUnionType = "a"|"b"|"c"|"d";

	let myFirstVar:Extract<myUnionType, "a"|"b"> = "a";

→ myFirstVar의 타입은 "a", "b"만을 포함한다.
⇒ myFirstVar는 "a" 또는 "b"만을 값으로 가질 수 있다!

• 만약 기존 union타입에 없는 값을 Extract 타입에 포함시킨다면?

	type myUnionType = "a"|"b"|"c"|"d";

	let myFirstVar:Extract<myUnionType, "a"|"b"|"x"> = "a";

→ "x"는 myUnionType에 없다..
⇒ myFirstVar는 여전히 "a", "b"만을 포함한다.

• Extract 타입을 써도 원래 기존 union타입에는 영향을 끼치지 않는다.

	type myUnionType = "a"|"b"|"c"|"d";

	//여기서 Extract 타입을 사용해도
	let myFirstVar:Extract<myUnionType, "a"|"b"|"x"> = "a";

	//myUnionType은 바뀌지 않는다.
	let mySecondVar:myUnionType = "str";

Extract 타입은 union타입의 요소들 중에서 제한을 걸고 싶을 때 유용하게 사용할 수 있다.

---

Omit

• Type에서 모든 프로퍼티를 선택하고 키를 제거한 타입을 생성한다.
  Omit<타입명, 제외할요소들>

User타입에서 age와 lastActive를 제외한 새로운 타입을 지정할 수 있다.

  type User = {
      firstName: string;
      lastName: string;
      age: number;
      lastActive: number;
    }

  type UserNameOnly = Omit<User, "age" | "lastActive">

→ Omit 타입에서 제외할 요소들을 지정하면 해당 요소를 제외한 User타입을 사용할 수 있다!
⇒ UserNameOnly 요소는 firstName과 lastName만 있다.

• 사용 예시

  type User = {
    firstName: string;
    lastName: string;
    age: number;
    lastActive: number;
  }

  //UserNameOnly타입은 firstName, lastName만을 가진다.
  type UserNameOnly = Omit<User, "age" | "lastActive">

  //UserNameAndActive타입은 User타입에서 age만을 제외한 나머지 요소를 가진다.
  type UserNameAndActive = Omit<User, "age">

  const userByName:UserNameOnly = {
      firstName: "John",
      lastName: "Doe",
  };
  const userWithoutAge:UserNameAndActive = {
      firstName: "John",
      lastName: "Doe",
      lastActive: -16302124725
  }

---

Pick <U,T>

• Type에서 프로퍼티 Keys의 집합을 선택해 타입을 생성한다.
• 특정 type에서 사용할 요소들만 선택해서 새로운 타입을 만든다.
  Pick<타입명, 사용할 요소1 | 사용할 요소2 | ...>

	type User = {
      firstName: string,
      lastName: string,
      age: number
	}
	// UserName 타입은 User타입에서 firstName과 lastName을 요소로 가진다.
	type UserName = Pick<User, "firstName" | "lastName">

	let user:UserName = {
      firstName: "John",
      lastName: "Doe"
	}

---

Parameters

• 함수 타입 Type의 매개변수에 사용된 타입에서 튜플 타입을 생성한다.
  Parameters<typeof 함수명>

  const myFunction = (a: string, b: string) => {
      return a + b;
  };
  
  //passArray 변수에 튜플을 정의했다.
  let passArray:[string, string] = [ 'hello ', 'world' ];

  // myFunction에 spread연산자를 사용해 실행하였다.
  myFunction(...passArray); // hello world

• 만약 myFunction이 변경된다면 passArray 변수에 정의한 튜플도 바뀌어야 한다.
• Parameters 타입을 사용하면 함수 매개변수의 타입에 따라 자동으로 튜플이 정의된다.

  type myType = Parameters<typeof myFunction>
  // type myType = [ a: string, b: string ]
  
  let passArray:myType = [ 'hello ', 'world' ];
  myFunction(...passArray // hello world

• Parameters 타입은 각 요소의 타입을 각각 지정할 수도 있다.

	const myFunction = (a: string, b: string) => {
    return a + b;
    };

    type aType = Parameters<typeof myFunction>[0];
    type bType = Parameters<typeof myFunction>[1];

    let a:aType = 'hello '
    let b:bType = 'world'

    myFunction(a, b) // hello world

• 함수를 직접 전달해서 타입을 생성할 수 있다.

	type anotherType = Parameters<(a: string, b: number) => void>

---

NonNullable

• Type에서 null과 undefined를 제외하고 타입을 생성한다.
  NonNullable<Type명>

	type myType = string | number | null | undefined;

	type noNulls = NonNullable<myType>;

---

ReturnType

• 함수 Type의 반환 타입으로 구성된 타입을 생성한다.
  ReturnType<typeof 반환값이 있는 함수명>

	function sendData(a: number, b: number) {
      return {
          a: `${a}`,
          b: `${b}`
      }
}

• sendData 함수는 숫자 두개를 받아서, 각 숫자를 문자열로 변환해 값을 리턴한다.
• sendData 함수에서 리턴한 값들의 타입으로 구성된 type을 만들고 싶다면 아래와 같이 직접 만들 수 있다.

  function sendData(a: number, b: number) {
      return {
          a: `${a}`,
          b: `${b}`
      }
  }

  type Data = {
      a: string,
      b: string
  }

  function consoleData(data:Data) {
      console.log(JSON.stringify(data)); 
  }

  let stringifyNumbers = sendData(1, 2);
  //stringifyNumbers에 sendData의 리턴값을 담는다.
  // a: "1"
  // b: "2"

  consoleData(stringifyNumbers);
  //stringifyNumbers를 consoleData함수의 인자로 넘긴다.
  //결과 : {"a":"1","b":"2"} 

• consoleData함수는 인자가 Data타입을 가지므로 인자가 숫자일 경우에 에러가 난다.
• 만약 sendData 함수가 변경된다면? Data 타입을 직접 수정해야 한다.
  이럴 때 사용하는 타입이 ReturnType 타입이다.

	function sendData(a: number, b: number) {
      return {
          a: `${a}`,
          b: `${b}`
      }
    }
    type Data = ReturnType<typeof sendData>
    // type Data = {
    //     a: string,
    //     b: string
    // }

• Data 타입은 sendData의 리턴값의 타입을 가지게 된다.
  수동으로 sendData함수가 바뀔 때마다 수정하지 않아도 된다!
  

---

피드백은 언제나 환영입니다!