Typescript

니니·2023년 5월 2일

React Masterclass 수강기

목록 보기

2/4

#3.0~3.7

Typescript

Typescript란 Javascript를 기반으로 한 strongly-typed언어이다.
말 그래도 데이터 타입에 좀 더 신경을 쓰는 언어라고 이해하면 쉽다.

기존 자바스크립트는 데이터의 타입까지는 신경쓰지 않는다.
하지만 개발자들의 실수를 줄이기 위해, 타입스크립트는 코드를 실행하기 전에 데이터의 타입을 구분한다.

타입스크립트 언어

const plus = (a:number, b:number) => a+b

이런 식으로 데이터의 타입을 선언해주어야한다.

설치

우리는 리액트와 타입스크립트를 함께 사용한다.
타입스크립트만 사용한다면 npm i typescript 부터 시작해서 쭉 설정해주면 되는데, 이 경우는 달리 설치해줘야한다.

만약 작성해뒀던 리액트 파일이 있다면, 다 삭제하고 typescript를 설치한 후 다시 작성하는 방법과 그대로 두고 설치하되 직접 파일이름을 바꿔주는 등 후속 작업이 필요한 방법이 있다.

npx create-react-app my-app --template typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

또한 타입스크립트의 확장자는 ts이지만 리액트와 함께 사용시에는 tsx가 된다. 때문에 기존의 App.js와 index.js의 확장자를 tsx로 변경해준다.

그 후 npm start를 다시 실행해보면 tsconfig.json 파일이 자동으로 설치가 되는 경우가 있고, 아닌 경우가 있다. (내 경우는 안됨)

npx tsc --init	//tsconfig.json 파일 생성

이후 tsconfig.json 안의 jsx:"react-jsx"를 추가해준다.
다음 index.js에서도 수정

const root = ReactDOM.createRoot(document
.getElementById("root")as HTMLElement);

//as HTMLElement만 추가해준 것

이러면 타입스크립트 설치는 완료가 되었지만 타입스크립트는 styled-components가 뭔지 모르기 때문에 알려주어야 한다.

npm i --save-dev @types/styled-components

🚫Error🚫
실행하면 잘 돌아가야하는데 나는

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve

라는 에러가 떠버렸다.

해결방법

pack.json의 dependencies에다가

"@types/styled-components":"^5.1.15"

추가 후

npm install --legacy-peer-deps

를 해보래서 했는데, styled-component는 설치가 어찌저찌 되었다.

그런데 App.tsx안의 app(){ return(~~)} 이 안에 있는 것들 에러가난다.(~~ 부분)

🚫 'React'은(는) UMD 전역을 참조하지만 현재 파일은 모듈입니다. 대신 가져오기를 추가해 보세요.ts(2686)

찾아보니 타입스크립트와 리액트의 버전문제인것 같다.

1) typescript(ver 4.1 이상), react 및 react-dom(ver 17) 버전 확인하기
2) tsconfig.json 파일에 들어가서 complierOption에서 jsx 속성을 다음과 같이 설정해주기

2번 조건은 있는데, 1번의 버전이 아무래도 4.1 이하나 17버전 이하인 것 같다.

import React from "react";

일단 추가로 해결..

근데 npm start 했더니 노드의 버전이 문제랜다
제발 살려주세요...이 에러의 늪...

🚫 error:0308010C:digital envelope routines::unsupported

이 에러가 노드 버전이 문제라길래 다운그레이드를 해주는데

brew unlink node  //노드와의 연결 해제
brew install node@16 //원하는 버전 설치
brew link node@16 //설치한 버전 연결

echo 'export PATH="/opt/homebrew/opt/node@16/bin:$PATH"'
//필요하면 설치

했는데도 버전이 문제라길래 열받아서
pakage-lock.json 파일과 node.module파일 삭제 후, 다시 npm i로 다운로드 해주고 npm start 하니까 된다.

❔ 잘은 모르겠으나 아마 노드를 다운그레이드 시켜준 뒤에 pagake-lock.json를 업데이트 해줬어야 했나보다.

애초에 pakage-lock.json 파일 삭제하고 다시 깔았으면 됐을까 싶다.

일단해결!!

@types

위에서 주구장창 썼던 @types는 무엇일까?

@types란 DefinitelyTyped라는 아주 큰 깃허브 레퍼지토리인데, 모든 유명한 npm 라이브러리를 가지고 있는 저장소이다.

여기서 TypeScript로 작업할 때 필요한 대부분의 라이브러리나 패키지의 type definition을 얻을 수 있다.

Interface

Interface란 object shape(객체모양)을 Typescript에게 설명해주는 Typescript의 개념이다.

props와 다른 점은 코드를 실행하기 전에 객체 모양의 오류를 알려준 다는 점이다.

🚫이놈의 에러는 끝이 없구나🚫

react is not definded

라고 떴는데, 다.. react import해줘야해서 그런것이다.
모든 파일에 react import 잊지말기.

Props required & optional

props는 기본적으로 required 상태이다.
optional 상태로 바꾸기 위해서 설정시 ?만 붙여주면 된다.

interface CircleProps {
	bgColor: string;
    borderColor?: string;
 }
 
 //bgColor는 required이기 때문에 설정해주지 않으면 에러가 발생하고
 borderColor는 optional이기 때문에 설정해주지 않아도 에러 발생 X

만약 optional로 설정할 경우 default값을 주고 싶다면 두 가지 방법이 있다.

1번: ?? 사용하기
function Circle({ bgColor, borderColor }: CircleProps) {
    return <Container bgColor={bgColor} borderColor={borderColor ?? "white"}/>;
}
// ??가 안되는 경우 ||를 쓰면 된다. (삽질할뻔)

2번: ES6 문법을 사용해 설정(typescript 문법이 아님)
function Circle({ bgColor, borderColor="white" }: CircleProps) {
    return <Container bgColor={bgColor} borderColor={borderColor}/>;
}

state default type

typescript와 state 사용 시, state의 데이터 타입을 설정할 수 있다.
보통 초기값을 줄 때 Number이면 계속해서 데이터 타입이 number이지만, 아주~~~ 간혹 달라질 때가 있기 때문에 두 가지 타입으로 설정이 가능하다.

const [counter, setCounter] = useState<number|string>(0);

Form

function App() {
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: {value}
    } = event;
    setValue(value);
  };
 
  return <div>
<form>
  <input value={value} onChange={onChange} type="text" placeholder="username" />
</form>
  </div>;
}

React.FormEvent<HTMLInputElement> : 'ReactJS에서 Form에서의 event가 input element에 의해서 실행된다' 고 타입스크립트에게 알려주는 것이다.

typescript와 theme

typescript와 styled를 함께 사용하기

@types/styled 설치

npm install @types/styled-component

declaration(선언) 파일 만들기
파일 확장자 이름이 d.ts인 파일을 생성한다.

import 'styled-components';

declare module 'styled-components' {
    export interface DefaultTheme {
        
        textColor: string;
        bgColor: string;
        
        };
    }

그 안에 이제 styled-components에서 DefaultTheme interface를 확장해서 사용하겠다고 선언해준다.