타입스크립트 프로젝트 만들기 - 타입정의

본격적으로 타입스크립트 프로젝트를 하기 위한 셋팅은 끝났습니다.
프로젝트를 들어가기전에 알아 두셔야 하는 개념부터 알고 들어가 보도록 합시다.
타입스크립트는 모든 변수나 파라미터, 프로퍼티 등의 타입을 정의 해야 합니다.
(실제로 타입정의에 대한 비용 때문에 타입스크립트 도입에 대해 고민을 많이하죠^^)

타입 예제

const numberArray: number[] = [1, 2, 3];  
const number: number = 1;  
const string: string = 'text';  
const stringArray: string[] = ['1', '2', '3'];  
const boolean: boolean = true;
function example(param: string): string {
    return param;
}
const returnString: string = example('string');

뭔가 알것도 같은데 잘 모르겠는 부분들 있으실꺼에요.
익숙해지면 쉽게 이해 하실 수 있으시리라 생각듭니다.
예전 방식으로 프로그래밍을 하게 되면 빨간색 에러코드들을 만나시게 될꺼에요.
이렇게 자신이 사용할 변수와 함수,메서드,프로퍼티,파라미터 모든 코드에 타입을 지정하셔야 해요.

기본적으로 타입들에 대해 설명해 드릴께요.

const numberArray: Array[number] = [1, 2, 3]; // 제너릭을 이용한 타입선언
const tuple: [string, number] = ['1', 1];
tuple[1]; // return '1'
tuple[2]; // return 1
enum Color {Red, Orange, Blue};
const isRed: Color = Color.Red; // 1

tuple은 여러가지 타입을 혼용 할 수 있고, 해당 인덱스의 타입을 지정할 수 있어요.
하지만 역시 지정된 타입말고 다른 타입을 사용하게 되면 에러를 내겠죠?
enum은 사용하면 이름이 부여된 상수 집합을 정의할 수 있게 되죠.
다양한 enum이 존재하는데 유한한 경우의 수를 갖는 값의 집합을 표현하기 위해 사용합니다.
직접 맴버값을 초기화 할 수도 있습니다.

enum Color {
    Red = 2,
    Orange = 4,
    Blue = 6
};
const isRed: Color = Color.Red; // 2

만약 초기화 되지 않은 멤버가 섞여있다면, 그 멤버의 값은 이전에 초기화된 멤버의 값으로부터 순차적으로 증가해서 결정됩니다.
number 대신에 string을 사용할 수 도 있습니다.

enum Color {
    Red = 'red',
    Orange = 'orange',
    Blue = 'blue'
};
const isRed: Color = Color.Red; // 'red'

문자열은 자동증가 시키는 개념은 없습니다. 모든 멤버는 명시적 초기화 되어야 합니다.
숫자 enum과 다르게 컴파일된 자바스크립트 코드에 값 -> 키의 역방향 매핑이 존재하지 않습니다.
숫자와 문자를 같이 사용하는 이형 enum은 사용하지 않는 것을 권장하지 않습니다.(혼란을 불러올 수 있음)
enum의 멤버를 컴파일 타임에 알 수 있는 상수값으로 초기화 된 것은 상수멤버라 부릅니다.
enum에 대해서는 따로 포스팅글을 작성하는 것으로 하고 다음 타입에 대해서 알아봅시다.

const numberArray: any = [1, 2, 3];  
const number: any = 1;  
const string: any = 'text';  
const stringArray: any = ['1', '2', '3'];  
const boolean: any = true;
function example(param: any): any {
    return param;
}
const returnString: any = example('string');

any는 모든 타입의 값을 허용해 주고, 모든 값을 집어넣을 수 있어요.

function example(): void {
    console.log('example');
}

void는 아무런 타입을 가지지 않아야 할 경우, 함수에는 사용하나 변수에는 맞지 않습니다.
변수에 void를 사용하면 undefined나 null을 모두 사용할 수 있기 때문입니다.(구분하기 어려우므로)

타입변경

let examples: any = 'examples';
const exampleCount: number = (examples as string).length; // ok

as를 사용해서 타입 지정을 해주고 사용하시면 됩니다.
미리 몇번씩 타입지정을 연습해보고, 프로젝트를 만들시길 권장합니다.