TypeScript Study - 03

Class

abstract class User{
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) {}
}

class Player extends User{
    
}

const inu = new User("inu","jeong","innie");

• 추상 클래스를 통해서는 생성 불가.

abstract class User{
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) {}
}

class Player extends User{
    
}

const inu = new Player("inu","jeong","innie");

• 추상클래스를 상속받은 클래스를 통해 생성 가능

abstract class User{
    constructor(
        private firstName: string,
        private lastName: string,
        public nickname: string
    ) {}
    getFullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

class Player extends User{
    
}

const inu = new Player("inu","jeong","innie");

inu.getFullName();

• 메소드도 사용 가능

abstract class User{
    constructor(
        protected firstName: string,
        protected lastName: string,
        protected nickname: string
    ) {}
    abstract getNickName():void     //call signature 만 작성
    getFullName(){
        return `${this.firstName} ${this.lastName}`;
    }
}

class Player extends User{
    getNickName(){
        console.log(this.nickname);
    }
}

const inu = new Player("inu","jeong","innie");

inu.getFullName();

// inu.nickname;

protected -> 상속 받은 클래스가 접근 가능

Interface

• The shape of an object

interface Person{
  name: string;
  age?: number;				//선택적 속성
  readonly id: string;		//읽기 전용 속성
}  

const person: Person = {
  name: 'John',
  id: '1234',
};
person. age = 30;			//가능
//person.id = '5678';		//오류: 읽기 전용

선택적 속성과 읽기 전용 속성 기능 -> 더 유연한 형태의 구조 정의 가능

interface User {
    name: string
}

// interface Player extends User {
// }

type Player = User & {
    
}

const iuj: Player = {
    name: "iuj"
}

• interface Player extends User {}: 객체 구조가 명확하고, 클래스를 사용할 때 자연스러움
• type Player = User & {}: 객체 구조뿐만 아니라 유니언, 튜플, 기타 타입 조합을 만들 수 있어서 더 유연

interface User {
    name: string
}

interface User {
    lastName: string
}

interface User {
    health: number
}

const iuj: User = {
    name: "inu",
    lastName: "jeong",
    health: 10
}
// 3개 같은 이름으로 가능하나 3가지에 있는 모든 요소 들어가야함 -> type은 안됨(같은 이름x)

abstract class User{
    constructor(
        protected firstName: string,
        protected lastName: string
    ){}
    abstract sayHi(name: string): string
    abstract fullName(): string
}

// new User() -> Cannot create an instance of an abstract class.

class Player extends User {
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}. My name is ${this.fullName()}`
    }
}

• abstract class : The blueprint of an object

interface User{
    firstName: string,
    lastName: string,
    sayHi(name: string): string
    fullName(): string
}

interface Human {
    health: number
}

class Player implements User, Human {
    constructor(
        public firstName:string,
        public lastName:string,
        public health:number
    ){} //private, protected 사용시 에러
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}. My name is ${this.fullName()}`
    }        
}

function makeUser(user: User){
    return "hi"
}

makeUser({
    firstName: "inu",
    lastName: "Jeong",
    fullName: () => "xx",
    sayHi: (name) => "string"
})

// makeUser는 다음과 같이 표현 가능

function makeUser(user: User): User{
    return {
        firstName: "inu",
        lastName: "Jeong",
        fullName: () => "xx",
        sayHi: (name) => "string"
    }
}

• 인터페이스는 자바스크립트에서 컴파일 x
  

• Player처럼 다중 구현 가능

interface SStorage<T>{
    [key: string]: T
}    

class LocalStorage<T> {
    private storage: SStorage<T> = {}
    set(key: string, value: T){
        this.storage[key] = value;
    }
    remove(key:string){
        delete this.storage[key];
    }
    get(key: string):T {
        return this.storage[key]
    }
    clear(){
        this.storage = {}
    }
}

const stringsStorage = new LocalStorage<string>();
stringsStorage.get("key");
stringsStorage.set("hello","trhing");
const booleansStorage = new LocalStorage<boolean>();
booleansStorage.get("xxx");
booleansStorage.set("hello", true);