TypeScript

TypeScipt (Javascript + type)

* 특징

• 컴파일 언어로 코드 수준에서 미리 타입을 체크하여 오류를 체크해낸다.
  (단 전통적인 컴파일 언어와는 다르게, 링킹 과정이 생략되어 있다.)
• 코드 어시스트 기능도 지원받을 수 있다.
  → 형변환, 호이스팅, 복잡성 문제를 해결 할 수 있다.

Q. TypeScipt를 react에서 사용하는 이유

#### A1. IDE를 더욱 적극적으로 활용하기 위해서(자동완성, 타입확인) (* IDE(Integrated Development Enviroment) 통합개발환경 ex)vscode)

• 자동완성이 잘된다. 함수를 사용 할 때 함수가 어떤 파라미터를 필요로 하는지, 어떤 값을 반환하는지 코드를 따로 열어보지 않아도 알 수 있다.

• 리액트 컴포넌트의 경우 해당 컴포넌트를 사용하게 될 때 props에는 무엇을 전달해줘야하는지, JSX를 작성하는 과정에서 바로 알 수 있으며, 컴포넌트 내부에서도 자신의 props에 어떤 값이 있으며, state에 어떤 값이 있는지 알 수 있다. 또한 리덕스와 함께 사용하게 되면 connect로 통하여 props로 전달해 줄 때에도 자동완성이 되어 편리하다.

(* JSX) (*redux)

#### A2. 오타가 없도록 도와줌, 실수방지

• null 이나 undefined 일 수도 있는 값의 내부 값 혹은 함수를 호출한다면(ex)배열의 내장함수) 사전에 null 체킹을 하지 않으면 오류를 띄우므로 null 체킹도 확실하게 할 수 있게 된다.

참고

• https://react-etc.vlpt.us/06.typescript-basic.html
• https://velog.io/@yesdoing/TypeScript-with-React-Redux-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-k5jsis62a
• https://velog.io/@dongwon2/TypeScript%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%EC%A0%84%EC%97%90-%EC%9D%B4%EC%A0%95%EB%8F%84%EB%8A%94-%ED%95%B4%EC%A4%98%EC%95%BC%EC%A7%80
• https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html