1. 비주얼 스튜디오 설치
아래의 링크에 접속하여 설치 파일을 다운로드한 후 설치합니다.
2. Node.JS 설치
NPM을 활용하기 위해 Node.Js를 설치해야 합니다. typeScript의 경우 NPM을 통해 설치가 가능합니다.
[NPM 이란?]
Node Package Manger로서
Node.js로 만들어진 모듈(Package) 관리(Manger) 도구 입니다.
NPM을 활용하면 프론트엔드 개발 환경(React, Vue, TypeScript 등)을 쉽게 설정할 수 있습니다.
모듈(Package)은 https://www.npmjs.com에 어떤 사람들(개발자)이 배포해둡니다.
모두 해당 사이트에서 검색하면 찾을 수 있고 NPM 명령어를 통해 다운로드할 수 있습니다.
아래의 링크에 접속하여 설치 파일을 다운로드한 후 설치합니다.
설치 후 터미널(Mac OS) 또는 명령 프롬프트(Windows OS)에서 다음 명령어로 잘 설치되어 있는지 노드의 버전을 확인해봅니다.
$ npm -v
8.9.0
3. typeScript 컴파일러 설치(tsc)
이제 typeScript를 설치해봅니다. 아래의 사이트에 접속합니다.
https://www.typescriptlang.org
다음과 같은 페이지가 뜨게 되는데 "Try TypeScript Now"를 클릭합니다.
On your computer를 클릭합니다.
설치 방법에 대해서 설명이 나옵니다. 아래로 스크롤을 조금 내리면 Globally Installing TypeScript 방법이 나옵니다.
npm install -g typescript가 설치 명령어입니다. (복사)
터미널 또는 명령 프롬프트를 실행하여 복사한 명령어를 실행합니다. MAC OS의 경우 sudo로 root 권한을 주어 명령어를 실행합니다.
$ sudo npm install -g typescript
MAC OS의 경우 sudo를 붙이지 않게 되면 다음과 같은 권한과 관련된 오류가 발생할 수 있습니다.
4. 프로젝트 생성
이제 프로젝트를 생성해서 실행해봅니다.
[TypeScript]
타입스트립트는 프로그래밍 언어임과 동시에 컴파일러입니다.
명령어를 이용해서 다운로드한 것은 타입스크립트의 컴파일러입니다.
tsc 명령어를 사용하여 typeScript를 javaScript로 변환이 가능합니다.
1. 실습용 프로젝트 디렉토리 생성
2. button.ts 코드 작성
생성한 프로젝트 데렉터리를 비주얼 스트디오를 통해 폴더를 연 후
다음과 같이 ts 코드를 작성합니다.
function buttonClickEvent (message: string) {
alert(message)
}
3. ts -> js 컴파일
터미널을 열어 줍니다.
터미널에서 컴파일 명령어를 통해 컴파일해줍니다.
컴파일에 성공하게 되면 button.js 파일이 생성됩니다.
$ tsc button.ts
4. html에 js 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
</head>
<body>
<button onclick="buttonClickEvent('hello typeScript')">Button</button>
</body>
<script src="button.js"></script>
</html>
5. 실행
버튼을 클릭하면 해당 함수가 잘 실행되는 것을 확인할 수 있습니다.
5. TIP(typeScript 코드 변경 감지)
typeScript 파일의 경우 javaScript로 컴파일이 필요한데.
typeScript 파일이 수정될 경우 계속 컴파일을 해줘야 하는 귀찮은 문제가 발생합니다.
이러한 귀찮은 문제를 해결하기 위해 아래의 명령어를 활용하면 알아서 변경을 감지해서 컴파일을 처리해줍니다.
$ tsc -w button.ts
[오후 3:44:06] Starting compilation in watch mode...
[오후 3:44:07] Found 0 errors. Watching for file changes.
^Z (종료 시에는 컨트롤 + Z)
[2] + 9048 suspended tsc -w button.ts
'Frontend > Javascript' 카테고리의 다른 글
| [axios.js] GET, POST 방식으로 서버와 통신하기 (0) | 2021.10.21 |
|---|---|
| [vis.js] 간단한 네트워크 토폴로지 만들기 (0) | 2021.10.14 |
