[TS]타입스크립트란?

개요

TypeScript는 선택적 정적 타이핑 및 고급 기능을 JavaScript에 추가하는 JavaScript의 슈퍼셋입니다. 단지 이 설명만으론 무엇인지 이해하기 어려운데요, 간단한 예시를 통해 타입스크립트를 어떻게 사용하는지 알아보겠습니다.

function add(a, b) {
  return a + b;
}

let result = add(10, "20"); // 에러는 없지만 결과는 1020

위 코드는 JavaScript로 작성되었습니다. a, b가 string이든 number든 어떤값이어도 에러가 발생하지 않지만 결과가 의도대로 나오지 않습니다.
반면 아래코드는 TypeScript로 작성되었는데요. a, b가 가질 수 있는 값의 타입을 미리 정해두어 사전에 미리 에러가 발생함을 알 수 있습니다.

function add(a: number, b: number): number {
  return a + b;
}

let result = add(10, "20"); // 에러발생

간단히 요약하자면 코드가 동작하기 전, 미리 타입을 정해두어 오류가 발생할 수 있는 부분을 미리 알 수 있게 하고 이를 통해 결과적으로 오류를 최소화할 수 있습니다. 또한 타입을 명시해 두었기 때문에 다른 작업자도 코드를 이해하기 수월해지겠죠??

타입종류

앞서 타입을 미리 지정한다라고 했는데 예시를 통해 몇 가지 규칙을 알아보겠습니다.

기본

• number: 숫자
• string: 문자열
• boolean: 논리값(true/false)
• null, undefined: 값이 없음
• void: 반환값이 없음을
• any: 모든 타입(꼭 필요한 경우 사용할 수 있지만 남용시 타입스크립트 사용목적을 해침)

const num: number = 10;
const str: string = "Hello";
const bool: boolean = true;
const nul: null = null;
const undef: undefined = undefined;
const nothing: void = undefined;
const anyType: any = 10;

튜플

고정된 개수와 타입의 순서대로 배열 요소 정의
예를 들어, [number, string]은 숫자와 문자열이 순서대로 있는 배열을 의미

const tuple: [number, string] = [1, "hello"];

배열

숫자로만 이루어진 배열

const numbers: number[] = [1, 2, 3, 4, 5];

문자로만 이루어진 배열

const strings: string[] = ["apple", "banana", "orange"];

객체

키와 밸류의 타입을 지정

const obj: { id: number, name: string } = { id: 1, name: "John" };

함수

매개변수의 타입과 리턴값의 타입을 지정

function add(a: number, b: number): number {
    return a + b;
}

제네릭

타입을 파라미터화하여 여러 타입에 대해 일반적으로 작동하는 함수나 클래스를 만들 수 있음
함수를 만들 때 타입을 지정하지 않고, 사용할 때 실제 타입을 지정

function identity<T>(arg: T): T {
    return arg;
}
const output = identity<string>("hello");

유니온

두 개 이상의 타입 중 하나(or)
number | string와 같이 |를 사용하여 여러 타입을 나열

const union: number | string = 10; // 또는 "hello"