TypeScript_11_기본 문법 정리하기

지원·2023년 12월 15일

TypeScript

목록 보기
11/13
post-thumbnail

기본형

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

배열과 튜플

배열 타입을 만들려면 타입을 적고 []를 붙인다.
만약에 배열의 배열을 만들고 싶다면 배열 타입 뒤에 []를 붙이면 된다.

튜플은 개수랑 순서가 정해져 있는 배열
[] 안에 순서대로 타입을 쉼표로 구분해서 쓴다.

// 배열
const cart: string[] = [];
cart.push('c001');
cart.push('c002');

// 배열의 배열
const carts: string[][] = [
  ['c001', 'c002'],
  ['c003'],
];

// 튜플
let mySize: [number, number, string] = [175, 30, 'L'];

객체 타입

{ } 안에다가 프로퍼티 이름을 쓰고 콜론 다음에 타입을 쓴다.

각 프로퍼티는 세미콜론으로 구분합니다.

필수가 아닌 프로퍼티는 프로퍼티 이름 뒤에 물음표를 붙인다.

let product: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean; // 필수가 아닌 프로퍼티
  sizes: string[];
} = {
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  sizes: ['M', 'L', 'XL'],
};
if (product.membersOnly) {
  console.log('회원 전용 상품');
} else {
  console.log('일반 상품');
}

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

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

any 타입

자바스크립트를 사용할 때와 마찬가지로 자유롭게 쓸 수 있는 타입.

되도록이면 any 타입으로 지정하지 않는 것을 권장!

어쩔 수 없이 any 타입을 사용하는 경우 as 키워드를 써서 타입을 지정하거나, 콜론으로 타입을 지정할 수 있다.

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

함수 타입

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

function addToCart(id: string, quanity: number): boolean {
    if (어떤 조건) {
     return false;
  }
  return true;
}

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

function addToCart(id: string, quanity: number) {
    if (어떤 조건) {
     return false;
  }
  return true;
}

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

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

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

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

0개의 댓글