2012년 마이크로소프트에서 발표

자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어

정적 타입의 컴파일 언어

자바스크립트(동적 타입) - 런타임에서 동작할 때 타입 오류 확인

타입스크립트(정적 타입) - 코드 작성 단계에서 타입 오류 확인

자바스크립트로 변환(컴파일) 후 브라우저나 Node.js 환경에서 동작

자바스크립트 완벽 호환

타입스크립트는 자바스크립트의 '슈퍼셋으로 완벽하게 호환

대부분의 라이브러리, 프레임워크가 타입스크립트를 지원

스크린샷 2023-12-01 오전 11.42.58.png

개발 환경 구성

yarn add parcel typescript

// package.json

{
  "name": "ts-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },
  "dependencies": {
    "parcel": "^2.10.3",
    "typescript": "^5.3.2"
  }
}

파일 생성

src/main.ts

let hello: string = "Hello world!";
console.log(hello);

hello = "Hello Typescript";
console.log(hello);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" defer src="./src//main.ts"></script>
  </head>

  <body></body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ESNext", // ECMAScript(=ESN)
    "moduleResolution": "Node",
    "esModuleInterop": true, // ES -> Common
    "lib": ["ESNext", "DOM"],
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}