[TypeScript] 타입스크립트의 개념과 주요 기본 타입

타입스크립트란 ?

타입스크립트(TypeScript)는 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JavaScript의 상위집합(SuperSet) 언어 입니다.
typescript의 가장 큰 특징은 javascript에 type system를 적용한 것입니다.
typescript로 작성된 코드는 typescript 컴파일러 tsc를 통해 javascript로 변환되고 이를 실행하게됩니다.
typescirpt는 에러의 사전방지와 코드 가이드 및 자동완성 기능을 제공합니다.

Type System

타입 시스템(Type System)은 프로그래밍 언어에서 변수, 함수, 표현식 등의 값들에 타입을 부여하고 이러한 타입들 간의 상호작용을 규정하는 체계를 의미합니다.
TypeScript는 정적타입을 지원합니다. 변수의 정의와 함께 대입할 값의 타입을 함께 지정합니다.

변수를 정의 하면서 함께 지정하면 해당 타입의 데이터만 대입 가능하며 다른 타입 값을 대입하면 컴파일 시점에서 에러가 발생합니다.
변수의 선언과 마찬가지로 함수의 매개변수, 반환 값의 정의에도 동일한 시스템을 적용합니다.

JavaScript vs TypeScript

typesciprt를 사용해야하는 이유

아래 코드는 매개변수로 금액을 받아 입금을 하는 함수를 나타냈습니다.
javascript의 코드의 경우 매개변수로 문자열 숫자 상관없이 어떠한 값이 들어올 수 있습니다.
만약 함수의 매개변수로 문자열 숫자가 들어간다면 어떻게 될까요?
'10000'이라는 금액을 넣었을 경우 그 결과는 100 + '10000' 으로 자동형 변환에 의해 '10010000' 이라는 금액이 출력되게 됩니다.

// 현재 금액
let currentMoney = 100;
// 입금 함수
function deposit(money) {
  currentMoney += money;
  return `현재 금액은 ${currentMoney} 입니다.`
}
// 문자열 숫자가 만약 들어갔다면
deposit('10000') // '10010000'이 출력

아래 코드는 타입스크립트로 변수와 함수의 매개변수, 반환값의 타입을 지정해준 코드입니다.
여기서 만약 함수의 매개변수에 문자열 숫자를 넣으면 어떻게 될까요?
typescript는 javascript 처럼 작동 되지 않고 타입 에러를 발생 시키게 되어 에러를 사전에 방지할 수 있게 됩니다.

