'소프트웨어개발/TypeScript'에 해당되는 글 1건

  1. TypeScript, Visual Studio Code를 이용한 Hello World 출력하기 (1)

TypeScript, Visual Studio Code를 이용한 Hello World 출력하기

TypeScript 컴파일러 설치

  • TypeScript 프로젝트 작성에 앞서 최신 버전(현재 1.8.10)의 컴파일러를 설치해야 한다. TypeScript 컴파일러는 NPM(Node.js Package Manager)을 통해 설치 가능하다. Node.js 홈페이지에서 Windows Installer를 다운로드하여 설치한다. 설치가 완료되면 커맨드 창에서 아래와 같이 TypeScript 컴파일러를 설치한다.
npm install -g typescript

Visual Studio Code 설치

  • TypeScript는 마이크로소프트가 주도하고 있는 프로젝트이다. 마이크로소프트는 Visual Studio Code(VSCode)라는 IDE를 무료 공개하여 TypeScript를 지원하고 있다. 여기에서 다운로드하여 설치한다.

프로젝트 생성

  • 프로젝트 파일이 저장될 임의의 폴더를 생성한다. 본 예제에서는 typescript-helloworld를 폴더명으로 사용한다.
  • Visual Studio Code 실행 → 파일폴더 열기 → 앞서 생성한 폴더를 선택하고 폴더 선택를 클릭한다. 왼쪽 탐색기에 TYPESCRIPT-HELLOWORLD가 생성된 것을 확인할 수 있다.
  • 탐색기의 프로젝트 루트에서 새 파일tsconfig.json을 생성한다. tsconfig.jsonTypeScript의 컴파일러에게 전달할 옵션 정보를 담고 있다. 아래와 같이 작성한다.
{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true,
        "exclude": [ "node_modules" ]
    }
}
  • target 옵션은 어떤 ECMAScript 스펙의 JavaScript 소스 코드로 컴파일될 지를 결정한다. 기본값은 es3(IE 6-8 호환)으로 es5(IE 9 호환), es6를 명시할 수 있다. JavaJDK 버전을 생각하면 된다.

TypeScript Definition 설치

Visual Studio Code의 가장 큰 장점은 TypeScript Definition의 지원이다. 프로젝트에 사용할 외부 라이브러리의 TypeScript Definition 파일을 설치하면 Java, C#과 비슷한 느낌의 강력한 타입 체크 기반의 소스 코드를 작성할 수 있다. 개발자가 느낄 수 있는 가장 큰 헤택은 코드 어시스트 기능의 작동일 것이다. TypeScript 뿐만 아니라 JavaScript에도 적용할 수 있다. 먼저 TypeScript Definition의 설치를 도와주는 Typings 확장 프로그램을 설치해야 한다.


  • CTRL + P 단축키 입력 -> ext install typings 입력 -> Typings Installer 선택 -> Visual Studio Code 재시작

Typings 확장 프로그램을 설치하였다면 .d.ts를 확장자로 가지는 TypeScript Definition 파일을 프로젝트에 설치할 수 있다. 설치 방법은 아래와 같다. (설치 가능한 목록은 DefinitelyTyped에서 확인할 수 있다.)


  • CTRL + P 단축키 입력 → >typings 입력 → Typings Installer: Typings 선택 → jquery 입력 → dt~jquery 선택 → global 선택 → save 선택 → Typings for 'dt-jquery' installed successfully! 문구가 출력되면 설치 완료
  • 설치된 TypeScript Definition 파일들은 프로젝트의 /typings 폴더에 저장된다.

TypeScript를 활성화려면 JavaScript의 경우 /jsconfig.json, TypeScript의 경우 /tsconfig.json 파일을 작성하면 된다.(빈 내용의 파일만 생성해도 설치된 TypeScript Definition이 적용된다.)

프로젝트 작성

문자열을 출력할 /helloworld.html 파일을 아래와 같이 작성한다.

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="utf-8">
  <title>Hello, TypeScript!</title>
</head>

<body>
  <script src="helloworld.js"></script>
</body>

</html>
  • BODY 엘러먼트의 마지막 부분에 helloworld.js 파일을 로드하는 것을 확인할 수 있다. 프로젝트 작성 시점에는 .JS 파일이 존재하지 않는다. TypeScripthelloworld.ts를 작성하고 컴파일하면 동일한 파일명에 확장자만 다른 helloworld.js가 생성된다.

출력될 문자열을 담을 /helloworld.ts 파일을 아래와 같이 작성한다.

let greeting = "<h1>Hello, TypeScript!</h1>";
document.body.innerHTML = greeting;

프로젝트 빌드

  • 프로젝트 작성이 완료되어 빌드할 차례이다. TypeScript 개발 언어로 작성된 .TS 파일들은 .JS 파일로 컴파일될 것이다.
  • 프로젝트 빌드는 SHIFT + CTRL + B 단축키를 이용한다. 처음 실행하면 구성된 Task Runner 가 없습니다.라는 메시지가 출력될 것이다. Task Runner 구성 클릭 후 TypeScript - tsconfig.json을 선택하면 빌드 준비가 완료되어 단축키를 이용한 빌드가 가능하다.

Visual Studio Code 단축키 지정

  • 이미 익숙하게 사용 중인 IDE가 있다면 VSCode의 단축키는 혼란스러울 것이다. 임의의 단축키를 입맛대로 설정할 수 있다.
  • 파일기본 설정바로 가기 키 → 오른쪽 keybindings.json에 아래 내용을 추가한다. 아래는 가장 많이 사용하는 소스 코드 포맷, 선언부 이동 기능을 IntelliJ IDEA와 동일한 단축키로 설정한 것이다.
[
    {
        "key": "ctrl+alt+l",
        "command": "editor.action.format",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+b",
        "command": "editor.action.goToDeclaration",
        "when": "editorTextFocus"
    }
]

추천 확장 프로그램

Visual Studio Code는 개발 생산성을 높여주는 여러 유용한 확장 프로그램을 제공한다.


저작자 표시 비영리 동일 조건 변경 허락
신고