[타입스크립트] 타입스크립트 시작하기 - 2

 

타입스크립트 시작하기

 

1. 타입 정의하기

 

몇 가지 기본 타입

 

const(let) 변수명: 타입 = 값;

const one: number = 1;
const isTrue: boolean = 1 > 0;
const text: string = "텍스트";

const arr: number[] = [1, 2, 3];
const arr2: Array<number> = [4, 5, 6];
- 오류 arr2.push("가");

 

 

자바스크립트 내에서 array는 object로 인식을 한다.

타입스크립트를 사용함으로 array와 같이 자바스크립트로 관리하기 어려운 타입들을 관리할 수 있다.

또한 null과 undefined 도 관리가 가능한데 아래와 같이 유니온 타입을 선언할 수 있다.

| 로 사용하는 union 타입은 교집합이고 & 로 사용하는 intersection 타입은 합집합으로 이해할 수 있다. ( 기존 ||, && )

 

 

let unionNumber: number | undefined = '123';

 

 

any 타입은 모든 타입을 포용한다.

자바스크립트를 포팅 시, 타입을 정의하기 어려운 경우에 사용된다.

 

 

let value: any;
value = 100;
value = "hundred";
value = () => {};

 

 

아무것도 반환하지 않은 상태로 종료하는 함수는 void 타입으로 정의하고

항상 예외가 발생하거나 종료되지 않는 타입은 never로 정의한다.

객체는 object로 정의하나 인터페이스를 사용하는 것이 낫다.

 

function f1(): void {
	console.log("hello world");
}

function f2(): never {
	throw new Error("Error!!");
};

 

타입을 먼저 선언하고 해당 타입을 변수처럼 이용할 수 있다.

 

 

type Width = number | string;
let widthBox = Width;

widthBox = 100;
widthBox = '100px';

 

 

enum 타입

 

enum은 자바와 같은 다른 언어에는 있으나 자바스크립트에는 없는 타입이다.

enum 내에 선언한 원소는 타입으로 사용할 수도 있고 값으로 사용할 수도 있다.

원소에 값을 할당하지 않으면 자동으로 0이 할당된다.

일부 원소에만 값을 할당했다면 다음 값은 이전 값에서 +1 된 값이 할당된다.

아래 코드에서는 Orange에 6이 할당된다.

 

컴파일해보면 숫자는 양방향으로 매핑, 문자는 단방향으로 매핑이 된다.

 

enum Fruit {
    Apple,
    Banana = 5,
    Orange,
};

console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange);

 

 

함수 타입

 

함수에 타입을 선언하는 기본 형태는 다음과 같다.

 

function getText(name: string, age: number): string {
     /* 인자에 타입을 정의하고   괄호 밖에 return의 타입을 정의 */
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    return `name: ${nameText}, age: ${ageText}`;

};

/* 화살표 함수로 변환 */

const getText: (name: string, age: number) => string = function (name, age) {}
    return '';
;

 

매개변수의 오른쪽에 ? 물음표를 입력하면 선택 매개변수(optional parameters)가 된다.

선택 매개변수는 반드시 오른쪽 끝에 작성해야 한다.

지정한 타입 외에 undefined까지 사용할 수 있다.

 

기본값은 = 을 사용해 입력한다.

기본값은 입력하되 타입을 정의하지 않으면 기본값의 타입이 자동으로 적용된다.

 

function getText(name: string, age: number = 15, language: string = 'korean'): string {
    return '';
};

 

 

...은 rest parameters로 나머지 매개변수이다.

나머지 매개변수는 항상 배열로 타입 정의를 해야 한다. 

 

function getText(name: string, ...rest: number[]): string {
    return '';
};

 

 

this 타입

 

this를 사용하는 경우 매개변수 제일 앞에 this: string과 같이 타입을 지정해 줄 수 있다.

 

function getParam(this: string, index: number): string {
    const param = this.split(',');
};

 

내장 타입에 속성을 추가하고 싶을 때는 interface를 사용한다.

 

interface String {
    getParam(this: string, index: number): string;
};

String.prototype.getParam = getParam;