[TypeScript] 타입스크립트 기본 타입

빵호·2022년 2월 6일
0

TypeScript

목록 보기
1/3
post-thumbnail

타입스크립트

자바스크립트는 동적 타입 언어이고 동적 타입 언어는 변수의 타입은 런타임에 결정된다. 이와 반대인 정적 타입 언어도 존재하고 정적 타입 언어는 변수의 타입이 컴파일 타임에 결정이 된다. 정적 타입 언어인 타입 스크립트에 대해 알아보자.

동적 타입 언어와 정적 타입 언어

동적 타입 언어

  • 타입에 대한 고민을 하지 않아도 되므로 배우기 쉽다.
  • 코드의 양이 적을 때 생산성이 높다.
  • 타입 오류가 런타임 시 발견된다.

정적 타입 언어

  • 변수를 선언할 때마다 타입을 고민해야 하므로 진입 장벽이 높다.
  • 코드의 양이 많을 때 동적 타입 언어에 비해 생상성이 높다.
  • 타입 오류가 컴파일 시 발견된다.

타입스크립트의 기본 타입

자주 사용되는 몇 가지 기본 타입을 살펴보자

const values: number[] = [1, 2, 3];
const values2 Array<number> = [1 ,2 ,3];

values.push('a'); // 타입 에러

배열 타입은 두 가지 방법으로 정의할 수 있고 숫자 배열에 문자열을 입력하면 타입 에러가 발생한다.

null과 undefined 타입

let v1: undefined = undefined;
let v2: null = null;
v1 = 123; // 타입 에러

자바스크립트에서는 값으로 존재하는 null과 undefined는 타입스크립트에서 각각 타입으로 존재한다.

문자열 리러털과 숫자 리터럴 타입

let v1: 10 | 20 | 30;
v1 = 10;
v1 = 15; // 타입 에러

let v2: '경찰관' | '소방관';
v2 = '의사'; // 타입 에러

타입스크립트에서는 문자열 리터럴과 숫자 리터럴을 타입으로 정의할 수 있다.

any 타입

let value: any;
value = 123;
value = '456';
value = () => {};

any 타입은 모든 종류의 값을 허용하는 타입이다. 숫자와 문자열뿐만 아니라 함수도 입력될 수 있다. any 타입은 남발하면 타입스크립트를 사용하는 의미가 퇴색되기 때문에 되도록 피하도록 하자.

void와 never 타입

function f1(): void {
  console.log('hello');
}
function f2(): never {
  throw new Error('some error');
}
function f1(): never {
  while (true) {
    // ...
  }
}

아무 값도 반환하지 않고 종료되는 함수의 반환 타입은 void 타입으로 정의하고 항상 예외가 발생해서 비정상적으로 종료되거나 무한 루프 때문에 종료되지 않는 함수의 반환 타입은 never 타입으로 정의할 수 있다.

object 타입

let v: object;
v = { name: 'abc' };
console.log(v.prop1); // 타입 에러

object 타입은 자바스크립트에서 일반적으로 사용되는 객체의 타입이다.

교차 타입과 유니온 타입

let v1: (1 | 3 | 5) & (3 | 5 | 7);
v1 = 3;
v1 = 1; // 타입 에러

여러 타입의 교집합과 합집합은 각각 교차(intersection) 타입과 유니온(union) 타입으로 표현할 수 있고 교차 타입은 & 기호로 정의하고, 유니온 타입은 | 기호로 정의한다.

type 키워드

tpye Width = number | string;
let width: Width;
width = 100;
width = '100px';

type 키워드를 사용해 타입에 별칭을 줄 수 있고 타입 별칭은 타입을 선언할 때 편리하게 사용할 수 있다.

열거형 타입

enum Fruit {
  Apple,
  Banana,
  Orange,
}
const v1: Frit = Fruit.Apple;
const v2: Fruit.Apple | Fruit.Banana = Fruit.Banana

열거형 타입은 eunm 키워드를 사용해서 정의할 수 있고 열거형 타입의 각 원소는 값으로 사용될 수 있고, 타입으로 사용될 수도 있다.

함수 타입

function getInfoText(name: string, age: number): string {
  const nameText = name.substr(0, 10);
  const ageText = age >= 35 ? 'senior' : 'junior';
  return `name: ${nameText}, age: ${ageText}`;
}
const v1: string = getInfoText('mike', 23);
const v2: string = getInfoText('mike', '23'); // 타입에러
const v3: number = getInfoText('mike', 23); // 타입에러

함수의 타입을 정의하기 위해서는 매개변수 타입과 반환 타입이 필요하고 콜론을 이용해 매개변수 타입과 반환 타입을 정의할 수 있다.

선택 매개변수

function getInfoText(name: string, age: number, language?: string): string {
  const nameText = name.substr(0, 10);
  const ageText = age >= 35 ? 'senior' : 'junior';
  const languageText = language ? language.substr(0, 10) : '';
  return `name: ${nameText}, age: ${ageText}`;
}
getInfoText('mike', 23, 'ko');
getInfoText('mike', 23);
getInfoText('mike', 23, 123); // 타입에러

function getInfoText(name: string, age?: number, language: string): string {
  // ...
}  
// 선택 매개변수 오른쪽에 필수 매개변수가 오면 컴파일 에러가 발생한다.

선택 매개변수는 반드시 입력하지 않아도 되는 매개변수다. 매개변수 이름 오른쪽에 물음표 기호를 입력하면 선택 매개변수가 된다.

나머지 매개변수

function getInfoText(name: string, ...rest: string[]): string {
  // ...
}  

나머지 매개변수는 배열로 정의할 수 있다.

profile
늘 한결같이 꾸준히

0개의 댓글