[POB#29] TypeScript(1). 기본적인 타입스크립트 개념

dongwon·2021년 8월 23일
4

원티드-프리온보딩

목록 보기
20/25
post-thumbnail

8월 24일 타입 스크립트 개념 강의 정리 글입니다.

Typescript에 대해

Typescript 기본에 대해 정리했습니다.

함수 타입

함수 선언식타입입니다. 매개변수의 타입반환값의 타입을 지정해 줍니다.
아래의 코드에서 매개변수로 Date 타입을, 반환값으로 string 타입으로 설정했습니다.

const formatDate = (d: Date): string => {
    ...
	return `${year}${month}${day}`
}

const today = formatDate(new Date());

매개 변수의 타입을 다양하게 지정할 수 있습니다.
차례대로 | 를 이용해 둘 중 하나를 지정하고, default 값을 이용하고, ?를 이용해 선택적으로 인자를 전달할 수 있습니다.

let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => { ... }

새로운 타입

자바스크립트에선 사용하지 않고 타입스크립트에 존재하는 타입들입니다.

1. any

어떤 타입도 지정할 수 있는 타입입니다. 하지만 웬만하면 쓰지 않아야 합니다. any는 컴파일될 때 아무 타입도 지정하지 않은 원래의 자바스크립트와 똑같습니다.

2. void

return이 아무것도 없을 때, void 타입을 사용합니다. 타입 추론으로 에러는 나지 않지만 웬만하면 타입을 지정하는 것이 좋습니다.

const form = (date: Date): void => {};

3. enum

정해진 값의 세트입니다. 여러 개 중에 하나가 들어올 때, 예를 들어 백엔드에서 어떤 데이터가 들어올지 몰라 예외를 설정할 때 사용합니다.

enum Category {
    Pasta,
    Pizza,
    Dessert
}

let menuCategory : Category = Category.Pasta

기본적으로 특정 값이 없을 땐 0부터 숫자를 차례대로 지정하게 됩니다.

enum Category {
    Pasta,  // 0
    Pizza,  // 1
    Dessert // 2
}

상수, string으로 구현해야 한다 하면 특정 값을 할당할 수 있습니다.

enum Category {
    Pasta= 'pasta',
    Pizza= 'pizza',
    Dessert= 'dessert'
}

4. union

여러 타입이 올 수 있을 때 사용합니다. 몇 개 중에 아무거나 사용해도 될 때 사용합니다.

const a = number | stirng;

5. 타입 별칭

타입을 재사용하거나, 객체를 위한 타입을 정의할 때 사용합니다.

tpye ID = string | number;
type Info = {
  id: ID,
  pw: string,
};

function checkInfo(info: Info) { ... }

타입 추론

타입을 표기하지 않으면 에러가 발생하지만 타입스크립트 컴파일러가 변수에 할당된 값을 보고 타입을 추측해 에러를 발생시키지 않습니다.

let starArr = [1, 2, "3점"];

위 코드의 타입은 (number | string)[] 입니다.
number[] | string[] 과 같은 경우는 무조건 number 배열이거나, string 배열 둘 중 하나만을 의미합니다.

interface

interface객체의 타입을 정의할 때 사용합니다.
객체의 속성이 2개 이상이라면, 따로 꺼내서 타입들을 interface로 정의합니다.

interface Restaurant {
  name: string;
  star: 5;
}

function getInfo(restaurant: Restaurant) { ... }

하지만 아래와 같이 예정되어 있지 않는 속성을 추가한다면 에러가 발생합니다.

interface Restaurant {
  name: string;
  star: number;
}

// address 타입을 정의하지 않았지만 사용되어 오류가 발생합니다.
const chroad3: Restaurant = {
  name: "취향로3가",
  star: 5,
  address: "을지로3가",
};

다양한 프로퍼티 타입

readonly : 수정을 할 수 없게 막습니다.
? : 있으면 설정, 없으면 무시하게 할 수 있습니다.

interface Restaurant {
  readonly name: string;
  address?: string;
}

인터페이스 확장

extends를 이용해 기존에 정의된 인터페이스를 확장해서 사용할 수 있습니다. 같은 데이터인데 구조를 추가, 수정하고 싶을 때 사용합니다.
예를 들어 name, star 기본 구조에 address, phone, position을 함께 사용하고 싶을 때, 5개 모두 새로 만들지 않고 뒤에 3개의 속성을 확장해 사용할 수 있습니다.

interface BasicInfo {
  name: string;
  star: number;
}

interface DetailInfo extends BasicInfo {
  address: string;
  phone: string;
  position: number[];
}

교차 타입

인터페이스를 합쳐서 새로운 타입을 사용하고 싶을 때 사용합니다. 합쳐진 인터페이스는 type으로 정의가 됩니다.

interface BasicInfo {
  name: string;
  star: number;
}

interface DetailInfo {
  position: number[];
}

type Info = BasicInfo & DetailInfo;

타입 호환성

서로 타입이 다른데 호환이 돼서 에러가 안나는 현상입니다.
예를 들어 id, name 속성만이 있는 a 타입으로 할당한 변수 temp에 새로운 속성이 추가된 변수 newTemp를 할당시켜도 오류가 나지 않습니다.

interface a {
  name: string;
  id: string;
}

let temp: a;

let newTemp = {
  name: "동원",
  id: "123",
  age: 15,
};

temp = newTemp; // 에러가 나지 않는다.

위 코드가 에러가 나지 않는 이유는 타입 호환성 때문입니다. newTemp 변수가 타입 추론에 의해 자기만에 타입을 가지게 되어 서로가 호환이 됐다는 걸 의미합니다.

제네릭

화살괄호(<>)를 이용해 유동적으로 타입을 정의합니다.

function makeArr<T>(el: T): T[] {
  return [el];
}

makeArr<number>(1); // number[]
makeArr<string>("1점"); // stirng[]
makeArr<boolean>(true); // boolean[]

위의 코드 같은 경우 같은 함수 안에 모두 다른 타입을 넣었지만 오류가 나지 않고 설정한 매개변수에 맞게 반환됩니다.
제네릭 타입을 명시하지 않아도 타입 추론을 통해 T의 타입을 결정할 수 있습니다.

profile
데이원컴퍼니 프론트엔드 개발자입니다.

2개의 댓글

comment-user-thumbnail
2021년 8월 23일

올리셨네요!! 바로 달려왔습니다😊 예제코드도 직접 쓰시나봐요! 중간에 name : "동원" 보고 피식했습니다. 오늘 수업 조금 놓친게 있는데 바로 정리한 거 올려주셔서 더 잘 봤네요! 햐..이거 정리하셨으니까 ts 모르는거 동원님한테 물어봐야겠네요 쿄호호 올리시면 앞으로 댓글 꼬박꼬박 달러 오겠습니다. 헤헤

1개의 답글