TypeScript 정적 타이핑

TypeScript 정적 타이핑

TypeScript의 정적 타이핑에 대해 알아보겠습니다.

1. 타입 선언

TypeScript에서는 다음과 같이 변수명 뒤에 타입(자료형)을 명시하여 타입을 선언하는 것이 가능합니다.

let text: string = 'Hello';

또한 타입 선언 후 맞지 않는 값을 할당하면 컴파일할 때 에러가 발생합니다.

타입 선언의 특징은 다음과 같습니다.

• 개발자의 코드 예측 가능 및 개발 효율 향상
  
• 강력한 타입 체크 기능으로 문법 에러나 일치하지 않는 값의 할당 오류 등을 런타임 이전에 검출

TypeScript는 ES5, ES6의 상위 집합이므로 기존 JavaScript의 타입을 그대로 사용할 수 있습니다. 

다음은 TypeScript와 JavaScript의 타입을 정리한 내용입니다.

Type	JavaScript	TypeScript	내용
boolean	O	O	true / false
null	O	O	값이 없는 상태
undefined	O	O	값이 할당되지 않은 상태
number	O	O	숫자(정수, 실수, Infinity, NaN)
string	O	O	문자열
symbol	O	O	고유하며 수정 불가능한 데이터 타입  (주로 객체 프로퍼티의 식별자로 사용되며 ES6에서 추가)
object	O	O	객체형(참조형)
array	X	O	배열
tuple	X	O	고정된 요소의 수만큼의 자료형을 미리 선언 후 배열로 표현
enum	X	O	열거형 (숫자 값 집합에 이름을 지정)
any	X	O	타입 추론이 불가능하거나 타입 체크가 필요없는 변수에 사용  (var 키워드로 선언한 변수의 역할과 동일하며,  어떠한 타입의 값이라도 할당 가능)
void	X	O	함수에서 반환값이 없는 경우 사용
never	X	O	결코 발생하지 않는 값

타입을 선언하는 방법은 다음과 같습니다.

// boolean
const booleanType: boolean = false;
 
// null
const nullType: null = null;
 
// undefined
const undefinedType: undefined = undefined;
 
// number
const numberType: number = 1234;
 
// string
const stringType: string = 'Hello';
const templateStringType: string = `World`; // ES6 템플릿 문자열
const greeting: string = `Hello ${templateStringType}`;  // ES6 템플릿 대입문
 
// object
const object: object = {};
 
// array
const arrayType1: any[] = [1, 'two', true];
const arrayType2: number[] = [1, 2, 3];
const arrayType3: Array<number> = [1, 2, 3];
 
// tuple
let tupleType: [string, number];
tupleType = ['hello', 1];
tupleType.push('world', 2);
 
// enum
enum ENUM_TYPE {
    RED = 1,
    GREEN = 2,
    BLUE = 3
}
 
// any
let anyType: any = '';
anyType = 'Hello World';
anyType = 1234;
 
// void
public voidFunc(): void {
    console.log('voidFunc()');
}
 
// never
public neverFunc(): never {
    throw new Error('neverFunc() Error');
}

또한 다음과 같이 객체형도 타입으로 선언하여 사용할 수 있습니다.

// Date 타입
const today: Date = new Date();
    
// Person 타입
class Person {}
const person: Person = new Person();

2. 정적 타이핑

JavaScript는 동적 타입 또는 느슨한 타입(Loosely Typed)의 언어입니다. 이것은 변수에 값이 할당되는 과정에서 동적으로 타입을 추론한다는 의미입니다. 그렇기 때문에 동적 타이핑의 경우 같은 변수에 여러 타입을 교차하여 할당하는 것이 가능합니다. 동적 타이핑은 사용하기에 간편하지만 코드 예측이 어려워 예상치 못한 오류가 발생할 가능성이 높습니다.

반면에 TypeScript는 기본적으로 정적 타이핑을 지원합니다. 정적 타이핑은 타입을 명시적으로 선언하고 타입이 선언된 이후에는 변경할 수 없습니다. 그렇기 때문에 선언된 타입과 다른 잘못된 값이 할당되면 컴파일시 에러를 발생합니다. 이러한 정적 타이핑의 특징으로 인하여 코드 가독성, 예측성, 안정성에서 장점을 가질 수 있습니다.

정적 타이핑은 변수, 함수의 매개변수, 반환값에 사용되며 다음과 같이 사용합니다.

let stringType: string;
let numberType: number;
let booleanType: boolean;
    
stringType = 'Hello';
numberType = 1234;
booleanType = 'false';  // Error
    
public addFunc(x: number, y: number): number {
    return x + y;
}

동적 타입과 정적 타입의 차이는 다음과 같습니다.

• 동적 타입
  변수의 타입 선언 없이 값을 할당.
  변수에 값이 할당되는 과정에서 동적으로 타입을 추론.
  변수의 타입 결정 이후에도 같은 변수에 여러 타입의 값을 교차하여 할당 가능.
  사용이 간편하지만 코드 예측이 어려워 예상치 못한 오류 발생 가능성이 있음
• 정적 타입
  타입을 명시적으로 선언.
  타입 결정 이후에는 타입 변경 불가능.
  잘못된 타입의 값이 할당되면 에러 발생.

3. 타입 추론

타입 선언을 생략하면 값이 할당되는 과정에서 동적으로 타입이 결정됩니다. 이를 타입 추론(Type Inference)이라고 합니다.

아래 예시의 경우 타입을 선언하지 않았으나 타입 추론에 의해 타입이 결정된 것을 확인할 수 있습니다.

const type = 1234;
console.log(typeof type); // number

TypeScript의 경우 정적 타입 언어이기 때문에 타입 추론으로 타입이 결정된 이후에 다른 타입의 값을 할당하면 에러가 발생합니다.

let type = 1234;
type = 'hello'; // Error

또한 타입 선언과 값의 할당을 모두 생략하여 타입 추론이 불가능한 경우엔 any 타입이 됩니다. 이러한 경우는 어떠한 타입도 할당이 가능하기 때문에 사용하지 않는 것이 좋습니다.

let type;
 
type = 1234;
console.log(typeof type); // number
 
type = 'hello';
console.log(typeof type); // string

이상으로 TypeScript 정적 타이핑에 대해 알아봤습니다.

※ 참고 문헌

• 이웅모 지음, 『Angular Essentials』, 루비페이퍼(2018), p122 ~ p129. 4.4 정적 타이핑

• poiemaweb.com, TypeScript 정적 타이핑, https://poiemaweb.com/typescript-typing