[패캠] 타입스크립트 문법 - 개요 및 개발 환경 (1/20)

Fastcampus 프론트엔드 개발 강의

 

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

01. 개요 및 빠른 개발 환경 구성

---

 

타입스크립트?

• 2012년 마이크로소프트에서 발표
• JavaScript 기반의 정적 타입 문법을 추가한 프로그래밍 언어
  TypeScript 정적 타입 문법 : 문자, 숫자, 불린 등의 데이터 타입을 정의해서 사용한다.
  JavaScript 동적 타입 문법 : 동작이 될 때도 새로운 데이터의 타입을 사용할 수 있는 개념
• 정적 타입의 컴파일 언어
  TypeScript는 브라우저나 Node.js 환경에서 동작하려면 JavaScript로 컴파일이 필요함
  TypeScript (정적 타입) : 코드 작성 단계에서 타입 오류 확인
  JavaScritp (동적 타입) : 런타임에서 동작할 때 타입 오류 확인
• JavaScript 완벽 호환
  TypeScript는 JavaScript의 슈퍼셋으로 완벽하게 호환된다. 슈퍼셋이라는 것은 JavaScript의 기능은 전부 다 가지고 있고 추가로 더 많은 기능을 가지고 있음 그렇기 때문에 JavaScript 보다 TypeScript가 더 상위 개념 대부분의 라이브러리, 프레임워크가 TypeScript를 지원

JavaScript의 Superset인 TypeScript

• TypeScript의 새로운 문법
  TypeScript는 JavaScript의 모든 기능을 포함 그외 추가로 TypeScript 문법에서는 사용할 수 있는 새로운 기능들로 Interface, Types, Assertion, generic, Utilities, Type Alias 등이 존재함 TypeScript라는 프로그래밍 언어를 새롭게 따로 배우는 것이 아니라, JavaScript에서 배운 문법을 기준으로 해서 TypeScript의 추가적인 기능을 살펴보는 것 즉, JavaScript 문법에 추가적인 정적 타입 문법을 추가로 배운다고 이해할 수 있다. JavaScript를 잘 다룬다면 TypeScript 내용이 쉽게 다가올 수 있을 것이다.

TypeScript 개발환경 구성

• npm으로 package.json 생성

cd TS-TEST
npm init -y

• 패키지 설치
  개발 의존성 패키지로 parcel 번들러, typescript 설치

npm i -D parcel typescript

• package.json 수정
  “scripts”에서 parcel 번들러를 통해 현재 프로젝트의 주변에 있는 index.html 파일을 진입점 및 빌드 대상으로 연결 배포시 문제가 되는 “main” 제거

{
  "name": "ts-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel": "^2.10.3",
    "typescript": "^5.3.2"
  }
}

• TypeScript 파일 생성 및 연결
  index.html 파일에 script 태그를 사용하여 TypeScript 파일을 연결해준다. parcel 번들러가 dist 폴더를 생성할 때 TypeScript 파일을 인식할 수 있도록 함
• tsconfig.json 파일 생성
  "CompilerOptions"에 TypeScript를 ES2015년도의 JavaScript로 변환함과 JavaScript의 표준 명칭인 ECMAScript(ES)의 가장 최신 버전으로 모듈을 사용하겠다고 명시 어떤 경로를 작성할 때 특정한 폴더 안에 들어있는 index라는 이름을 가지고 있는 JavaScript 파일은 생략이 가능해지도록 모듈의 해석 방식을 node로 지정 우리는 JavaScipt의 ESCMAScript 모듈(ESM) 방식을 사용하는데, Node.js에서는 common.js 방식을 사용한다. 그래서 ESM 방식과 common.js 방식을 호환해서 전부 다 사용할 수 있는 구조를 만들기 위해서 “es-module-interop”을 true로 지정 ”lib”옵션을 통해 TypeScript가 JavaScript로 코드를 컴파일할 때 내부적으로 사용을 해야 하는 라이브러리들의 목록을 지정 ”strict” 옵션을 true로 지정하여, TypeScript의 문법을 최대한 엄격하게 사용하도록 한다. 정적 타입의 프로그래밍 언어를 쓰는 의미를 명확하게 함 두번째 옵션인 “include”를 통해서 프로젝트의 어느 부분에서 TypeScript 파일을 찾을 수 있는지 경로를 지정할 수 있다. 세번째 옵션인 “exclude”를 통해 컴파일할 때 제외할 경로를 명시할 수 있다. 여기에 node_moduels를 추가하여 JavaScript로 변환이 필요없는 단순 패키지 보관 용도의 폴더를 제외할 수 있다.

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ESNext",
        "moduleResolution": "Node",
        "esModuleInterop": true,
        "lib": ["ESNext", "DOM"],
        "strict": true
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

• main.ts 작성
  TypeScript는 브라우저에서 직접적으로 동작할 수 없으며, 동작하려면 JavaScript로 변환되어야 한다.
  parcel 번들러가 TypeScript을 JavaScript으로 변환 역할을 해줄 수 있다.
  그렇기 때문에 단순하게 package.json에 등록한 명령어 npm run dev로 parcel로 개발 서버를 오픈하는 명령을 통해서 바로 변환을 만들어 줄 수 가 있다.
  parcel 번들러로 개발서를 열면 로컬호스트 1234번 포트로 개발 서버가 열리고, 프로젝트 폴더에는 컴파일된 parcel 번들러의 결과물이 dist 폴더가 생성된다. dist 폴더 내부의 index.html 파일의 내용을 확인해보면, 스크립트를 통해 연결된 내용은 TypeScript가 아니고 JavaScript 코드이다. 브라우저 localhost:1234에 접속하여 콘솔창의 출력을 확인할 수 있다.

// 개발 서버 오픈
npm run dev

 

TypeScript로 작성한 간단한 코드

index.html에 연결된 js 파일

index.b7a05eb9.js 파일

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY