78일차 TIL : 타입스크립트의 타입

변시윤·2023년 1월 16일
typescript국비지원내일배움캠프
0

내일배움캠프 4기

목록 보기
84/131

학습내용

  • 기본
  • 함수
  • Enum
  • Union
  • Type Alias
  • Interface

기본 Type

String, Number, Boolean, Object, Array, Tuple, Enum, Any, Void, Null, Undefined, Never 등

  • Array

    let arr: number[] = [1, 2, 3];
 let arr2: string[] = ['1', '2', '3'];
 let arr3: boolean[] = [true, false, true];

    타입 뒤에 []를 추가하면 해당 타입의 배열임을 명시할 수 있다.

    타입스크립트에서는 number와 string을 소문자로 표기한다. 첫글자를 대문자로 표기시 자바스크립트의 Number, String객체를 가리키기 때문이다. 

    let arr: Array<number> = [1, 2, 3];
let arr2: Array<string> = ["1", "2", "3"];
let arr3: Array<boolean> = [true, false, true];

    또는 Array<타입>으로도 가능하다.

  • Object

    let person: {
	name: string;
    birth: number;
};

    이때 {중괄호}는 자바스크립트의 객체가 아닌 타입스크립트 객체 타입을 의미한다. 또한 객체 뿐만 아니라 객체 안의 요소들까지도 타입을 지정할 수 있다.

  • Tuple

    let tuple: [string, number, boolean] = ['str', 1, false];

    요소의 타입과 갯수 지정

  • Any
    어떤 타입이든 가능. 즉, 자바스크립트의 변수는 모두 any에 해당된다.

  • Null & Undefined
    자기자신 말고는 할당이 불가능하기 때문에 주로 유니온 타입과 같이 사용한다.

  • Never
    비정상적으로 종료되거나 함수가 끝까지 실행되지 않는 경우에 사용. 사실상 거의 사용하지 않는다고 봐도 무방하다.


함수 Type

타입스크립트 함수로 변환하기

JavaScript

function add(n1, n2) {
	return n1 + n2;
}

TypeScript

function add(n1: number, n2: number): number {
	return n1 + n2;
}

const a = add(1, 2); // 3
const b = add('1', 2); // Error ➡️ 타입 불일치
const c = add(10, 20, 30); // Error  ➡️ 요소 갯수 초과
const d = add(10); // Error ➡️ 요소 갯수 부족

자바스크립트 함수를 타입스크립트 함수로 변환시 위와 같다. 세 번째 number는 return값에 대한 타입으로 매개변수의 타입이 모두 지정된 상태라면 생략이 가능하다.

Optional Parameter

위 예시 중 마지막처럼 요소의 갯수가 부족한 경우 옵셔널 파라미터?를 사용하면 예외 처리가 가능하다.

function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

Default Parameter

타입 뿐만 아니라 타입의 기본값까지 지정해주는 속성으로 타입스크립트가 아닌 자바스크립트의 속성이다.

function add3(n1: number, n2: number = 5): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2); // 3
const c3 = add3(10); // 5

Rest Parameter

매개변수 앞에서부터 차례대로 배열안에 있는 요소들을 할당 후, 남은 요소들을 배열 안에 모두 할당하는 속성

function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40); // 100

n1 = 10
...nums: [20, 30, 40]

n1 = 10
n2 = 20
...nums: [30, 40]

Void

const printAnything = (value: any) => {
  console.log(value)
}

함수에서 return 값이 없는 경우. null, undefined와 비슷하지만 함수형에서만 사용할 수 있다는 차이점이 있다. void에 해당하는 함수의 반환값은 undefined가 된다.


Enum Type

특정 값들의 집합을 의미하는 자료형으로 타입스크립트에만 존재한다.

숫자형

enum Direction {
  Up,
  Down,
  Left = 7,
  Right,
}

console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right);
> 0 1 7 8

console.log(Direction[1]);
> Down

숫자형의 요소에는 인덱스가 자동으로 할당된다. 그러나 실제 인덱스는 아니기 때문에 임의로 설정할 수도 있다. 수동 설정시 다음 요소는 이전 요소의 설정값에서 +1한 값이 적용된다.

문자형

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

문자형은 숫자형과 달리 특정 요소에 특정값이 할당돼도 다음 요소에 +1한 값을 적용하지 않는다.

복합형

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

숫자형과 문자형을 혼합해서 사용하는 방식. 유지보수에 혼란을 야기하기 때문에 권장하지 않는다.


Union Type

자바스크립트의 OR 연산자와 같은 의미로 | 연산자를 이용해 여러개의 타입을 연결할 수 있다.

const printOut = (input: string | number) => {
	console.log(input);
}

Type Alias

특정 타입이나 인터페이스를 참조할 수 있는 타입 변수로 사용자 정의 타입 혹은 타입 별칭이라고도 한다. 매번 타입을 새로 작성하지 않기 위해 탄생된 기능이기 때문에 재사용이 가능하다. 자바스크립트의 constructor와 비슷한 개념이다. 타입 별칭은 타입스크립트에만 존재하기 때문에 자바스크립트로 컴파일시 해당 코드는 사라진다.

type.ts

type Hero = {
	name: string;
	power: number;
	height: number;
};

Heroes.ts

import type { Hero } from './type';

const hero1: Hero = {
  name: '슈퍼맨',
  power: 1000,
  height: 190,
};

현업에서는 위와 같이 타입 별칭 파일을 따로 생성 후 import 해오는 방식으로 사용한다.


Interface

다양한 유형의 프로퍼티로 이루어진 타입을 정의

기본

interface Person {
  name: string;
  age: number;
}

Type Alias와 Interface의 차이

-Type AliasInterface
확장XO
선언 병합XO

📌 참조

선택

기본형의 Optional Parameter와 같이 ?를 추가하면 해당 key:value를 사용하지 않는 경우에도 에러가 발생하지 않는다.

interface Person {
  name: string;
  age?: number;
}

Read Only

읽기만 가능한 타입

interface Person {
  readonly name: string;
  age?: number;
}

const person1: Person = { name: 'js' };
person1.name = 'ljs'; // Error

readonly 속성을 정의한 후에 value를 할당시 에러가 발생한다.

Index

key의 이름을 정의하지 않고 타입만 정의. 단, key의 타입은 String과 Number만 가능하다.

interface Person {
  readonly name: string;
  [key: string]: string | number;
}

두 번째 key는 string 형식이라면 무엇이든 가능하다.

함수

기본형의 함수타입과 같은 원리

interface Print {
  (name: string, age: number): string;
}

= type Print = (name: string, age: number) => string;

확장

기존의 인터페이스에 새로운 타입을 추가로 확장해서 새로운 인터페이스를 정의하는 형식

interface Person {
  name: string;
  age: number;
}

interface Korean extends Person {
  birth: 'KOR';
}

interface Korean {
  name: string;
  age: number;
  birth: 'KOR';
}

기존 인터페이스를 여러개 활용할 수도 있다.

interface Developer {
  job: 'developer';
}

interface KorAndDev extends Korean, Developer {}

interface KorAndDev {
  name: string;
  age: number;
  birth: 'KOR';
  job: 'developer';
}

Intersection

기존의 인터페이스 타입을 하나로 합쳐서 정의. &는 자바스크립트의 && 연산자와 비슷한 의미다.

interface Person {
  name: string;
  age: number;
}

interface Developer {
	name: string;
  skill: string;
}

type DevJob = Person & Developer;

const nbcPerson: DevJob = {
  name: 'a',
  age: 20,
  skill: 'ts',
};
profile
변시윤
개그우먼(개발을 그은성으로 하는 우먼)
이전 포스트

78일차 TIL : 타입스크립트

다음 포스트

79일차 TIL : 타입스크립트 - 제네릭과 타입 추론

0개의 댓글