안녕하세요. 오늘은 TypeScript에 대해 알아보고, 공식 문서에서 제공하는 튜토리얼을 따라해보도록 할께요.
TypeScript란?
타입스크립트는 동적 타입 언어(Dynamic Type Language)인 기존 자바스크립트의 단점을 보완하기 마이크로소프트(Microsoft)에서 만든 정적 타입 언어(Static Type Language)입니다.
요즘 유행하고 있는 프론트엔드 프레임워크인 AngularJS, React, Vue.js 등의 프레임워크도 타입스크립트를 지원하고 있습니다.
TypeScript 설정하기
TypeScript는 여러가지 방법으로 사용할 수 있습니다. npm을 설치한 설정방법이 있고, Visual Studio Code IDE를 이용하여 설치도 가능합니다. Visual Studio Code IDE에서는 기본적으로 타입스크립트를 제공하므로 이용하시면 편리합니다.
npm 설치하기
npm을 설치하기 위해서는 Mac 또는 리눅스(Linux) 환경에서는 터미널로, 윈도우 환경에서는 CMD 모드(명령프롬프트)에서 설치하실 수 있습니다. Node.js를 설치하면 npm이 기본적으로 설치되니 Node.js만 설치하시면됩니다.
npm install -g typescript
만약, npm이 설치되어있지 않다면 Mac 또는 리눅스(Linux)에서는 homebrew 패키지 매니저에서 설치하시면 되고, 윈도우에서는 Node.js 공식 홈페이지에서 Windows 인스톨러로 설치하시면 됩니다.
Mac 또는 리눅스에서 Node.js 설치하기
Homebrew 패키지 매니저로 설치하시면 됩니다.
homebrew install node
Windows에서 Node.js, npm 설치하기
Node.js 공식홈페이지 다운로드 링크 : https://nodejs.org/ko/download/
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js, npm 버전 확인하기
Node.js 및 npm이 설치되었으면 설치된 버전을 확인하세요. 설치버전이 나오지 않는다면 정상적으로 설치된 것이 아니므로 재설치 해주세요.
node -v
v17.0.1
npm -v
8.1.0
Visual Studio Code에서 TypeScript 코드 만들기
프로젝트 폴더 설정
Visual Studio Code를 실행하고, 왼쪽 사이드 메뉴에서 문서 모양 아이콘의 Explorer 메뉴를 선택하고 프로젝트를 폴더를 설정하기 위해 Open Folder를 선택해주세요.
프로젝트를 설정할 폴더를 선택하고 열기를 누릅니다. 프로젝트 폴더가 설정이 완료됩니다.
TypeScript 파일 생성
TypeScript 파일을 만들기 Explorer 메뉴에서 프로젝트를 선택해주고 New File 아이콘을 선택해주세요. 그리고 생성할 파일명을 입력합니다. greeter.js를 입력해주시고 키보드의 Enter키를 입력해주세요.
5분 안에 보는 TypeScript 따라해보기
TypeScript 튜토리얼 페이지에 있는 5분 안에 보는 TypeScript를 따라해보기 해보도록 할께요.
튜토리얼 페이지 링크 : https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html
Documentation - TypeScript Tooling in 5 minutes
A tutorial to understand how to create a small website with TypeScript
www.typescriptlang.org
greeter.ts 작성하기
아래와 같이 greeter.ts 파일을 작성합니다. 아래 코드를 간단하게 설명하자면, "Hello, 사람명"을 출력하는 greeter라는 함수를 만들고, Jane User라는 변수에 사람의 이름을 입력한 뒤, 그것을 화면에 출력하는 간단한 예제입니다.
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);위의 코드는 단순한 Javascript의 코드입니다. 이 코드를 컴파일 해보면서 실제 진행해볼께요.
tsconfig.json 생성
TypeScript 파일은 Javascript로 실행되기 위해 컴파일 작업을 진행하여야 합니다. Visual Studio Code에는 TypeScript가 포함되어있지만, 컴파일 작업을 위한 tsc는 포함이 되어있지 않아 npm을 이용해 직접 설치를 진행해주어야 합니다.
npm install -g typescript
tsc가 설치되었는지 확인하기 위해 tsc --version을 입력해주시면 설치된 tsc의 버전이 확인됩니다.
tsc --version
Version 4.6.2
TypeScript 프로젝트를 진행하면 가장 처음으로 진행하는 작업이 tsconfig.json을 만드는 작업입니다.
tsconfig.json 파일은 컴파일러의 옵션과 포함해야 되는 파일 등의 프로젝트 설정을 할 수 있습니다. Visual Studio Code 좌측의 EXPLORER 메뉴에서 해당 프로젝트의 파일을 tsconfig.json으로 생성해 주세요.
tsconfig.json 파일의 내용은 아래와 같이 입력해주세요.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
ts 빌드 작업 실행
Visual Studio Code의 상단의 터미널 메뉴를 선택하고, 빌드 작업 실행을 선택해주세요.
tsc: 빌드 - tsconfig.json을 선택해주세요.
컴파일의 결과로 greeter.js.map, greeter.js 파일이 생성이 됩니다. map 확장자의 파일은 ts파일과 js파일의 매핑을 위해 생성된 파일이고, js파일은 실제 컴파일된 결과 파일입니다.
greeter.js 파일의 결과 내용입니다. 여기에서는 let user로 시작하는 변수 선언이 var user로 변경이 된 것을 확인할 수 있습니다. 이 부분은 tsconfig.json에서 es6문법을 es5로 변경하겠다고 선언을 해서 변경이 된 부분입니다. 그리고 매핑파일이 greeter.js.map 파일이라는 것이 명시되어 있습니다.
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.textContent = greeter(user);
//# sourceMappingURL=greeter.js.map
ts파일 수정
다음 작업을 해보기 전에, 아래와 같이 코드를 변경해줍니다. 코드는 person: string이라는 인수가 추가되었습니다.
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);
Type Annotation
타입에 대한 표기는 변수의 의도된 설정을 알려주는 부분입니다. 타입 체크를 통해 프로그래밍을 올바르게 할 수 있도록 의도합니다.
아래와 같이 코드를 변경해보겠습니다. user 변수에 문자열이 아닌 배열을 대입하였습니다.
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.textContent = greeter(user);
다시 컴파일을 해보면, 아래와 같은 오류메시지를 볼 수 있습니다. 변수의 타입을 문자열인 string으로 선언했는데, 숫자 배열의 형태로 데이터가 만들어져 오류가 발생합니다. 실제 컴파일은 js파일까지 생성이 되었지만, 이 부분은 javascript 실행시 오류를 일으킵니다. 컴파일시 오류메시지를 보았을 때 반드시 수정하여 해결해야 합니다.
Interface
TypeScript는 프로그래밍에서 자주 사용되는 인터페이스도 이용할 수 있습니다. firstName과 lastName이 인터페이스의 매개변수입니다. Person이라는 인터페이스를 만들고, greeter 함수에 firstName과 lastName을 명시해주도록 변경합니다. user 변수에도 firstName과 lastName을 넣어주는 JSON 타입의 객체를 선언해줍니다.
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.textContent = greeter(user);
Class
TypeScript는 클래스 기반 객채지향 프로그래밍의 기능도 지원합니다. Student라는 클래스를 선언하고, fullName이라는 변수와 firstName, middleInitial, lastName을 받는 생성자를 만들어 주었습니다. 그리고 user 변수를 선언할 때 이 클래스를 호출하도록 변경이 되었습니다.
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
이를 컴파일하면 아래와 같은 코드로 Javascript 파일이 생성이 됩니다.
var Student = /** @class */ (function () {
function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);
//# sourceMappingURL=greeter.js.map
TypeScript 웹 앱 실행하기
지금까지 만든 코드를 웹 브라우저에 띄워 실행해볼께요. greeter.html 파일을 생성하고 아래와 같이 작성해주세요.
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>
그리고 Visual Studio Code 상단의 실행을 선택하고 디버깅 시작을 선택합니다.
그리고 나타나는 디버깅 환경 선택 화면에서 Chrome을 선택합니다. Chrome 브라우저가 없다면, 설치되어있는 다른 브라우저를 선택하면 되지만 권장드리는 브라우저는 Chrome입니다.
Chrome 브라우저가 실행되며 아래와 같이 결과가 나옵니다.
여기까지 TypeScript의 기본 튜토리얼을 진행해보았습니다.
이 포스팅을 끝까지 읽어주셔서 감사합니다.
댓글