[TypeScript] 1장. JavaScript의 종말 TypeScript 등장

 

2012년 10월 1일 지금으로부터 13년 전인 10월 1일은 웹페이지의 보조적인 기능을 수행하기 위한 한시적인 언어인 Javascript를 더욱더 커다란 애플리케이션으로 개발하기 위해 TypeScript가 개발되었습니다. TypeScript를 사용해 자신이

 

원하는 타입을 정의하고 프로그래밍해 자바스크립트로 컴파일되게 만들었고 이 언어는 지금까지 수많은 자바스크립트 언어를 타입이라는 스크립트로 짧고 간결하게 짤수 있게 만들었습니다. 

 

Typescript의 개발자이자 Microsoft 직원 Anders Hejisberg가 개발했으며, 클라이언트 사이트와 서버 사이드를 위한, 프론트백 통합 개발에 사용할 수 있게되었습니다. 

 

 

1.TypeScript란 무엇인가?

 

타입 스크립트는 Microsoft에서 개발한 오픈소스 프로그래밍 언어로 타입스크립트는 자바스크립트의 슈퍼셋(Superset)으로, 자바스크립트의 모든 기능을 포함하며 정적 타입(Static Typing)을 추가한 언어입니다. 

 

타입스크립트는 대규모 애플리케이션 환경에서 발생할 수 있는 에러를 미리 방지해, 개발 생산성을 높이기 위해 만들어졌으며, 브라우저나 Node.js에서는 직접 실행되지 않고, 오직 자바스크립트로 컴파일(트랜스파일)되어 실행됩니다.

 

 

2.TypeScript VS Javascript

 

https://www.google.com/url?sa=i&url=https%3A%2F%2Fserokell.io%2Fblog%2Fwhy-typescript&psig=AOvVaw0ACnTs1J0KhgQLCDJjB-Hf&ust=1739094959178000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCLC6xtvns4sDFQAAAAAdAAAAABAE

 

타입스크립트와 자바스크립트의 차이점은 타입 시스템, 에러 검출 시점, 개발 생산성, 학습곡선이 있습니다.

1. 타입 시스템
   1. 타입스크립트: 정적 타입 시스템을 지원한다 ( 변수, 함수, 객체 등, 타입을 명시가능)
   2. 자바스크립트: 동적 타입 시스템 (런타임에서 타입이 결정)
2. 에러 검출 시점
   1. 타입스크립트: 컴파일 단계에서 타입 관련 에러를 미리 발견할 수 있다
   2. 자바스크립트: 런타임에서 에러가 발생할 가능성이 높음
3. 개발 생산성:
   1. 타입스크립트: IDE의 자동 완성, 코드 탐색, 리팩토링 지원
   2. 자바스크립트: 타입 정보가 없어 도구의 지원 제한적
4. 학습 비교
   1. 타입스크립트: 타입 문법이 다양함
   2. 자바스크립트: 비교적 간단하고 진입장벽이 낮음

 

3. TypeScript의 장점

 

타입스크립트는 타입을 명시함으로써 런타임 에러를 줄이고 버그를 초기에 발견할 수 있습니다. 즉 함수의 매개변수나 반환값에 타입을 지정해주면, 잘못된 타입 사용을 방지할 수 있습니다. 또 IDE(Visual Studio Code 등)와 같이 자동 완성, 코드 탐색, 리팩토링에 유용합니다. 

 

타입스크립트는 현재까지도 여러 개발자들이 협엽하거나 코드베이스가 커질때, 타입스크립트로 코드의 가독성과 유지보수성을 높여주며, 기존 자바스크립트 프로젝트에 타입스크립트를 조금씩 적용해나가면서 유지보수에 도움이 됩니다.

타입스크립트는 React, Node.js, Next.js 등 다양한 프론트엔드 개발 언어에도 적용이됩니다.

 

4. TypeScript 세팅법

 

타입스크립트는 Node.js 환경에서 사용되는 언어입니다. 기존의 Node.js를 설치하셨다면 바로 타입스크립트를 사용할 수 있습니다. 그렇지 않다면 우선 Node.js 공식 사이트에서 LTS 버전을 다운로드 받아줍니다.

node -v 
npm -v

 

Node.js를 설치했다면 터미널을 실행해 위 코드를 입력해 node 버전과 npm 버전을 확인해줍니다. 버전이 나온다면 성공적으로 설치되었습니다.

mkdir typescript-test
cd typescript-test

 

• npm 초기화 (프로젝트 설정 파일 생성)

npm init -y && yarn init -y

• 타입스크립트 설치

npm install typescript --save-dev && yarn add -D typescript

• 타입스크립트 컴파일러(tsc)가 설치되었는지 확인

npx tsc -v
// version 0.0.0

 

 

이제 설치가 완료되었다면 타입스크립트 프로젝트 설정 파일인 tsconfig.json을 생성해줍니다.

npx tsc --init

 

• tsconfig.json 파일은 타입스크립트 컴파일 옵션을 정의하는 파일입니다.
  • outDir: 컴파일된 파일 출력 경로
  • target: 자바스크립트 버전

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },
  "include": ["src/**/*"] // 컴파일 할 파일 경로
}

 

지금 버전에서 실행하면 json 파일에 너무 많은 코드들이 있을 것입니다. 그것들은 우선 지우시고 위 코드만 입력해줍니다.

typescript-bloging/
├── dist/          // 컴파일된 자바스크립트 파일이 저장될 폴더
├── src/           // 타입스크립트 소스 코드
│   └── index.ts   // 예제 파일
├── package.json
└── tsconfig.json

 

프로젝트 폴더구조는 이렇게 간결하게 만들어줍니다. src 폴더를 만들어주고 그안에 index.ts를 만들어서 간단한 코드를 작성해 보겠습니다.

// src/index.ts
function world(name: string): string {
      return `Hello. ${name}!`;
}

console.log(world("TypeScript"));

 

위 코드를 작성하고 타입스크립트를 실행시켜주려면 다음과 같은 명령문을 cmd에 입력해줍니다.

/* Typescript 파일을 자바스크립트로 컴파일 */
npx tsc

/* dist/index.js 가 생성된다 */
"use strict";
function world(name) {
    return `Hello. ${name}!`;
}
console.log(world("TypeScript"));

 

위 명령문을 실행하면 dist 폴더에 index.js 파일이 생성됩니다. 기존의 ts파일을 js파일로 변환시켜주는 명령어입니다. 이제 이 js 파일을 직접 실행해보겠습니다.

node dist/index.js

 

• 출력 결과

Hello. TypeScript!

 

5. ts-node로 간편하게 실행하기

 

매번 node로 실행하면 불편하니까 ts-node를 사용해서 좀더 간편하게 실행할 수 있습니다.

npm install ts-node --save-dev && yarn add -D ts-node

 

• ts-node로 타입스크립트 실행

npx ts-node src/index.ts

 

• package.json에 명령어 추가후 짧게 실행하기

// package.json에 "scripts" 추가
  "scripts": {
    "dev": "npx ts-node src/index.ts"
  },
  "devDependencies": {
    "typescript": "^5.7.3"
  },
  "dependencies": {
    "ts-node": "^10.9.2"
  }
}

 typescript-bloging  yarn dev                                                                                                                                                                                                               
yarn run v1.22.22
$ npx ts-node src/index.ts
Hello. TypeScript!
Done in 1.34s.