1. 왜 타입스크립트를 쓰면 좋은가?
startApp() 이라는 함수는 내부에서 url을 axios 하여 데이터를 받아오는 함수이다. querySelector로 제공한 선택자 또는 선택자 뭉치와 일치하는 문서를 선택한 뒤 innerText를 사용하여 url에서 가져온 데이터의 값을 할당시킨다. 여기서 두 케이스는 모두 address에 잘못된 값을 할당할 때의 경우이다.
첫번째 케이스는 address라는 객체를 innerText에 할당하는 것인데 이렇게 되면 [Object Object] 형식으로 렌더링 된다.
두번째는 오타로 존재하지 않는 프로퍼티에 접근한 케이스인데 이럴때는 undefined 형식으로 렌더링 되는 것을 확인할 수 있다.
이 문제들은 TS를 사용함으로서 해결할 수 있다.
JS에서 발생하는 이같은 문제는 사전에러 방지와 자동완성을 제공하는 TS를 사용함으로서 명확한 데이터 연결이 가능하다.
2. 자바스크립트에 타입이 있을 때의 첫 번째 장점?
정답: 에러의 사전방지
JSdoc을 사용하여 미리 타입을 설정했을 경우의 코드를 보자.
이런식으로 객체를 구성하는 property별 타입을 JSdoc을 사용하여 미리 지정했다.
data. 으로 접근하면 data는 Data라는 타입으로 미리 지정했기 때문에 해당 객체를 구성하는 address와 email, name으로 접근이 가능하다.
data.address. 으로 접근하면 위와 마찬가지로 address를 Address타입으로 지정하였기 때문에 city와 street으로 접근이 가능하다.
또한 이 값이 string이라는 어떤 타입인지도 알려준다.
한마디로 타입을 지정함으로써 이 프로퍼티가 어떤 값이다 라는 것과 어떤 타입인지 다 알 수 있는 것!
3. 자바스크립트에 타입이 있을 때의 두 번째 장점?
정답은: 코드완성과 가이드
sample.js파일에서 sum이라는 함수를 만들면
a와 b가 모두 any로 설정 => 모든 형식을 다 받을 수 있는 상황이 되어버린다.
이를 해결하고자 TS로 바꾸기 위해서 먼저 sample.ts 파일 생성한다. (확장자 JS 아님, TS임)
sum과 같은 로직을 수행하는 add라는 함수를 만들고 인수들과 결과값에도 타입을 지정하자. (인수에 타입을 지정한것이 초록색 밑줄, 함수의 return에 타입을 지정한 부분이 빨간색 밑줄)
만약 숫자와 문자열을 인수로 전달한다면 다음과 같이 사전에 에러를 볼 수 있다.
또한 TS로 return에 대한 타입이 지정되어 해당 타입에서 사용가능한 메서드가 자동으로 완성된다.
TS에서 자동완성 => 가능
JS에서는 불가능
4.자바스크립트를 타입스크립트처럼 코딩하는 방법
JS doc + ts-check 조합으로 js의 타입을 검증
JS doc만 사용
JS doc만 사용할 경우 에러 사전 방지 기능은 없다.
ts-check도 함께 사용
JS doc과 ts-check를 함께 사용하면 타입스크립트의 에러 사전 방지를 사용 할 수 있다.
but...
두개를 같이 쓰느니 그냥 TypeScript를 쓰는 게 코드량이 줄어들고 가독성도 더 높아진다...
