타입스크립트 베이직 - 2: 기본형, 배열, 튜플

기본형

TS로 어떤 타입들을 설정할 수 있을까?

let itemName: string = "코드잇 블랙 후드";
let itemPrice: number = 129000;
let membersOnly: boolean = true;
let owner: undefined = undefined;
let seller: null = null;

배열과 튜플

상품 아이디를 문자열배열로 하는 장바구니 변수를 만들어보자.

const cart: string[] = [];
cart.push("c001");
cart.push("c002");
cart.push(3); // 스트링이 아니잖아? 에러!!

배열의 배열은?

const carts: string[][] = [
	["c001", "c002"],
  	["c003"],
];

숫자형 배열은?

let mySize: number[] = [167, 28];
mySize = [167, 28, 255];
mySize = [255];
mySize = [255];
// 에러는 나지 않음!

배열의 요소자리마다 엄격하게 타입선언을 해주려면?

튜플이용!

let mySize: [number, number] = [167, 28];
mySize = [167, 28, 255]; // 개수 불일치 에러
mySize = [255]; // 개수 불일치 에러
mySize = []; // 개수 불일치 에러

타입 섞기도 물론 가능!

let mySize: [number, number, string] = [167, 28, "no error!"];
mySize = [167, 28, "still no error!"]; // 통과.
mySize = [255]; // 개수 불일치 에러
mySize = []; // 개수 불일치 에러

객체타입

객체의 타입 설정방법

let product: {
	id: string;
  	name: string;
  	price: number;
  	membersOnly: boolean;
  	sizes: string[];
} = {
	id: "c001", // VSCode의 intellisense가 키 목록을 쫙 보여주며, 타입도 검사해줌.
	name: "코드잇 블랙 후디",
  	price: 129000,
  	membersOnly: true,
  	sizes: ["M", "L", "XL"],
};

선택적 프로퍼티(Optional Properties) 문법

타입스크립트는 엄격한 문법이므로, 키에 적절한 벨류가 반드시 주어지지 않으면 에러를 던진다.
예를 들어 membersOnly의 값이 없는 경우도 있을 수 있다는 사실을 TS에게 알려주기위해서는
선택적 프로퍼티문법을 사용하면 간단하다.

membersOnly: boolean;의 키 뒤에다가 membersOnly?: boolean; 이렇게 물음표를 써주면 완료.

let product: {
	id: string;
  	name: string;
  	price: number;
  	membersOnly?: boolean;
  	sizes: string[];
} = {
	id: "c001",
	name: "코드잇 블랙 후디",
  	price: 129000,
  	// membersOnly: true, <========== 삭제
  	sizes: ["M", "L", "XL"],
};

이제 membersOnly가 비어있더라도 에러는 나지 않는다!

객체의 프로퍼티 이름에 변수를 사용하고싶다면?

• 자바스크립트:

let field = "filed name";
let obj = {
	[field]: "filed name",
}

• 타입스크립트:
  프로퍼티의 개수를 모르거나 개수를 알고 싶지 않을때
  프로퍼티 값의 타입만 지정할 수 있다.

let stock: {
	[id: string]: number; // 프로퍼티이름으로 아무 문자열이나 OK. id 외에 다른 이름으로도 자유롭게 지정가능.
} = {
	c001: 3,
  	c002: 0,
  	c003: 1,
}