타입스크립트는 무엇이고 왜 써야하는가?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

공식홈페이지에 나와있는 설명만큼 좋은게 있을까 ?
타입스크립트는 자바스크립트의 수퍼셋이다.

간단히 말하자면 자바스크립트를 포함하며, 자바스크립트보다 엄격한 문법(타입)을 가지고 있지만 자바스크립트로 번역되어 보여진다고 할 수 있다.

왜 타입을 추가하는게 좋을까? 나는 왜 배울려고 했을까?

이 질문에 대한 답은 에러를 줄이기 위해서라고 답하고 싶다.

const plus = (a, b) => a+b;

라는 아주 쉬운 함수가 있다고 생각해보자.

plus();

라고 함수를 실행했을 때 자바스크립트는 어떻게 대답하는가 ?
NaN이다. 숫자가 아닌 undefined 끼리 더했으니 숫자가 아니라고 답할수밖에..
이런 경우의 대부분을 함수가 실행될때에 발견한다면 아주 큰 리스크를 가지고 코드를 실행하는 것이라고 생각한다. 그래서 실행되기 전에 해당 코드에 a라는 매개변수와 b라는 매개변수는 숫자인데 값이 누락되어있어. 채워줘라고 말해준다면 큰 리스크들을 줄여나갈 수 있지 않을까? 타입스크립트는 해당 고민을 완벽하게(때론 귀찮게) 해줄 친구다.

타입스크립트 기본

기본적으로 타입이 무엇인 지 알려주면 된다.

let a: string = "Helloooo!";

위와 같은 형태로 알려주는 것이다. a에 숫자나 문자열이 아닌 무언가가 들어가게 되면 타입스크립트는 경고를 날려줄것이다.

let a: string | number = "Hellooooo";
a= 1;

a가 숫자도 될 수 있다면 |를 통해서 알려주면 된다.

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

함수를 정의할 땐 매개변수들에 타입을 지정해주고, 매개 변수의 괄호 옆에 함수 리턴값의 타입을 적어주면 된다.

이제는 리액트에 적용해보자.

타입스크립트 리액트 프로젝트

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

해당 형태의 명령어는 my-app이라는 리액트 + 타입스크립트 프로젝트를 만들어준다.

jsx -> tsx 파일로, js -> ts 파일로 변경되어 있는 것을 확인할 수 있다.

함수와 클래스, state와 props

리액트의 특징이라면 함수형 컴포넌트와 클래스 컴포넌트가 있다는 점과 state, props를 통해서 데이터를 사용한다는 것을 들 수 있다. 각각 어떻게 타입을 지정할 수 있는 지 확인해보자.

class App extens Component<{}, {}> {
}

첫번째 중괄호는 props의 타입을, 두번째 중괄호는 state의 타입을 나타낸다. 직접입력해도 되지만 interface를 이용해서 입력해보자

interface는 미리 정의되어있지 않은 변수의 타입을 지정한 집합이라고 할 수 있다.

interface IAppState {
	num: number;
}

class App extends Component<{}, IAppState> {
	state = {
    	num: 0
    }
    
    ...
}

state안에 num의 타입은 숫자다. 그래서 숫자가 아닌 값이 들어가면 경고를 띄워줄 것이다. props도 정의되어 있다면 첫번째 {}에 넣어주면 된다.

함수형 컴포넌트는 state를 가지고 있지 않다. 그래서 저런 구분 없이 prop를 전달해주면 된다.

interface IAppProps {
	greeting: string;
};

const App: React.FC<>= ({greeting}) => (
	<div>{greeting}</div>
)

중요한건 함수형 컴포넌트 자체도 타입설정을 해줘야한다는 것이이다.
React.FC나 React.FunctionComponent으로 지정해주면 된다.

가장 특징적인 부분만을 한번 적어봤지만, 좀 더 공부를 해서 더 자세히 글을 남기고 싶다.