[typescript] 제네릭

1. 제네릭(generic)

제너릭은 데이터 타입을 일반화(변수화)하는 것을 말한다.
타입을 생성할 때 원하는 타입을 인자로 받아 넣어준다.

일반 자바스크립트에서 text 파라미터를 통해 어떤 값이
들어가도 그대로 반환을 해주었다.

function getText(text) {
  return text;
}
getText('hi'); // 'hi'
getText(10); // 10
getText(true); // true

위 함수를 제너릭 형태로 변경해보자.
이제 함수를 호출할 때 함수 안에 사용할 타입을 넘겨줄 수 있다.

function getText<T>(text: T): T {
  return text;
}
getText<string>('hi');
getText<number>(10);
getText<boolean>(true);

➡️ <> 안에 지정한 타입은 모두 함수에서 선언한 T에 들어가게 된다.

제너릭으로 string 타입을 설정한 경우, 아래와 같이
타입이 설정된다.

function getText<string>(text: string): string {
  return text;
}

비동기 함수일 때 Promise <타입명>을 통해 반환 타입을 지정해야한다.

type Todo = {id:number,todo:string,isDone:boolean};

async function getTodos():Promise<Todo[]>{
   const res = await fetch('todo json-server주소');
   return res.json();
}

getTodos().then((res) => console.log(res));

2. useState 사용하기

useState를 사용할 때 <>안에 원하는 타입을 지정하면 된다. 만약 setCount('1')로 설정하면 숫자 타입과 맞지 않다고 알려준다.

또한 원하는 타입을 지정하지 않아도 초기값을 설정하면
알아서 타입을 추론해준다.
만약 초기값을 따로 설정하지 않으면 count 변수는
undefined | number 타입으로 설정된다.

export default function App() {
  const [count,setCount] = useState<number>(0); //useState(0)도 가능 
  const handleAdd = () => {
    setCount(prev => prev+1);
    }
  return (
    <div onClick={handleAdd}>
    {count}    
    </div>
  );
}

<props로 데이터 전달하기🫱🫲>
전달받는 컴포넌트에서 따로 타입을 지정해주면 된다. 만약 따로 지정하지 않으면 전달받은 데이터는 any 타입을 가지게 되어 타입을 지정해달라는 오류를 보여준다.

function Parent() {
  const [num,setNum] = useState<number>(1);
  return <Child num = {num}></Child>;
}

type Props = {num:number}

function Child({num}:Props){
   return <div>{num}</div>;
}

👉 전달받는 props 데이터가 여러개일 경우, type명에 따로 타입을 정해주는 것이 좋다.

3. Utility Type

Omit <타입명,속성명> : 특정 속성을 제외한 타입으로 생성
Pick <타입명,속성명> :원하는 속성만 가져올 때 사용
(유니언 연산자 가능)

만약 여러 개의 속성을 제외 또는 가져오고 싶으면
Omit <타입명,속성1|속성2|속성3> 와 같이
유니언 타입으로 작성 가능하다.