타입스크립트 입문 정리 #3 변수와 함수 타입 정의

기본 타입 - 문자열, 숫자, 배열

// JS 문자열 선언
const str = "hello";

// TS 문자열 선언
const strTs: string = "hello";

// TS 숫자
const num: number = 10;

// TS 배열 선언
const arr: Array<number> = [1, 2, 3];
const heros: Array<string> = ["Capt", "Thor", "Hulk"];

// TS 배열 선언 -> 배열 리터럴 사용
const items: number[] = [1, 2, 3];

위와 같이 문자열, 숫자, 배열을 선언해볼 수 있다.

배열 선언법에는 Array<Type> 방식과 type[] 방식이 있다.

기본 타입 - 튜플, 객체, 불리언

// TS 튜플
const nameAndAge: [string, number] = ["jakeseo", 100];

// TS 객체
const obj: object = {};

// TS 객체 프로퍼티의 타입 정의하기
const person: {
    name: string;
    age: number;
} = {
    name: "Jake",
    age: 100,
};

// TS 불리언
const show: boolean = true;

함수 타입 정의 - 파라미터 및 반환 값

// TS 기본 함수 정의 (파라미터 및 반환값에 타입 정의)
function sum(a: number, b: number): number {
    return a + b;
}

타입스크립트의 함수 파라미터 제한 성질

자바스크립트는 에러를 내지 않는다.

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

// 자바스크립트의 문제이자 유연함: 인자를 몇개를 넘기든 상관 없다.
add(10, 20, 30);

js에서는 위와 같이 필요 이상의 인자를 파라미터로 넘겨도 아무런 제약이 없다.

이는 js의 유연함이자 단점이다.

타입스크립트는 에러를 낸다.

// TS 기본 함수 정의 (파라미터 및 반환값에 타입 정의)
function sum(a: number, b: number): number {
    return a + b;
}

// TS는 함수의 스펙을 정확히 이해해서 에러를 내줌
// 필요 이상의 파라미터가 들어온다면 에러
sum(10, 20, 30, 40);

타입스크립트는 함수의 스펙을 정확히 이해하기 때문에, 추가적인 쓸모없는 인자를 더 넣어주면 에러가 발생한다.

타입스크립트 옵셔널 파라미터

// 함수의 옵셔널 파라미터
function sumOptionalParameter(a: number, b: number, c?: number) {
    if(c !== undefined) {
        return a + b + c;        
    }
    
    return a + b;
}

sumOptionalParameter(10, 20);
sumOptionalParameter(10, 20, 30);

위와같이 c가 들어올지 안 들어올지 모를 때는 ?라는 기호를 이용해서 옵셔널 파라미터로 만들면, 선택적으로 넣을 수도 안넣을 수도 있다.