타입스크립트 - 기본 문법

 

자료형 종류	타입	비고
문자열	string	문자열 리터럴 포함
숫자형	number	NaN, Infinity 포함 숫자형 리터럴 포함
불린형	boolean
undefined	undefined
null	null
인터페이스	Interface	객체의 구조를 정의

 

배열, 튜플

// 배열
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('일반 상품');
}

 

 

값 대신 타입을 쓰고 ; 세미콜론을 적어준다.

intellisense sugguest (Ctrl + i ) 로 어떤 프로퍼티가 있는지 알 수 있다. 

? 를 붙여주면 옵셔널 프로퍼티

 

let stock: { [id: string]: number } = {
  c001: 3,
  c002: 0,
  c003: 2,
};
//키 id 는 string 타입, 값은 number

프로퍼티 개수를 정하지 않고 프로퍼티 값의 타입을 정할 수 있다.

즉 객체의 키- 값 모두 타입을 지정할 수 있다.

any

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

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

JSON.parse 함수가 반환하는 값은 any 타입이다. 

문자열로 된 JSON 데이터를 JavaScript 객체로 변환해 주지만, TypeScript는 이 객체의 구조를 미리 알 수 없기 때문

 

타입 검사기(TypeScript)가 그 변수에 대해 어떤 타입인지 추론하지 못해, 타입 안전성을 보장하지 못하기때문에

any 사용을 지양하고, as나 타입 명시를 해주는것이 좋다

 

함수

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

함수를 값으로 사용하는 경우

 

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

Rest 파라미터는 배열 타입으로 쓴다.

값을 리턴하지 않는 함수는 void 함수라고 하며, 리턴타입도 void로 한다.