165일차 - TypeScript's types

TypeScript 오류검사 추가 설명

만약 자바스크립트에서 string타입을 지정하려면 아래같이 선언할 수 있다.

const str = 'hello world'

그런데 string의 약자인 str이라고 명시 해놓고 잘못하다 숫자를 지정해 줄 수도 있다. 아래와 같이 말이다.

const str = 1;

자바스크립트에서는 str은 그냥 변수명이기 때문에 개발자가 string타입을 할당하고 싶은지, number타입을 할당하고싶은지 모르는 것이다.
TypeScript에서는 이런 오류를 사전에 잡을 수 있다.

const str: string = 'hello world'

만약 사용자가 실수로 변수를 string타입으로 지정하고 할당을 잘못해도 Typescript는 오류를 잡아준다.

let str = string;
string = 1; // type error: Type 'number' is not assignable to type 'string'

자바스크립트로 파일을 작성했더라면 코드를 실행하고 나서야 오류를 발견했을 것이다.

TypeScript 원시타입

TypeScript의 원시 타입에는 string, number, 그리고 boolean이 존재한다.
각 선언방식은 아래와 같다.

TS string 선언

const str: string = 'hello world'

TS number 선언

const num: number = 1;

TS boolean 선언

const boo: boolean = true;

TypeScript 배열, 튜플, 그리고 객체

배열

TypeScript에서 배열을 선언하는 방식은 두 가지가 있다.

1.number[]방식

const arr1: number[] = [1, 2, 3];
const arr2: string[] = ['hello', 'world'];

배열 모양의 바로 앞에 안의 요소들의 타입을 정의하는 방식이다.

2. Array<number>방식

const arr1: Array<number> = [1, 2, 3];
const arr2: Array<string> = ['hello', 'world'];

방식만 다를 뿐이지 위와 같다.
특이한 점은 Array같이 첫 문자를 대문자로 써줘야한다.

[number]이라고 헷깔릴 수도 있는데 이는 배열이 아니라 튜플이다.

튜플

자바스크립트에는 존재하지 않는 타입으로 길이와 타입이 고정된 배열이다.
만약 길이는 2이고 첫 번째 인자는 number 두 번째 인자는 string으로 이루어진 배열을 생성하고 싶다면, 다음과 같이 선언하면 된다.

const arr: [number, string] = [1, 'hello'];

객체

객체는 단순하게 object라고 선언하면 된다.

const obj: object = {};

그런데 만약 key마다의 타입을 정하고 싶으면 아래와 같이 선언하면 된다.

const game: { title: string, playtime: number } = {
  title: 'superMario',
  playtime: 20
};

key에대한 타입임으로 아래와 같이 순서를 바꿔도 된다.

const game: { title: string, playtime: number } = {
  playtime: 20,
  title: 'superMario'
};

함수

TypeScript에서 함수의 입력 및 출력 타입을 지정할 수 있다.

• 매개변수 타입 표기

function multiply(a: number, b: number) {
  return a * b;
}

• 반환 타입 표기

function say(): string {
  return 'hi';
}

아래는 화살표 함수 version

const say = (): string => 'hi';

• 두 가지를 전부 사용해도 된다.

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

함수의 옵셔널 파라미터

JavaScript는 유연한 언어여서 함수의 매개변수가 3개인 함수에 5개의 인자를 넘겨도 오류가 나지 않는다.

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

add(1, 2, 3) // 3;

하지만 TypeScript에서는 오류가 난다.

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

add (1, 2, 3) // error: Expected 2 arguments, but got 3.
add (1) // error: An argument for 'b' was not provided.

위의 오류는 2개의 인자를 예상했는데 3개의 인자를 넘겨줬다는 뜻이고, 아래오류는 b인자를 넘겨받지 못했다는 것이다.

만약 b의 인자를 넣지 않아도 오류가 나지 않게 하기 위해서는 옵셔널 파라미터 ?를 이용하면 된다.

function printA(a: number, b?: number): number {
  return a;
}

참고자료

타입스크립트 기초 - 6