🔹 리액트 프로젝트에 타입스크립트 설치하기

🔶 타입스크립트 설치

🔹 기본설치

yarn add –g typescript //현재 컴퓨터에 설치
yarn add typescript //로컬로 설치(현재 위치의 폴더에 설치)

🔹 리액트 프로젝트에 타입스크립트 설치하기

// 기존에 있는 react에 설치하기.
yarn add --save typescript @types/node @types/react @types/react-dom @types/jest

//새로운 리액트 프로그램 타입스크립트로 시작하기
npx create-react-app my-app --template typescript

🔹 패키지 설치하기

 yarn add styled-components @types/styled-components

🔶 타입스크립트 기본 문법

🔹 기본 타입

• Boolean
• Number / String / Object / Array
• Tuple
• Ennum
• Any
• Void
• Null / Undefined / Never

🔹 타입 설정

◻ 변수에 타입 설정

//string으로 타입설정
const name:string= 'eunsu'

변수 타입에 맞지 않았을 경우, 애러가 남.

 let age:number = 30;
 age ="서른살"

할당된 타입과 다르다는 애러가 뜬다! 신기해잉

◾ 변수 => 배열, 오브젝트 element

 // 배열, 오브젝트 안 element 타입설정.
let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : number }

◾ 변수 => 여러가지 데이터 타입 설정

 // text 의 데이터 타입은 number거나 string
 let text: number | string = "Hello World";

◾ 변수 => type변수로 데이터 타입 설정

이걸 literal type이라고 함.

  	type nameType = number | string;
    const name:nameType = "Joo Eunsu"

◻ 함수에 타입 설정

◾ 함수 => parameter 타입 설정

   const plus = (a: number, b: number) => {
    return a + b;
  };
  console.log(plus(3, 5)); //8

◾ 함수 => parameter 타입 설정 심화

    const test = (a: number | string) => {
    return a *3;
  };
  //error ! type설정 해야 함.
    const test = (a: number | string) => {
    if (typeof a === "number") {
      return a * 10;
    }
  };

어느정도 살짝 감은 잡힌다. 타입을 다 설정해 줘야 하는고만,,,