📌 TypeScript가 뭔데🤔?
TypeScript는 JavaScript를 기반으로 하며, TypeScript만의 고유 문법이 포함된 프로그래밍 언어이다
JavaScript가 TypeScript에 포함되어 있기 때문에
JavaScript에서 유효한 모든 것은 TypeScript 내에서도 유효하며
TypeScript에서만 쓰이는 구문은 다 타입과 관련된 것이다
TypeScript를 쓰는 이유
TypeScript의 목적은 코드가 실행되기 전에 미리 오류를 체크하는 것이다
개발 단계에서 작성과 동시에 분석을 함으로써 JavaScript에서 자주 발생하는 오류나 버그를 찾아준다
(JavaScript는 코드를 실행해야만 오류를 알 수 있으며 오류를 전부 잡아내지 못하기도 한다)
오류를 고쳐주지는 않지만 오류의 원인이 어디에 있는지 친절하게 알려주기 때문에 코드를 조금 더 수월하게 작성할 수 있다
이처럼 TypeScript는 의도를 더 명확히 하고 코드를 다시 확인하여 더 깔끔하고 나은 코드로 작성할 수 있도록 도와주는 역할을 한다
정리
➡️ TypeScript는 코드를 실행하기 전에 코드의 오류를 미리 체크하여 알려준다
📌 그럼 TypeScript는 어떻게 쓰는데?
TypeScript 파일(확장자 .ts)을 하나 만들고 자바스크립트 코드를 그대로 사용하면 된다
그리고 코드에 타입을 붙여주면 TypeScript 코드가 되는 것이다
1. TypeScript 설치하기
-
npm 방식으로 설치 (NodeJS와 npm 필요)
2-1. npm 설치 여부 확인npm -v
npm 미설치 시 nodejs.org 접속 후 설치
-
TypeScript 설치
TS가 프로젝트 별로 작동했으면 좋겠다 →npm install typescript
TS를 전역으로 설치하고 싶다 →npm install -g typescript
3-1. TypeScript 설치 여부 확인 tsc -v
💡 설치 없이 간단하게 TypeScript 쓰는 방법!
https://www.typescriptlang.org 접속 → Playground 클릭
TypeScript 마음대로 사용하기😄
TS Config를 클릭하면 속성을 원하는 대로 변경할 수도 있다
2. VS Code에서 TypeScript 사용해보기
TypeScript 파일의 확장자는 .ts 이다
먼저 basics.ts 파일을 하나 만들고 코드를 작성해 보았다
빨간 밑줄이 뜨는데 이것이 바로 TypeScript가 오류를 체크한 것이다
파일이 실행되지 않았는데도 오류를 잡아준 것이다
밑줄에 마우스를 가져다 대면 자세한 설명과 타입까지 나온다
3. TypeScript 코드를 JavaScript 코드로 컴파일링 해보기
tsc 명령어를 사용해 TypeScript 코드를 JavaScript 코드로 컴파일링 할 수 있다 → tsc 파일명
명령어를 입력하면 같은 이름을 가진 JavaScript 파일이 생성된다
Math.round( )는 입력한 숫자를 가장 가까운 정수로 반올림해주는 함수이다
TypeScript에서는 'hi'부분이 잘못되었다고 인식하지만
JavaScript에서는 아무런 오류를 체크하지 못한다
이것이 바로 TypeScript를 사용하는 이유이다
let num: number = 1234567 → TypeScript만의 고유 문법대로 변수에 타입을 붙여보았다
JavaScript로 컴파일링 해보니 console.log()는 그대로인데 변수의 타입이 사라졌다
왜냐면 타입은 TypeScript에서만 사용되는 문법이니까!😎
뭔가 좀 정신없게 정리한 것 같기는 한데,,
개념이 더 명확하게 박히면 조금씩 수정해야지,,
