[TS] 기본 타입과 인터페이스

** 유튜브 코딩앙마님 강의 보고 배운 내용을 정리한 글

https://www.youtube.com/playlist?list=PLZKTXPmaJk8KhKQ_BILr1JKCJbR0EGlx0 

TypeScript 강좌

 

 

기본 타입

let car:string = 'bmw'; // 문자열 타입. 
// 타입을 선언하지 않아도 문자열임을 알고 있긴 함(=타입 추론)

// 숫자 타입
let age:number = 30;

// 불리언 타입
let isAdult:boolean = true;

// 배열 - 숫자로 이루어짐
let a:number[] = [1,2,3];
let a:Array<number> = [1,2,3];

// 배열 - 문자로 이루어짐
let week1:string[] = ['a', 'b', 'c'];
let week2:Array<string> = ['a', 'b', 'c'];

// week1 or week2에 숫자를 추가하면 에러발생

 

튜플 (Tuple)

// 인덱스 별로 타입이 다를때 사용
let b:[string, number];
// 배열 첫번째 요소는 스트링, 두번재 요소는 넘버

b = ['z', 1]; // O
// b = [1, 'z']; // X

b[0].toLowerCase(); // 0번째 요소는 문자이기때문에 가능
b[1].toLowerCase(); // 1번째 요소는 숫자이기때문에 불가능 (에러 출력됨)

 

void, never

// void : 함수에서 아무것도 반환하지 않을때 
function sayHello():void {
	console.log('hello');
}

// never : 에러를 반환하거나 영원히 끝나지 않음(=무한반복)
function showError():never {
	throw new Error();
}

function infLoop():never {
	while (true){
		// do something
	};
}

 

enum

// enum : 비슷한 값들끼리 묶어줌
enum Os {
	Window, // 1
	Ios, // 2
	Android // 3
}

// enum에 수동으로 값을 주지 않으면 자동으로 0부터 1씩 증가하면서 값이 할당됨
// 만약 Window = 3으로 바꾸면 3, 4, 5... 로 시작

// 숫자가 아닌 문자도 할당할 수 있다.
enum Os2 {
	Window = 'win', // 1
	Ios, = 'ios' // 2
	Android = 'and' // 3
}

let myOS:Os; // Os에 들어있는것만 입력할 수 있음

// 특정값만 입력되도록 강제하고 싶을때, 그리고 그 값들이 공통점을 갖고 있을때 사용

 

null, undefined

let a:null = null;
let b:undefined = undefined;

 

인터페이스(interface)

let user:object; // 객체

user = {
    name: 'xx',
    age: 30
}

console.log(user.name); // 에러 발생!
// Property 'name' does not exist on type 'object'.
// 오브젝트에는 특정 속성값에 대한 정보가 없다. 
// 프로퍼티를 정해서 객체를 표현하고자 할때 인터페이스 사용

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name: string,
    age: number,
    gender? : string, // ?는 옵셔널. 있을수도 있고 없을 수도 있음. 단 있다면 무조건 문자열
		readonly birthYear:number, // 읽기 전용. 생성할때만 할당가능. 이후에 수정불가.
		[grade:number]: Score, // Score 외에는 입력할수없음
}

let user:User = {
    name: 'harry',
    age:30,
		birthYear: 2000,
    1:'A',
    2: 'B'
}

user.age = 10;
user.gender = "male";

console.log(user.age)

// interface로 함수 만들기
interface Add {
    (num1: number, num2: number):number;
}

const add:Add = function(x, y){
    return x + y
}

add(10, 20);

// 나이를 받아서 성인인지 아닌지 불리언으로 리턴하는 함수
interface IsAdult {
    (age:number):boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33);

// interface로 class 정의하기
// implements 사용
interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    // color = 'red';
    // wheels = 4;
    // start() {
    //     console.log('go...')
    // }

    // constructor로 컬러 입력받게 하기
    color;
    wheels = 4;

    constructor(c:string) {
        this.color = c;
    }
    start() {
        console.log('go...')
    }
}

const b = new Bmw('green');
console.log(b);
b.start()

// interface 확장하기 = extends 사용
interface Benz extends Car {
    // interface Car가 갖고있는 속성 모두 상속받아서 사용가능함
    door: number;
    stop(): void;
}

const benz:Benz = {
    color: 'black',
    wheels: 4,
    door: 5,
    start(){
        console.log('lala')
    },
    stop(){
        console.log('stop..')
    }
}

console.log(benz)

// 확장은 여러개를 할수도 있다. 
interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy {
    price: number;
}