이제 막 자바스크립트에 아주 조금 적응이 되고 있었는데 타입스크립트라니?
멘토님께서 자바스크립트 단점을 설명해주시면서 타입스크립트의 장점을 말씀해주셨지만
새로운 언어를 배워야한다는게 타입스크립트의 최대 단점같은데요...(?)
아직 프로젝트의 프 도 시작하지 못한 나에겐 대형 프로젝트에서 장점을 내뿜는 타입스크립트의 좋은 점을 잘 모르겠지만! 자바스크립트와 타입스크립트를 비교해서 살펴보고자 한다.
(이제 타입스크립트를 모르면 취업을 못한다는 어마무시한 이야기....)

1. Typescript란?

타입스크립트(Typescript)란 마이크로소프트에서 개발한 프로그래밍 언어로, 자바스크립트의 상위 집합이라고 할 수 있다.
확장자로 .ts를 사용하며, JSX를 포함하고 있는 경우 자바스크립트와 달리 .tsx로 따로 지정해줘야한다.

2. Typescript 특징

1) 객체지향 프로그래밍 환경 제공

class, interface 등 객체지향 언어에서 사용하던 키워드를 그대로 사용할 수 있다.
다만, 타입스크립트에서는 자바스크립트와 달리 다중 생성자를 선언할 수 없다.

2) 변수 타입 선언

타입스크립트에서는 변수의 타입을 선언한다. 변수 타입을 선언함으로써 안정성을 확보하여 string을 number로, number를 string으로 쓰는 불상사가 일어나지 않는다.

3) 자바스크립트로 컴파일 (compile)

타입스크립트가 동작되기 위해선 자바스크립트로 컴파일된다. 따라서 자바스크립트 대비 런타임이 느리다는 단점이 있다.

4) React와의 호환성

자바스크립트 프레임워크인 React는 Typescript와도 호환성이 높다. 따라서 JSX문법도 파일 확장자를 .tsx로 지정하면 문제없이 사용할 수 있다.

2. Javascript vs Typescript

Javascript

자바스크립트에서는 아래와 같이 number인 a와 string인 b를 곱해줘도 15가 출력된다.

const a = 3
const b = '5'
console.log(a*b)

Typescript

타입스크립트에서는 아래와 같이 a에는 number, b에는 string이라고 타입을 선언해줘야 한다. 따라서 결과적으로 계산이 작동되지 않거나 에러 메세지가 뜬다.

const a:number = 3
const b: string = 5
console.log(a*b)

3. Graphql과 Typescript

타입스크립트에서는 반드시 타입을 선언해줘야 하는데, Api를 적용할 경우 변수들을 전부 하나하나 타입 선언을 해줘야하나란 생각이 들 수 있다.
다행히 개발자들은 게으르기 때문에 rest-api는 안타깝게 변수를 일일히 선언해줘야 하지만, Graphql은 아주 고마운 graphql-codegen이 있다.

1) codegen 설치

graphql-code-generator 홈페이지에 들어가서 docs에 따라 설치하면 끝!

2) Typescript에서 활용

useState, useMutation, useQuery 부분에 <>를 활용하여 타입을 지정해주면 된다.
'Pick'을 활용하여 원하는 타입만 가져와 적어주면 된다.

const { data } = useQuery<Pick<Query,"fetchBoard">,QueryFetchBoardArgs>(FETCH_BOARD,{
		variables: {number:Number(router.query.mynumber)}
	})

<출처
https://medium.com/geekculture/typescript-vs-javascript-e5af7ab5a331
https://namu.wiki/w/TypeScript>