[TypeScript] TypeScript 알아보기

 

TypeScript란?

TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로 기본적으로 JavaScript의 상위 집합(superset)으로 JavaScript의 모든 기능을 포함하면서도 정적 타입, 인터페이스, 클래스, 모듈 등의 추가 기능을 제공합니다.

JavaScript는 동적 타입 언어로 개발 초기에는 유연성 때문에 인기가 매우 좋아 많은 곳에서 사용되었고 지금까지도 많이 사용되고 있습니다. 그러나 애플리케이션이 커지고 복잡해지면서 타입 관련 오류를 예방하거나 찾아내기 위한 추가적인 도구나 체계가 필요해졌고 그러한 문제점을 해결하기 위해 만들어진 언어가 TypeScript입니다.

TypeScript의 장점

• 타입 안전성 : TypeScript의 가장 큰 장점은 정적 타이핑을 통합 타입 안전성입니다. 컴파일 시점에 타입 관련 오류를 잡아 낼 수 있으므로 런타임 오류를 줄일 수 있습니다.
• 명확한 문서화 : 타입 정보를 통해 함수나 컴포넌트의 인터페이스를 명확히 알 수 있습니다.
• IDE 지원 : TypeScript는 풍부한 IDE 지원을 받습니다. 인텔리센스, 자동완성, 타입 힌트 등의 기능을 통해 개발 효율성을 향상 시킬 수 있습니다.
• 최신 문법 지원 : TypeScript는 최신 ECMAScript 표준을 지원하면서도 이를 구형 브라우저에도 실행 가능한 JavaScript로 컴파일 할 수 있습니다.

TypeScript와 Babel의 차이점

TypeScript도 JavaScript로 컴파일하고 Babel도 JavaScript로 컴파일하는 기능을 수행하지만 차이점은 다음과 같습니다.

• TypeScript는 JavaScript에 정적 타이핑 및 객체 지향 프로그래밍 기능을 추가한 언어로 타입 검사와 함께 코드를 JavaScript로 컴파일
• Babel은 JavaScript 컴파일러로 다양한 ECMAScript 문법을 지원하지 않는 환경에서 동작 할 수 있도록 코드를 변환하는 목적이 주를 이루는 컴파일러

 

TypeScript는 타입 안전성과 강력한 툴링을 제공하는 반면 babel은 유연한 코드 변환과 최신 JavaScript 문법 지원에 초점을 맞춘 도구입니다. 많은 프로젝트에서 TypeScript의 타입 체크 기능과 Babel의 코드 변환 기능을 함께 사용하기도 합니다.

 

기본 설정 방법

Package.json 초기 설정

npm init -y

• -y : npm init를 입력하여 package.json 초기값을 설정할때 모든 대답을 초기값으로 설정하게 해줌

TypeScript 패키지 설치

npm install -D typeScript

• -D : --save-dev의 축약형으로 devDependencies 섹션에 해당 패키지가 추가되고 해당 패키지는 프로젝트의 개발 환경에서만 필요하다는것을 의미

TypeScript 버전 확인

npx tsc --version

package.json

• 초기설정 및 dependencies 부분에 TypeScript 설정이 들어간 것을 볼 수 있다.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "@types/node": "^20.5.7",
    "ts-node": "^10.9.1"
  }
}

 

TypeScript 컴파일 옵션 설정 파일 생성

npx tsc --init

tsconfig.json

{
	// 컴파일러의 옵션을 설정
	"compilerOptions": {
    	// 컴파일된 JavaScript의 버전을 지정
        // ex) "ES5","ES6","ES2017"
        "target": "ES5",
        // 컴파일된 코드의 모듈 시스템을 지정
        // ex) "CommonJS","AMD","ES6"
        "module": "CommonJS",
        // 컴파일된 JavaScript 파일들을 저장할 디렉토리를 지정
        "outDir": "./dist",
        // 소스 파일들이 위치한 루트 디렉토리를 지정
        "rootDir": "./src",
        // 타입 체크 옵션을 활성화
        "strict": true,
        // ES6 모듈 스펙과의 호환성을 높이기 위한 옵션
        "esModuleInterop": true,
        // 타입이 명시되지 않은 변수에 대한 오류를 발생. 이를 통해 모든 변수에 타입을 명시적으로 지정하도록 강제
        "noImplicitAny": true,
        // 모듈 해석 전략을 지정 node와 classic 중 하나를 선택 가능 하지만 대부분 node 사용
        "moduleResolution": "node",
        // 소스 맵 파일을 생성할 것인지 지정
        "sourceMap": true,
    },
    // 컴파일을 진행할 디렉토리 및 파일 지정
    "include": ["src/**/*"],
    // 컴파일을 제외할 디렉토리 및 파일 지정
    "exclude": ["node_modules"],
}

Nodejs 환경에서 TypeScript 사용

node.js는 JavaScript 런타임 환경이기 때문에 내장 함수 및 모듈에 대한 타입이 정의 되어 있지 않아 별도의 설정이 없으면 TypeScript를 사용 할 수 없다.

그렇기 때문에 node.js 타입 정보를 패키지로 설치해야 합니다.

npm install ts-node @types/node

파일 실행 방법

npx ts-node [파일명]