[React 09] - Typescript

🗿 오늘의 목표

1. 더 안전한 Typescript
2. 기존의 Javasript에 Typescript 코드를 추가하자.

---

실제 실무에서는 자바스크립트만 사용하지는 않는다.Typescript를 같이 사용한다.
자바스크립트만 사용했을 때는 버그를 찾기 어렵다거나 버그가 어디서 튀어나올지 모르는 문제가 생긴다. 그래서 어느정도 규모의 서비스를 만들게 되면 단순히 자바스크립트만 사용하는 것이 아니라 타입스크립트도 같이 사용하게 된다. 이제 이 타입스크립트에 대해서 알아보자.

---

1. 더 안전한 Typescript

Typescript란 자바스크립트의 타입을 강제시키는 언어이다

자바스크립트가 아닌 다른 언어들은 문자열이 들어갔던 상자라면 다른 타입이 들어가면 안된다.

자바스크립트에서 이것을 제어해주는 것이 바로 타입스크립트이다.

그렇다면 왜 타입스크립트를 쓰는 것일까?

큰 서비스를 만들게 된다면 수많은 사람들이 소스코드를 수정할텐데 에러들이 계속 나올텐데 이를 안정적이게 해주기 위해서 vscode 자체에서 막아줄 수 있다. 추가적으로 입력할게 많지만 그래도 타입스크립트는 필수다.
실제 코드를 실행할 때는 타입스크립트는 없어지고 자바스크립트가 실행되는 것이다.

타입스크립트는 어떻게 작성할까?

일반적인 변수들을 이렇게 선언해주면 된다.

객체는 Interface라고 해서 객체 타입을 따로 지정해준다. 이 타입의 이름은 짓기 나름이지만 관례상 Interface의 I와 변수명을 합쳐서 사용한다.

2. 기존의 Javasript에 Typescript 코드를 추가하자.

우선 타입스크립트를 설치하고 설정파일을 만들어 줘야한다.

[1] 타입스크립트 설치하기

https://www.typescriptlang.org/download

yarn add typescript --dev

--dev로 설치하면 devDependencies로 vscode에서 개발을 위한 용도로 설치함

[2] 설정파일 만들기

tsconfig.json 파일을 만들어준다.
안에 내용들을 넣어중어야 하지만 next.js를 쓰면 yarn dev만 해도 이 파일이 자동으로 세팅된다.

1. yarn dev
2. yarn add --dev @types/node

---

yarn dev를 하면 저런 화면이 뜰 것이다.
파란 글씨를 복붙 하자.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content
next.js 를 쓰지 않는다면 위 링크를 참고하자.

다음처럼 tsconfig.json 이 채워지면 성공이다!

내 tsconfig.json 파일이다.

"skipLibCheck" - 라이브러리의 타입은 넘길 것인가 
"strict": true - 엄격하게 관리할 것인가
"include" - 어떤 파일을 포함할 것인가

---

이제 파일 확장자명을 ts, tsx로 바꿔서 사용하게 되면 타입스크립트를 검증해줄 것이다.

여기서 x는 eXtensible Markup Language 확장가능한 마크업 랭귀지를 의미하는 XML의 x를 의미한다. 이는 HTML이랑 똑같이 만든 언어이다. 이름은 같지만 작동하는 방식은 다르다. 옛날에는 XML형태로 데이터를 주고 받곤 했다.

이 XML이 있는 파일을 tsx, 없는 파일을 ts로 고치면 된다.

타입 추론

아래처럼 확장자 명만 바꿔도 tsconfig.json에서 이 파일을 읽고 타입을 추론해서 에러를 자동으로 띄워준다.

타입 명시

직접 타입을 명시 해줄 수도 있다.

• number[] - 숫자들이 들어가는 배열

• (number | string)[] - 숫자나 문자들이 들어가는 배열

• |, & - 타입스트립트에서 사용하는 또는 과 그리고

• ? : 있어도 되고 없어도 된다

  • ?가 없으면 반드시 있어야 한다.

• 함수의 경우는 받는 쪽에서 타입을 결정한다.

  • return 값의 타입은 마지막에 적어준다.

• 함수 자체의 타입은 () => void 이고, return 해주는 것이 없으면 void 써주면 된다.

• 매개변수가 있다면 매개변수 타입도 적어줘야 한다.

  • ex) onChange - ChangeEvent<HTMLInputElement>
  • 

• 타입과 실제 태그의 종류를 맞춰줘야 한다.

• 스타일에 타입주기
  

  
  

• 객체에 타입주기
  

  • 필요한 것만 있으면 되므로 물음표를 붙여주었다.

• Props 타입주기
  
  • container에서 쓰이고 있는 함수를 봐야한다.

• 포함 되어 있지 않는 정보를 포함시키기 (타입 추론이 안될 때)
  if(event.target instanceof Element) 추가해주기
  만약에 event.target이 해당하는 태그의 자식이라면

_app.js에 Typescript 적용하기

(+) 추가 기능

타입스크립트를 사용하면 앞으로 들어갈 수 있는 값들을 미리 알려준다.