[타입스크립트 Typescript] 강의정리_프로젝트 생성, 함수에서 타입사용하기, 제네릭, 스테이트

• React CRA와 TS 한 번에 설치하기
• Type과 Interface
• 함수에서 TS 사용하기
• 비동기 함수에서 TS 사용하기_1
• 비동기 함수에서 TS 사용하기_2
• Generic (제네릭)
• useState에서 사용하기

---

React CRA와 TS 한 번에 설치하기

npm	yarn
npx create-react-app my-first-ts-app --template typescript	yarn create react-app my-first-ts-app --template typescript

 

pretty type error

 

pretty type error

TypeScript 오류를 읽기 쉽게 만들어주는 VSCode 플러그인

 

 

---

Type과 Interface

 

Type

• type은 새로운 타입을 정의하는 데 사용된다
• 새로운 타입을 만들거나 타입을 결합하거나 변환할 때 사용된다
• Person type을 Typexcript의 Readonly를 사용하여 객체의 모든 속성을 읽기 전용으로 변환한다
• ReadonlyPerson type으로 결합해 준다(할당)

type Person = {
  name: string;
  age: number;
};

type ReadonlyPerson = Readonly<Person>;

 

 

interface

• 객체의 구조를 정의하는 데 사용된다.

interface Person {
  name: string;
  age: number;
}

 

 

결론 

Interface는 객체의 구조를 설명하는 데 사용되고

Type은 객체의 타입을 변환하거나 결합하는 데 사용된다 

---

함수에서 TS 사용하기

• 파라미터로 넘기는 인자 부분, 리턴 부분의 타입을 지정할 수 있다
• 객체형태가 아닌 각각의 인자에 타입 지정 시 인자 : 타입으로 작성한다
• 인자를 감싸는 ( ) 뒤에는 리턴값의 타입을 지정하면 된다
• 객체 타입의 인자를 타입 지정할 땐 인자와 타입 모두 객체 형태로 감싸준다 {인자} : {인자 : 타입}
• 인자는 숫자타입인데 리턴값이 문자열이므로 에러를 방지하기 위해 탬플릿 리터럴을 이용하여 반환한다
• ex  a는 3 , b는 2인 경우  5 : string의 결과가 출력된다

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

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

---

비동기 함수에서 TS 사용하기_1

• 비동기 함수의 반환 타입을 지정해 주지 않으면 return 값인 res는 모든 타입인 any로 나온다
• 함수의 결괏값을 타입으로 선언해 주면( Person ={id, age, height} ) 코드가독성 및, 타입안정성을 확보할 수 있다 
• 함수의 반환 타입을 제네릭을 사용하여 명시적으로 Person [ ]으로 지정해 주면 return값인 res는 코드인텔리전을 사용하여 배열 메서드, 배열 속성 등을 확인할 수 있다

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

async function getPerson(): Promise<Person[]> {
  const res = await fetch(`http://localhost:5008/people`);
  if (!res.ok) {
    throw new Error();
  }
  return res.json();
}

getPerson().then((res) => console.log(res[0]));

 

비동기 함수에서 TS 사용하기_2

• 위 코드처럼 제네릭을 사용하지 않고, return 값에 as로 타입을 지정해 줄 수도 있다.
• as any를 사용하여 일단 모든 유형을 허용한 후, 그것을 다시 Person [ ]로 형변환하는 것
• 하지만 가독성이 떨어지기 때문에 위 방법을 추천함

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

async function getPerson() {
  const res = await fetch(`http://localhost:5008/people`);
  if (!res.ok) {
    throw new Error();
  }
  return res.json() as any as Person[]
}

getPerson().then((res) => console.log(res[0]));

---

Generic (제네릭)

• type을 변수화 하여(선언만 하고 값을 부여받지 않은) 사용 시점에 타입이 지정된다
• 외부에서 타입을 주입받아 타입을 부여한다
• 함수 또는 인터페이스의 타입을 미리 지정하지 않고, 호출 시점에 타입을 지정해 주는 것
• 같은 함수나 인터페이스를 다양한 타입에 대입해 사용할 수 있으며, 재사용성을 높일 수 있다
• <T>는 제네릭 타입 매개변수이며 어떤 문자를 사용해도 상관없으나 가독성을 위해 T를 사용한다

 

type으로 Generic 사용 시

• 타입이 정의되지 않은 Data 객체를 type으로 선언한다 (제네릭 타입)
• Data 객체에 타입이 정의되지 않은 someValue 속성이 있다 
• Data객체와 someValue 속성 모두 매개변수 <T>에 어떤 타입이든 정의될 수 있다
• Test type 선언, Test는 Data 객체의 someValue 속성을 가지며 string 타입이다
• Test type으로 string 타입을 부여받았으므로 Data 객체와 속성은 Test type 호출 시 string 타입을 가지게 된다
• Test 호출 시에만 Data 객체 타입이 string인 것, 그냥 Data type 호출 시 타입은 정의되지 않음

// 제네릭(generic)이란 데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미합니다.
type Data<T> = {
  someValue: T;
};

type Test = Data<string>;

 

함수로 Generic 사용 시

• someFunc  함수와  인자 value의 타입은 제네릭으로 선언되어 명확한 타입이 지정되어있지 않다
• 함수 호출 시 <string> 타입을 주입하여 someFunc  함수와  인자 value는 string 타입으로 호출되며 ()에 문자열 외 다른 타입을 입력할 경우 타입에러가 발생한다

function someFunc<T>(value: T) {}

someFunc<string>("hello");

---

useState에서 사용하기

• useState뒤에 제네릭으로 타입을 명시해 주거나, 초기값을 넣어줄 경우 타입이 지정된다.
• 제네릭으로 타입명시를 해주고 초기값을 입력해주지 않으면 타입 | undefined 타입이 된다
• 제네릭 타입과 다른 타입의 초기값을 입력할 경우 타입 에러가 발생한다
• state의 값 변경 시 지정된 타입 외 다른 타입의 값을 넣을 경우 타입 에러가 발생한다

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;