TypeScript 개발환경 설정하기

TypeScript 개발환경 설정하기

1. Visual Studio 설치
2. 타입스크립트(TypeScript) 설치
3. 타입스크립트 파일 만들기

 

1. Visual Studio 설치

구글에 검색하여 최신버전 설치

추천 익스텐션

• prettier(코드 포맷팅을 도와줌 -> 정리해줌)

• ESlint(코드 품질도구 -> 코드 검사 및 잠재적인 문제관련 경고)

 

 

• Path Intellisense(로컬파일을 빠르게 참조할수 있도록 자동완성해주는 기능)

 

• Bracket Pair Colorizer(짝이 맞는 괄호끼리 같은 색상으로 처리해줌)

 

• Material Icon Theme(프로젝트 파일 아이콘을 좀더 이쁘게 만들어줌)

 

 

 

 

2. 타입스크립트 설치하기

 

타입스크립트 다운로드 화면 클릭

https://www.typescriptlang.org/download

 

 

npm 으로 설치하기 위해선?

npm install -g typescript

 

> npm(Node Package Manager)로 설치하기 위해
Node.js(브라우저 밖에서 자바스트립트를 실행할수 있는 런타임 환경)를 설치해줘야함

https://nodejs.org/ko/download/

 

> 터미널을 키고 다음을 붙여넣자

npm install -g typescript

 

 

 

3. 타입스크립트 파일 만들기

1. app.ts 파일 생성

• 타입스크립트는 자바스크립트를 기반으로 한 언어이기 때문에 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효함

 

2. app.ts 파일에 다음과 같이 작성

function logName(name: string) { // 파라미터 name 에 string 값만 들어올수 있다는 타입지정
  console.log(name);
}

logName("Jack");

 

 

3. 터미널창을 키고 (ctrl + j/ command + j) 다음을 입력

tsc app.ts

 

혹은

 

npx tsc app.ts

• js 파일이 생성되면서 타입스크립코드가 자바스크립트 코드로 변환된것을 확인할 수 있음

 

 

 

 

번외편

1. 빨간줄 없애기
   다음과 같은 경고메세지를 볼 수가 있는데..(VScode의 버그같은거임) 아래와 같이 입력

 

tsc --init

 

혹은

 

npx tsc --init

 

-> tsconfig.json 파일 생성되며 해결됨

 

 

 

2. 타입스크립트코드를 자바스크립트코드로 일일이 컴파일하기 번거롭기 때문에 -> 다음과 같이 입력하게되면 자동으로 컴파일됨

 

tsc --w

 

혹은

 

npx tsc --w

 

 

 

땅콩코딩 채널의 영상을 참고하여 정리하였습니다.

https://www.youtube.com/watch?v=VJ8rvsw2j5w&list=PLJf6aFJoJtbUXW6T4lPUk7C66yEneX7MN&index=1