[TS/React] React에서 TypeScript 사용하기 (기초)

 

* 참고로 타입스크립트 실행 - 터미널 명령어는

ts-node  TS파일명.ts 

 

 

* 함수에서 TS 사용하는 법

다음과 같이 함수에서 ts를 사용할 수 있다. 

2가지 방법! 

각각의 인자에 콜론 ( :) 뒤에 타입을 명시해준다.  또한 리턴내용에 대한 타입도 인자를 묶은 소괄호 ( ) 뒤에 명시

function sum(a: number, b: number): number {
  return a + b;
}

function objSum({ a, b }: { a: number; b: number }): string {
  return `${a + b}`;
}

 

 

 

* 비동기함수에서 TS 사용하는 법

그런데 async가 붙은, 비동기함수라면?

그냥 함수 방식대로 함수 선언부에 타입만 써줘서는 에러가 뜬다. 

비동기함수는 Promise를 반환하므로, 리턴 타입도 Promise < > 제네릭으로 감싸준다.

(혹은 return문에 타입을 써줄 수도 있다. as 를 써서)

type Person = { id: number; age: number; height: number };

async function getPerson(): Promise<Person[]> { // 리턴타입을 Promise로 감싸주기
  const res = await fetch(`http://localhost:5008/people`);
  if (!res.ok) {
    throw new Error();
  }
  return res.json(); // 혹은 (함수선언부에서 Promise로 감싸지말고) 여기 뒤에 as any as Person[]  으로 써줄 수도 있다
}

getPerson().then((res) => console.log(res[0]));
// 예시) console.log(res[0])  => 콘솔에 {id:1, age:25, height:179} 가 찍힘

 

 

* Generic <T> 를 사용해 데이터 타입을 일반화(Generalize) 하기

제네릭을 사용해 타입을 변수화할 수 있다.

여기서 T 는 꼭 T여야 하는 것은 아니고 다른 문자여도 되는데, 보통 type의 의미로 t가 많이 쓰인다.

제네릭을 타입 생성할 때도, 함수에서도 사용 가능

type Generic<T> = {  // 타입을 외부에서 받아서 T -> 
  someValue: T; // 내부에 T 를 넣어줄 수 있다
};

type Test = Generic<string>; // 즉, type Test = {someValue: string} 이 됨
// 타입을 생성할때, 원하는 타입을 인자로 받아서 넣어줌.


// 함수에서도 다음과 같이 제네릭을 사용 할 수 있다
// 제네릭은,  <..> 꺽새 안에 넣어둔 타입을 옆에 (value: .. ) 에도 넣어줌으로써 타입을 일반화!
function someFunc<T>(value: T) {} // <T>(value: T) - 왼쪽t가 오른쪽 t에 쏙 들어간다고 생각해보자

someFunc<string>("hello"); // function someFunc<string>(value: string)

 

 

 

* useState 에서 사용하기

아래의 경우처럼 useState<number>(1)  , 초기값과 함께 <number>라고 타입을 명시해줄 수 있다.

 

1) 

그런데 원시값(number, string)의 경우, useState의 초기값만 써줘도 (타입 명시없어도) 

그 초기값에 맞게 타입이 설정된다

 

예를 들어 초기값이 숫자로 들어간 경우, 꼭 <number>라고 타입 명시하지 않아도 number로 타입 자동 설정됨

(즉 useState(1) 이라고만 써도 된다)

(문자열의 경우 useState<string>("") 이라고 쓸 수도 있고, useState("") 만 써도 알아서 string 타입으로 설정)

 

2) 

반면, 참조값(객체{ }, 배열[ ])은 어떠한 아이템이 담겼는지 알 수 없기 때문에 추론이 불가능하여

타입을 직접 지정해줘야 함!

 

3) 

또한 useState의 초기값에 아무것도 안넣고 타입만 명시해버리면, (ex.   useState<string>()    )

명시된 타입과 함께 undefined 도 함께 타입에 뜨니

초기값에 뭐라도 넣어주도록 하자. (string 이라면 "" 빈 문자열이라든지..)

import { useState } from "react";

function App() {
  const [counter, setCounter] = useState<number>(1); 

  const increment = () => {
    setCounter((prev) => prev++);
  };
  return <div onClick={increment}>{counter}</div>;
}

export default App;