✔ 타입스크립트란 ?
자바스크립트는 타입 시스템이 없는 동적 프로그래밍 언어로 약한 타입 언어라고 표현할 수 있다.
변수로는 문자열, 숫자, 불리언 등 여러 타입의 값을 가질 수 있다. 이는 유연한 개발 환경을 제공하지만 쉽게 에러가 발생할 수 있는 단점이 있다.
타입스크립트를 적용함으로써 강한 타입 시스템을 적용해 대부분의 에러를 코드를 입력하는동안 체크할 수 있다. 자바스크립트의 수퍼셋이라 표현한다.
✔ 장점
코드의 가독성. 컴포넌트의 속성과 상태를 인터페이스로 정의하기 때문에 비교적 수월하게 읽을 수 있다.
프로그램 실행 전 버그 잡을 확률이 높다. 런타임 오류를 예방하는 차원.
IDE를 더욱 적극적으로 활용. 자동완성 및 타입 체킹이 되기 때문에 생산성이 높아진다. 컴포넌트나 함수를 사용할때 해당 파일을 직접 열어보지 않고도 어떤 props 또는 파라미터를 넣어줘야하는지 알 수 있다.
협업때 유용하다. 굳이 주석을 사용하거나 코드를 정독하거나 협업하는 사람에게 물어보지 않아도 컴포넌트, 함수등을 사용할때 어떤 값을 어떤 타입으로 넣어야하는지 알기 쉽다.
✔ 자바스크립트에서의 불편함
자동완성 배열을 파라미터로 값으로 받아오는 함수를 만들게 될 때 해당 함수 내부에서는 자동완성이 안된다.
함수 파라미터 타입 체킹 다른 언어였다면 파라미터 타입이 이상하다면서 오류를 내줄텐데, 자바스크립트에서는 실행해볼 때까지 해당 코드에 오류가 있는지 알 수가 없다.
function getLength(str) {
return str.length;
}
getLength(3)리액트 컴포넌트를 쓸때 어떤 props를 넣어야하는지 에디터에서 알 방법이 없다. 리액트 컴포넌트에서는 propTypes를 사용하면 특정 컴포넌트에서 필요한 props를 지정해서 컴포넌트에서 필요한 props가 없다면 콘솔에 경고를 출력하도록 할 수 있다.
브라우저에서만 경고를 보여줄 뿐 에디터에서는 아무 경고도 보여주지 않기 때문에 실행 해야만 오류를 알 수 있다.
✔ 타입스크립트로 리액트 만들기
- CRA (Create-React-APP)을 이용하여 만드는 방법 :
CRA로 리액트, 타입스크립트 파일 생성
// Creates an app called my-app
// my-app 부분은 내가 적용하고자 하는 파일의 이름이다
npx create-react-app my-app --typescript