Typescript 기본 문법

이번 글에서는 타입스크립트 기본 문법에 대해서 설명하겠습니다.

기본형

기본적으로 타입스크립트에서 타입정할때 strint, number, boolean, undefined, null 등이 있습니다.

종류	타입
문자열	string
숫자형	number
불린형	boolean
undefined	undefined
null	null

배열과 튜플

배열 타입을 만들려면 타입을 적고 []를 붙입니다. 만약에 배열의 배열을 만들고 싶다면 배열 타입 뒤에 []를 붙이면 됩니다. 튜플은 개수랑 순서가 정해져 있는 배열입니다. [] 안에 순서대로 타입을 쉼표로 구분해서 씁니다.

1// 배열
2const cart: string[] = [];
3cart.push('c001');
4cart.push('c002');
5
6// 배열의 배열
7const carts: string[][] = [
8  ['c001', 'c002'],
9  ['c003'],
10];
11
12// 튜플
13let mySize: [number, number, string] = [175, 30, 'L'];

객체 타입

{} 안에다가 프로퍼티 이름을 쓰고 콜론 다음에 타입을 씁니다. 각 프로퍼티는 세미콜론으로 구분합니다. 필수가 아닌 프로퍼티는 프로퍼티 이름 뒤에 물음표를 붙입니다.

1let product: {
2  id: string;
3  name: string;
4  price: number;
5  membersOnly?: boolean; // 필수가 아닌 프로퍼티
6  sizes: string[];
7} = {
8  id: 'c001',
9  name: '코드잇 블랙 후디',
10  price: 129000,
11  sizes: ['M', 'L', 'XL'],
12};
13
14if (product.membersOnly) {
15  console.log('회원 전용 상품');
16} else {
17  console.log('일반 상품');
18}

프로퍼티의 개수를 정하지 않고, 프로퍼티 값의 타입을 정하고 싶다면 아래와 같은 문법을 활용해 보세요.

1let stock: { [id: string]: number } = {
2  c001: 3,
3  c002: 0,
4  c003: 2,
5};

any 타입

자바스크립트를 사용할 때와 마찬가지로 자유롭게 쓸 수 있는 타입입니다. 되도록이면 any 타입으로 지정하지 않는 것을 권장합니다. 어쩔 수 없이 any 타입을 사용하는 경우 as 키워드를 써서 타입을 지정하거나, 콜론으로 타입을 지정할 수 있습니다.

1const parsedProduct = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }') as { name: string; price: number };
2
3const parsedProduct: { name: string; price: number } = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }');

함수 타입

리턴 타입을 지정하는 경우에는 다음 코드처럼 작성하면 됩니다.

1function addToCart(id: string, quanity: number): boolean {
2    if (어떤 조건) {
3     return false;
4  }
5
6  return true;
7}

리턴 타입을 미리 주지 않고 리턴 값으로부터 추론하게 할 수도 있습니다.

1function addToCart(id: string, quanity: number) {
2    if (어떤 조건) {
3     return false;
4  }
5
6  return true;
7}

함수를 값으로 사용하는 경우 화살표 함수처럼 작성합니다.

1(id: string, quanity: number) => boolean
2

Rest 파라미터는 배열 타입으로 씁니다. 값을 리턴하지 않는 경우 리턴 타입을 void로 할 수 있습니다.

1(...ids: string[]) => void;

Enum

중괄호 안에서 각 항목을 쉼표로 구분해서 적어주면 됩니다. 이때 기본값은 0부터 시작하는 정수입니다.

1enum Size {
2  S,
3  M,
4  L,
5  XL,
6}
7
8console.log(Size.S); // 0
9console.log(Size.M); // 1
10console.log(Size.L); // 2

숫자 0은 실수하기 쉽기 때문에 Enum을 사용할 땐 되도록이면 값을 정해놓고 쓰는 게 좋습니다. 이퀄이랑 쉼표를 쓰면 값을 정할 수 있습니다.

1enum Size {
2  S = 'S',
3  M = 'M',
4  L = 'L',
5  XL = 'XL',
6}

Interface

interface를 사용하는 방법은 interface를 쓴 다음, 객체 타입처럼 만들면 됩니다.

1interface Product {
2  id: string;
3  name: string;
4  price: number;
5  membersOnly?: boolean;
6}

Interface를 상속하고 싶으면 Interface 이름 뒤에 extends를 적은 다음 부모 Interface 이름을 적어주면 됩니다.

1interface ClothingProduct extends Product {
2  sizes: Size[];
3}