본문 바로가기

TypeScript

TypeScript 기본 정리

TypeScript

TypeScript란 정적 타입의 컴파일 언어입니다. JavaScript의 경우 동적 타입으로 런타임(동작 환경)에서 동작할 때 오류를 발견할 수 있으며, 이는 큰 문제로 이어질 가능성이 됩니다.

TypeScript의 경우 코드를 작성할 때 타입을 정해서 작성하기 때문에 코드 작성 단계에서 타입에 대한 오류를 확인할 수 있습니다. 때문에 코드를 작성할 때 발생하는 오류를 JavaScript보다 줄일 수 있게 됩니다.

추가로 브라우저나 node.js 환경은 TypeScript가 직접적으로 동작하지 못하기 때문에 JavaScript로 변환(컴파일)이 필요합니다. 이러한 이유로 TypeScript를 정적 타입의 컴파일 언어라고 부를 수 있습니다.

또한 TypeScript는 JavaScript의 슈퍼셋으로 완벽하게 호환이 가능하며, 대부분의 라이브러리, 프레임워크에서 사용이 가능합니다.
*슈퍼셋이란 JavaScript의 기능은 모두 가지고 있고, 추가적인 기능을 가지고 있음을 의미합니다.

TypeScript는 JavaScript의 슈퍼셋이기 때문에 JavaScript의 기본 문법을 기준으로 TypeScript의 새로운 기능을 적용하는 것입니다.


TypeScript 개발 환경 설정
npm init -y

우선 위의 명령어로 node.js 개발 환경을 만들어줍니다.

npm i -D typescript

typescript를 개발 의존성으로 설치해 줍니다.

확장자가 js가 아닌 ts로 파일을 생성해 줍니다.

만든 ts 파일을 HTML에 연결을 해줍니다. 앞서 언급한 대로 브라우저에서 TS는 작동할 수 없기 때문에 추가적으로 parcel 번들러를 설치해 줍니다. parcel 번들러의 경우 HTML 파일을 해석해서 dist폴더에 해석 결과를 만들어주게 되며, ts 파일 역시 parcel 번들러가 해석해주게 됩니다.

추가적으로 root 경로에 tsconfig.json 파일을 추가한 뒤 TS 구성 옵션을 제공해 줍니다. (구성 옵션에 대한 간략한 설명은 위와 같습니다.)

개발 환경을 마무리하고 앞서 만든 main.ts 파일에서 변수 hello에 숫자 데이터를 담은 뒤 변수명 뒤에 타입을 string으로 명시해 주었습니다. 이때 위와 같은 오류 문구를 확인할 수 있으며, 명시한 타입에 유효한 값을 할당하지 않을 경우 위와 같은 결과를 확인할 수 있게 됩니다.

 

 

 

'TypeScript' 카테고리의 다른 글

인터페이스 (Interface)  (2) 2023.01.02
타입 가드(Guard)  (0) 2023.01.02
타입 단언과 할당 단언  (0) 2023.01.02
타입 추론 (Inference)  (2) 2023.01.01
TypeScript 타입 종류  (0) 2023.01.01