let currentMoney: number = 100;
function deposit(money:number): string {
  currentMoney += money;
  return 현재 금액은 ${currentMoney} 입니다.`
}
// 문자열 숫자가 만약 들어갔다면
deposit('10000') // 타입 에러가 발생

typescript의 장점과 단점

위에서 소개한 듯이 typescript는 정적 타입을 제공하며, 컴파일 시점에서 에러가 나타나 에러의 사전방지 할 수 있고, 코드 가이드 및 자동완성 기능을 제공하는 안전하고 예측 가능한 코드를 구현할 수 있다는 장점이 존재합니다.
하지만 typescript는 코드 작성에 제약이 많으며, 초기 프로젝트 설정에 대한 복잡성과 타입의 복잡성과 번거러운 타입 정의로 인해 코드 작성에 시간이 오래 걸리다는 단점이 존재합니다.

타입스크립트의 주요 기본 타입

변수나 함수의 타입을 정할 때 사용하는 타입을 의미합니다.
타입 정의시 변수명 뒤에 콜론(:)를 붙여 타입을 정의합니다.

(1) string

문자열을 의미하는 타입입니다. 문자열 타입 외의 다른 타입이 들어올 경우 에러가 발생합니다.

let name: string = 'Jon';

(2) number

숫자를 의미하는 타입입니다. 숫자 타입 외의 다른 타입이 들어올 경우 에러가 발생합니다.

let age: number = 20;

(3) boolean

불리언을 의미하는 타입입니다. 불리언 타입 외의 다른 타입이 들어올 경우 에러가 발생합니다.

let isLogin: boolean = false;

(4) obeject

객체 유형의 데이터를 취급하는 타입입니다. 해당 객체에 타입외 다른 타입이 들어올 경우 에러가 발생합니다.

let profile: object = { name: 'Jon', age: 20}

(5) Array

배열을 의미하는 타입입니다. 배열 타입 외의 다른 타입이 들어올 경우 에러가 발생합니다.
배열은 다른 타입들과 다르게 두 가지 방법으로 선언 가능합니다.

// T는 배열의 데이터타입
// 1. Array<T> 표기법
let animal: Array<string> = ['고양이', '강아지', '코끼리'];
// 2. T[] 표기법
let animal: string[] = ['고양이', '강아지', '코끼리'];

두 가지 타입중 string[ ] 선언방식이 더 직관적이기 때문에 권장 되는 선언 방식입니다.

(6) Tuple

특정 형태를 갖는 배열을 취급하는 타입입니다. 배열 길이가 고정되고 각 요소 타입이 정의된 배열을 의미합니다. 배열의 길이와 각 요소의 타입이 일치하지 않을 경우 에러가 발생합니다.

// 배열의 길이가 2가 아니거나 배열의 첫 번째 타입이 string 
// 두 번째 타입이 number가 아닐 경우에는 타입 에러가 발생합니다.
let produce: [string, number] = ['가방', 30000];

(7) Any

any 타입은 아무 데이터나 취급하는 타입입니다. 타입스크립트에서 자바스크립트의 유연함을 취하고자 할 때 사용하는 타입입니다.
any 타입은 편리하게 타입을 정의할 수 있지만 타입스크립트의 에러방지와 자동완성 기능이 적용이 안된다는 단점이 존재합니다.

// any 타입은 아무 타입을 취할 수 있어 어떤 타입을 넣어도 에러가 발생하지 않습니다.
let something:any = 'hello';
something = 100;
something = true;

(8) null과 undefined

null은 의도적인 빈 값을 의미하는 null만을 취급하는 타입입니다.
undefiend는 값 자체가 비어있음을 의미하는 undefined만을 취급하는 타입입니다.
strict 옵션에 따라 사용 방식이 달라질 수 있습니다.
strict 옵션이 false 일때는 두 타입은 모든 타입의 하위 타입으로 간주되지만, 모든 타입들을 포함할 수 없습니다.
strict 옵션이 true 일때는 두 타입은 모든 타입의 하위 타입으로 간주되지도 않고, 모든 타입들을 포함할 수 없습니다.

let myValue: null = null;
let myValue2: undefined = undefined;
// strict 모드가 아닐 시
// 다른 타입은 null과 undefind가 하위 타입으로 간주될 수 있음
let myName: string = myValue;
myName = myValue2

// 타입 에러 발생 null과 undefined는 다른 타입 취급불가
myValue = myName;
myValue2 = myName;

(9) never

never 절대 발생할 수 없는 타입을 의미합니다.
보통 함수나 표현식이 항상 예외를 던지거나 무한 루프에 빠져 종료되지 않는 경우에 해당 타입이 할당됩니다.

function throwError(message: string): never {
    throw new Error(message);
}

function infiniteLoop(): never {
    while (true) {
        // do something
    }
}

(10) void

void 타입은 함수나 메서드가 반환하는 값이 없음을 나타내는 타입입니다.

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

정리

typesciprt란 안전하고 예측 가능한 코드 구현에 초점을 맞춘 JavaScript의 상위집합(SuperSet) 언어로, 가장 큰 특징으로 type system이 적용 되어 있으며, 에러방지와 코드 사전 완성 기능을 제공합니다. typesciprt의 주요 기본 타입에는 string, number, boolean, object, Array, Tuple, Any, null, undefind, never, void 등이 있습니다.