[TypeScript] 01. VSCode로 TypeScript 시작하기

 

🟡 1. TypeScript란?

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. - 위키백과

  위키백과에서는 위와 같이 설명하고 있지만, TypeSript(이하 TS)는 타입이 있는 JS라고 생각하면 이해하기 쉽습니다. 

TypeScript Superset

위키백과 설명 중 슈퍼셋이라는 단어가 있는데, 이는 JS의 개념을 포함하고 확장된 개념이라고 생각하면 됩니다. 그래서 JS를 알고 있다면, TS는 쉽게 배울 수 있습니다.

 

🟣 1.1 타입이란?

위 설명에서 TS는 타입이 있는 JS라고 말씀드렸는데요. 여기서 말하는 타입은 프로그래밍 언어에서 쓰이는 String, Number, Boolean 등과 같은 타입을 얘기합니다.

 

🟡 2. VSCode에서 TS 세팅하기 순서

1. 새로운 폴더 생성
2. 생성한 폴더를 vscode로 실행
3. 터미널에 npm init -y 입력
   npm init -y를 실행하면 package.json 파일이 생성됩니다. 그 파일에서는 프로젝트의 전체적인 세팅을 할 수 있습니다.
4. 터미널에 npm install -D typescript 입력
   npm install -D typescript를 실행하면 해당 프로젝트에 TS관련 모듈들이 설치가 됩니다. 이때 -D를 이용하여 설치하면 devDependencies에 설치가 됩니다. 이 경우, --production 옵션을 추가하여 배포할 프로젝트를 빌드할 때, devDependencies에 있는 패키지들은 배포되지 않습니다.
5. package.json 파일 => "main"삭제, "script"안에 "test"도 삭제, "build" : "tsc"추가 (하단 코드 참고)
6. tsconfig.json 파일 생성 및 입력 (하단 코드 참고)
7. src라는 폴더 생성 => index.ts 파일 생성 => 간단 코드 작성 (하단 코드 참고)
8. 터미널에 npm run build 입력 => build라는 폴더가 생성되고 index.js 파일이 자동 생성됨. (하단 이미지 참고)

---

// 5. package.json
{
  "name": "ts_starter",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "4.7.2"
  }
}

---

// 6. tsconfig.json
{
    // 어디에 ts 파일이 있는지 알려주기
    "include": [
        "src"
    ],
    // 컴파일 옵션
    "compilerOptions": {
        // 자바스크립트 파일이 생성될 디렉토리 설정
        "outDir": "build",
        // 자바스크립트 몇 버전으로 컴파일 할지 설정
        "target": "ES6",
    },
}

---

// 7. index.ts

let a: string;

a = "1";

console.log(a);

---

8. 자동 생성된 폴더와 파일

 

📝 정리 

1. 타입스크립트란 타입이 추가된 자바스크립트이다(정확히는 자바스크립트의 슈퍼셋이다).
2. VScode에서 타입스크립트를 사용하기 위해서는 간단한 설정이 필요하다.
3. https://www.typescriptlang.org/play를 이용하면 웹에서 설정 없이 바로 타입스크립트 연습이 가능하다.

 

🙋‍♂️ 덧붙임

 타입스크립트의 문법 및 tsconfig.json 추가 사용법은 차후 포스팅에서 다루겠습니다!

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~