TypeScript의 시작
우선 타입스크립트 홈페이지(https://www.typescriptlang.org/)에 들어가게 된다면 가장 처음 볼 수 있는 화면이다.
TypeScript is JavaScript with syntax for types -> 타입 스크립트는 자바스크립트를 기반으로 정적 타입 문법의 언어입니다.
타입스크립트의 특징
1.컴파일 언어
코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.
2.객체 지향 프로그래밍 지원
저는 이것이 타입스크립트 기능중 최고라고 생각합니다.
타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.
=>이따가 코드로 더 자세히 알아보겠습니다.
타입스크립트의 장점
1. 높은 수준의 코드 탐색과 디버깅
타입스크립트는 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다. => 저같이 오타 많이 내는 사람들에게는 참 좋습니다..ㅎ
2. 자바스크립트와의 호환
타입스크립트는 자바스크립트와의 호환이 완벽하게 됩니다. 따라서 프론트엔드 또는 백엔드 어디든 자바스크립트를 사용할 수 있는 곳이라면 타입스크립트도 쓸 수 있습니다.
3. 높은? 강력한 생태계
타입스크립트는 그리 오래되지 않은 언어임에도 불구하고 강력한 생태계를 가지고 있습니다. 대부분의 라이브러리들이 타입스크립트를 지원하고 있습니다.
더 많은 장점들은 공식문서를 참고해주시기 바랍니다 => https://www.typescriptlang.org/
자 이제 실전에서 사용해보자
저희가 실제로 사용할 곳은 바로 리액트 입니다.
우선 터미널을 치시고 한번 입력해보겠습니다.
=> npm install --save typescript @type/node @type/react @type/react-dom @type/jest
이렇게 설치하게 된다면 타입스크립트 준비는 끝났습니다.
오
타입스크립트를 사용하는 법은 많지만 오늘은 interface선언과 사용법을 알려드리겠습니다.
위 코드와 같이 interface CircleProps{}를 통해서 타입을 지정할 수 있다.
interface CircleProps{
bgColor : string; <- required props
borderColor ?: string; <-optional props
text ?: string
}위에 코드를 보면 bgColor:string => 이거는 bgColor의 props로 넘기는 값은 모두 string이여야 하고 반드시 props에서 값을 넘겨줘야한다 저것을 지키지 않을경우 타입스크립트에서 에러를 내보내게 된다 이것을 required props라고 한다.
하지만 잘 보면 borderColor ?: string; 이라는 것을 볼 수 있는데 이것은 optional props 즉 borderColor가 들어올 수도 있고 들어오지 않을 수도 있다는 것이다. 만약에 값이 넘어온다면 string을 지켜줘야하며 값이 넘어오지 않아도 상관은 없다.
정리
타입스크립트는 정말로 똑똑하다. 왜냐면 내가 오타낸것들과 내가 실수로 지정한 타입을 모두 타입스크립트가 막아주기 때문이다. 사실 조그마한 규모에는 타입스크립트가 그닥 필요가 없지만 조금 규모가 큰 프로젝트에서는 반드시 필요할 것이다. 스스로가 오타나 타입실수를 한다면 사용하는것이 좋다. 또한 유지보수하기도 편하기 때문에 반드시 공부하는것을 추천한다🙏
