타입스크립트 설치법

일반 HTML CSS JS 웹개발시

 

1. Nodejs 최신버전, VScode 에디터를 설치한다.

 

2. VScode 에디터에서 터미널을 오픈합니다. 

상단메뉴 Terminal - New Terminal 로 들어가거나 또는 ctrl + ` 를 누르면 된다.

 

3. 터미널에서 아래의 코드를 입력한다.

npm install -g typescript

에러시

(1) nodejs 최신버전으로 업그레이드

(2) 윈도우인데 허가되지 않은 script 실행불가 어쩌구 에러가 뜨면 시작 - 검색 - powershell - 우클릭해서 관리자 권한으로 실행한 다음 Set-ExecutionPolicy Unrestricted 입력하셈 그리고 y 선택하면 된다.

(3) 맥북인데 보안에러 어쩌구가 뜨면 sudo npm install 어쩌구~ 이렇게 sudo를 앞에 붙여봐라.

 

4. 코드짤 작업폴더를 만들기

 

5. 작업폴더를 에디터(VSCode)로 오픈합니다.

 

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

ts 파일은 js랑 똑같이 사용가능합니다.

다만 근데 웹브라우저는 ts 파일을 알아듣지 못하기 때문에

js 파일로 변환 작업을 해야합니다.

 

7. js 파일로 변환

터니널에 tsc -w 입력해두면 얘가 자동으로 ts파일을 js 파일로 근처에 변환시켜준다.

 

8. 이제 HTML 파일 등에서 타입스크립트로 작성한 코드를 사용하려면 

당연히 .ts가 아니라 변환된 .js 파일을 사용하십시오.

<script src="변환된파일.js"></script>

 

React 프로젝트에서 TypeScript 

 

이미 있는 React 프로젝트에 설치할 때

작업하고 있는 폴더에서 터미널 오픈한 뒤 아래의 코드를 입력한다.

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

 

React 프로젝트 새로시작할 때

작업폴더를 만들고 거기에 아래 코드를 입력해서 react랑 typescript를 함께 설치

npx create-react-app my-app --template typescript

 

Vue 프로젝트에서 Typescript

 

작업하고 잇는 폴더에서 터미널 오픈한뒤 아래 코드 입력

vue add typescript

 

vue파일에서 아래의 코드를 입력하면 된다.

<script lang="ts">
  
</script>