분홍돼지 IT 블로그

해당 내용은 codeit 강의 및 w3schools 번역을 참고하여 작성한 글입니다.

올바르지 않은 내용이 있다면 의견 남겨주세요. 언제든지 환영입니다.

1. TypeScript 기본형 작성방법

// : string과 같은 타입을 생략해도 된다. 
// TypeScript는 처음에 세팅된 값의 타입이 아닌 값을 변경시에 오류를 보여준다.

let itemName: string = '펭수';
let itemPrice: number = 129000;
let membersOnly: boolean = true;
let owner: undefined = undefined;
let seller: null = null;

TypeScript 기본형

2. 배열과 튜플

// 배열 선언
const carts: string[][] = [
    ['c001', 'c002']
];
const current :[number, number] = [0, 0];
const items: string[] = [
    '갑옷' ,'빨간 물약'
];

// 튜플(길이와 각 요소마다의 타입이 고정된 배열) 선언
let myTuple : [number , boolean , string];
let mySize: [number, number, String] = [5,6,'55'];
mySize.push(0,0,'11');
console.log(mySize);

배열과 튜플

mySize.push('1234');

// 위와 같이 작성하면 mySize에 [ 5, 6, '55', '1234' ]로 추가가 됨을 확인할 수 있다.
// 이런 내용을 방지하고자 'readOnly'를 추가하면 위와 같이 추가가 불가능하다.

let ourTuple: readonly [number, number, string] = [5, 6, '55'];
ourTuple.push('1234');

// prog.ts(10,10): error TS2339: Property 'push' does not exist on type 'readonly [number, number, string]'.

3. TypeScript 객체

let product: {
    id: String;
    name: String;
    sizes: String[];
    membersOnly?: boolean; //?는 optional property
} = {
    //id: 1 이렇게 하면 해당 오류 알려준다
    id: 'c001',
    name: '코드잇 블랙 후디',
    sizes: ['M', 'L', 'XL']
}

optional property는 필수로 정의하지 않아도 되는 속성이다. 위의 코드에서 memeberOnly 뒤에 ?를 표시하였는데, 이건 필수로 정의하지 않아도 된다. 만약 없다면 오류 발생한다. 

// 속성 정의되지 않았을 때 쓰는 방법
// index 대신 어떤 이름이든 상관 없다. 다만 속성명은 String이고 속성 값이 number라는 정의만 지키면 된다.
const nameAgeMap: { [index: string]: number } = {};

nameAgeMap.Jack = 25; // no error
nameAgeMap.Mark = "Fifty"; // Error: Type 'string' is not assignable to type 'number'.

console.log(nameAgeMap);