Type Script 정리 - 1. 타입스크립트 시작하기

본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다.

본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다.

 

1. 타입스크립트 시작하기

1-1. 설치 및 설정

배경

타입스크립트는 자바스크립트 코드로 바로 컴파일하여 사용하기위한 자바스크립트의 형식화된 스크립트 코드이다.

타입스크립트는 .ts 확장자를 사용한다.

많은 IDE가 특별한 설치 없이 타입스크립트를 지원하지만, command line 에서도 Node.JS의 Typescript 패키지를 활용하여 컴파일 할 수 있다.

 

TypeScript를 지원하는 IDE

Visual Studio

Visual Studio Code

WebStorm

IntelliJ IDEA

Atom & atom-typeScript

Sublime Text

 

컴파일 설정은 tsconfig.json 파일을 확인하면 된다.

 

1-2. 기본 문법

타입스크립트는 자바스크립트의 정형화된 슈퍼셋 코드이다. 이것은 자바스크립트의 코드가 타입스크립트에서 유효하다는 의미이다.

 

타입스크립트는 객체지향 언어인 자바나 C#과 비슷하게 타입이 엄격하게 적용되어있는 자바스크립트를 만들어낸다.

타입이 엄격하게 정의된 타입스크립트는 거대한 프로젝트나  쉽게 사용하는 경향이 있으며, 코드가 쉽게 이해되고 유지보수가 쉬운 경향이 있다.

이는 자바스크립트가 가지고있는 갖아 큰 약점을 보완하는 것이다.

 

타입 정의

타입은 '변수선언 변수명: 변수타입 = 값'과 같은 형태로 선언한다.

예를 들면 다음과 같이 정의한다.

let num: number = 5;

컴파일러는 이렇게 정의된 타입을 보고, 잘못 입력된 값이 있으면 에러를 반환한다.

let num: number = 5;
num = 'this is a string'; // error: Type 'string' is not assignable to type 'number'.

기본형은 다음과 같다.

• number(정수형과 실수형 모두 포함한다)
• string
• boolean
• Array. 두 가지 형식으로 형을 선언할 수 있다.
  • number[] - 숫자형 Array
  • Array<string> - 문자열형 Array
• Tuples. 튜플은 특정 개수 요소의 형을 지정할 수 있다.
  • [boolean, string] - boolean, 문자열 두 개의 형을 가진 튜플
  • [number, number, number] - 3개의 숫자형 튜플
• {} - 객체. 각 프로퍼티와 인덱스에 형을 지정할 수 있다.
  • {name: string, age: number}
  • {[key: string]: number} - 문자열로 인덱싱된 숫자의 dictionary
• enum - 열거형
• Function. 특정한 형을 반환하는 함수를 선언할 수 있다.
  • (param: number) => string - 파라미터는 숫자형, 반환 타입은 문자열
  • () => number - 파라미터는 없고, 반환타입은 숫자
  • (a: string, b?: boolean) => void - 첫번째 파라미터는 문자열, 두번째 문자열은 null이 허용되는 boolean이며 반환값이 없는 함수
• any -  모든 형이 허용된다. 정확히는 형 검사를 하지 않는다.
• void - 아무것도 아닌 것이다. null 또는 undefined만 허용된다.
• never
  • let foo: never; - 타입가드가 true로 반환되지 않는 변수
  • function error(message: string): never { throw new Error(message); }

캐스팅

<>를 이용하여 캐스팅을 할 수 있다.

let derived: MyInterface;
(<ImplementingClass>derived).someSpecificMethod(); // 1.
(derived as ImplementingClass).someSpecificMethod(); // 2.

타입스크립트 1.6버전에서는 as를 기본 키워드로 사용하고 있다. jsx파일에서 <>를 ambiguous 로 사용하기 때문이다.

 

클래스

클래스는 타입스크립트코드에서 정의하고 사용할 수 있다.

자세한 내용은 클래스 섹션에서 설명하도록 한다.

 

1-3. Hello World

class Greeter {
	greeting: string;
    
    constructor(message: string) {
    	this.greeting = message;
    }
    greet(): string {
    	return this.greeting;
    }
};

let greeter = new Greeter("Hello, world!");
console.log(greeter.greet());

Greeter 클래스는 constructor, greet 메소드를 가지고 있다. new 키워드를 사용하여 클래스를 구성하고, greet 메소드를 사용하여 콘솔에 출력했다. greeter 변수에 이 클래스를 저장하고, greeter 변수에서 greet 메소드를 호출했다.

 

1-4. ts-node를 사용하여 타입스크립트 실행하기

ts-node는 사용자가 tsc를 실행하지 않으면서 타입스크립트를 바로 컴파일하고 실행하는 것을 허용하는 npm 패키지이다.

REPL이 제공한다.

설치방법

npm install -g ts-node
npm install -g typescript

ts-node를 사용하기 위해서는 typescript 패키지도 함께 설치해야한다.

 

스크립트 실행

 

//main.ts
console.log('hello world');

사용법

$ ts-node
> const sum = (a, b): number => a + b;
undefined
> sum(2,2)
4
> .exit