EASY PEASY CODING

TypeScript 본문

Web

TypeScript

richpotato 2024. 7. 19. 01:08

 

타입스크립트는 자바스크립트의 타입 부분을 업그레이드해서 사용하는 일종의 자바스크립트의 대용품입니다. 자바스크립트는 동적 타입(Dynamic typing)을 지원하여 타입에 관대하지만, 타입스크립트는 타입을 엄격하게 검사하여 타입을 제대로 쓰지 않았을 경우 에러로 변환해 줍니다. 이는 큰 프로젝트에서 타입과 관련된 버그를 줄이는 데 매우 유용합니다.

타입스크립트는 자바스크립트의 상위 집합으로, 자바스크립트 코드를 그대로 사용할 수 있으면서도 추가적인 타입 검사와 최신 ECMAScript 기능을 제공합니다. 이를 통해 더 안전하고 유지보수가 쉬운 코드를 작성할 수 있습니다.

 

1. 일반 HTML CSS JS 웹개발시 타입스크립트를 사용하려면,

  • Nodejs를 설치합니다.
  • Vscode에디터에서 터미널을 오픈한 후,
npm install -g typescript

를 입력합니다. 그 후  작업폴더에 .ts로 끝나는 파일을 만들고 타입스크립트를 사용하시면 됩니다.

 

그리고 터미널에서 

tsc -w

 

를 해두면 ts 파일이 자동으로 js 파일로 컴파일을 실시간으로 해줄수 있습니다.

 

2. React

  • 이미 만들어진 React 프로젝트에서 TypeScript를 사용할 경우,

React 프로젝트의 작업폴더 경로에서

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

를 입력합니다.

 

  • 새로운 React 프로젝트에서 TypeScript를 사용할거라면,
npx create-react-app my-app --template typescript

를 입력합니다.

 

3. 만약 Vue프로젝트에서  TypeScript를 사용할 경우,

vue add typescript

를 입력합니다.