타입스크립트 설치 및 타입 정의해보기

이번 포스팅에서는 타입스크립트 소개와 간단한 사용법에 대해 알아보겠습니다.

 

 

1. 타입스크립트란?

 

Javascript의 변수에 형(Type)을 부여해주고 그와 관련된 문법 검사를 해주는 것

 

 

특징

 

1) Javascript에 타입 기능을 추가하는것 (string, boolean, int 등)

 

2) 실시간 에러 처리

 

3) 오픈소스이며 정적타입 추가에 가장많이 사용되는 툴

 

4) 브라우저, OS에 독립적

 

5) .js 코드나 .ts 코드는 결과적으로는 동일하게 작동함

 

 

2. 왜 사용해야 할까?

 

1) Javascript에는 변수에 타입을 명시 할수있는 기능이 없다는 단점을 해결 가능함

 

ex) 함수나 변수명만으로는 그 타입을 한번에 알기 어렵다

 

2) 에디터에서 코드를 작성하면서 동시에 자동으로 문법오류 체크가 가능함

 

 

3. Javascript 를 위한 Typescript 시작하기

 

VSCode 환경에서 npm으로 타입스크립트 설치하기

 

 

3-1. 타입스크립트를 적용하기를 원하는 디렉터리에서 package.json 파일 생성

 

npm init y

 

 

3-2. npm을 통해 타입스크립트 설치하기

 

npm install typescript --save-dev

 

 

3-3. .ts 파일 생성 후 작동 확인

 

num 변수는 숫자만을 할당하는 것으로 선언하였다.

 

* ':타입' 을 통해 원하는 형(Type)을 명시할 수 있다.

 

 

3-4. npx tsc

 

타입스크립트 코드를 자바스크립트로 트랜스파일 하는 명령어이다.

 

npx tsc
npx tsc ./src/main.ts

 

 

.ts 파일이 .js 파일로 변환되었다.

 

 

4. Typescript 기본적인 사용법

 

* 사용가능한 타입 : boolean, bigint, null, number, string, object, undefined, any, never, tuple, array, void

 

 

4-1. 타입 선언

 

let helloWorld: string = 'Hello World';
helloWorld = 123;

let strHelloWorld = 'Hello World';

 

helloWorlds 변수는 string 으로 정의되었기 때문에 정수 삽입 불가

 

 

이제 helloWorld 변수는 string 형식임을 타입스크립트가 검사하고 있다.

 

타입 스크립트로 인해 strHelloWorld 와 같이 변수가 어떤 타입인지 변수 명으로 명시를 할 필요가 없어졌다.

 

 

4-2. 객체지향성을 활용한 타입 명시

 

객체 원소값들의 타입을 명시하고 싶을때는 어떻게 해야할까?

 

const user = { name: "Kim", id: 0, }

 

위와 같은 user 객체가 name은 string, id는 number 타입을 가지게 하는 방법은 인터페이스를 이용하면 된다.

 

interface User { name: string; id: number; }

 

이제 변수에 User 타입을 명시하게 되면 name은 string, id는 number 타입을 가져야 한다.

 

name에는 숫자 값, id에는 문자 값이 들어갈 수 없다.

 

 

Interface를 잘 정의 해놓으면 아래와 같이 여러번 재사용가능하다.

 

interface User { name: string, id: number };

const user: User = { name: "Kim", id: 0, };

const getUser = (): User => {
    return user;
}

const setUser = (name: string, id: number) => {
    user.name = name;
    user.id = id;
}

 

 

4-3. 타입 구성하기

 

간단한 타입을 활용하여 복잡한 새로운 타입을 만들수있다.

 

Unions, Generics 두 가지가 주로 활용된다.

 

- Unions

 

* 새로운 타입 선언 명령어 : type 변수명 = 값 | 값 ...

 

type MyBool = true | false;

type WindowStates = "open" | "closed" | "minimized";

type LockStates = "locked" | "unlocked";

type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

 

이런식으로 활용가능한데 위와같이 정의한다면 정한 변수만을 사용해야 한다.

 

exist 변수는 type에서 정의해놓은 상수 값만 대입 가능하다.

 

 

- Generics

 

Array에 입력되는 값의 타입을 명시할 수 있다. (C++ 에서 vector를 선언하는것과 비슷하다.)

 

type StringArray = Array<string>;

type NumberArray = Array<number>;

type ObjectWithNameArray = Array<{ name: string }>;

 

인터페이스로 사용자 정의의 Generics를 만들 수 있다.

 

interface Backpack<Type> {
    add: (obj: Type) => void;
    get: () => Type;
}

// backpack 은 string 타입으로 선언
declare const backpack: Backpack<string>;

backpack.add('something');

// object 는 string 타입을 얻음
const object = backpack.get();

 

* declare : Backpack<Type>의 Type을 사용자 정의 타입으로 선언하기 위해 사용

 

 

문자열 배열을 생성한 예제

 

 

4-4. 구조적 타입 시스템

 

타입스크립트는 실제로 타입을 명시해서 타입을 정의할 수 있지만 인터페이스의 구조적 형태로 타입을 자동지정할 수 있다.

 

이와같은 방식을 "shape matching", "duck typing”, “structural typing” 이라고 한다.

 

 

예제 1) 함수를 정의한 예제는 아래와 같다.

 

interface Point { x: number, y: number }

const printPoint = (p: Point) => {
    console.log(`X : ${p.x}, Y : ${p.y}`);
}

let pos = {x: 1, y: 2};

printPoint(pos);

 

위 코드에서 pos:Point 로 타입을 명시하지 않아도 오류가 발생하지 않음을 알 수 있다.

 

 

예제 2) 클래스를 정의한 내용은 아래와 같다.

 

class Point {
    x: number;
    y: number;

    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }

    printPoint(x: number, y: number) {
        alert(`X : ${x}, Y : ${y}`);
    }
}

const pos = new Point(12, 24);

pos.printPoint(pos.x, pos.y);

 

Class도 타입을 명시하지 않아도 동일하게 작동하는 것을 알 수 있다. (pos: Point가 없음)

 

 

 

- 참고한 사이트

 

1. Typescript

JavaScript With Syntax For Types.

 

2. Typescript 핸드북

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html