관리 메뉴

Jerry

[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 - (9) : {}와 Object / readonly, 인덱스드 시그니처, 맵드 타입스 / 클래스의 새로운 기능들 본문

Front/Typescript

[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 - (9) : {}와 Object / readonly, 인덱스드 시그니처, 맵드 타입스 / 클래스의 새로운 기능들

juicyjerry 2024. 2. 29. 00:56
반응형
{}와 Object 

 

 

 

 

 

 

{}, Object는 모든 타입(null과 undefined 제외)

const x: {} = 'hello';
const y: Object = 'hi';

 

 

실제 객체 : object

실제로 사용할 때, object 지양, interface, type, class 지향

const xx: object = 'hi'
const yy: object = { hello: 'world' };

// unknown = {} | null | undefined 합쳐진 것
const z: unknown = 'hi';
if (z) {
    z; // {} 
} else {
    // null | undefined
}

 

 

 

 

 


 

 

 

 

 

 

readonly, 인덱스드 시그니처, 맵드 타입스





// readonly
interface A {
    readonly a: string;
    b: string;
}
const aaaa: A = { a: 'hello', b: 'world'};
aaaa.a = '123';


// 인덱스 시그니쳐
type C = { [key: string]: string};
// 어떤 키든간에 전부 문자열이고 리턴값도 문자였으면 좋겠어
type B = { [key: string]: number};
const bbbb: B = { a: 3, b: 5, c: 5, d: 123 };


// 맵드 타입스
// 나는 키가 얘네 셋 중에 하나였음 좋겠어
type D = 'Human' | 'Mammal' | 'Animal';
// type E = { [key in D]: number };
type E = { [key in D]: D }; // 위 코드랑 똑같음
const tttt: E = { Human: 123, Mammal: 5, Animal: 6 }

 

※인터페이스로는 유니온이 안 되서 타입으로 사용해야 함

 

 

 

 

 

 

클래스의 새로운 기능들





클래스 자체의 타입은 A, 클래스 이름은 new 인스턴스를 가리킨다

class A {
    a: string;
    b: number;

    constructor(a: string, b: number = 123) {
        this.a = a;
        this.b = b;
    } 

    method() {

    }
}

type AA = A;
const a: A = new A('123');
const b: typeof A = A;

 

 

 

 

 

타입스크립트 private 사용 추천
전환 시 public으로 바뀐다는 단점이 있음 + 정교하게 사용할 수 있음 - protected 

class A {
    private a: string = 123; // ts 제공 프라이빗
    #b: number = 123; // js 제공 프라이빗

    constructor(a: string, b: number = 123) {
        this.a = a;
        this.b = b;
    } 

    method() {
        console.log(this.a, this.#b);
    }
}

 

 

 

 

 

 

interface A { // 추상
    readonly a: string;
    b: string;
}

// 객체지향을 타입 스크립트에서 따왔다
// 클래스의 모양을 implements로 통제할 수 있다
class B implements A { // 구현
    private a: string;
    protected b: string;
    public c: string = 'wow'; // public은 기본 c: string = 'wow';

    method() {
        console.log(this.a);
        console.log(this.b);
        console.log(this.c);
    }
}

class C extends B {
    method() {
        console.log(this.a); // 접근 x
        console.log(this.b); // 상속한 얘들까지는 접근 가능 (브모의 protected)
        console.log(this.c);
    }
}

new C().a; // 접근할 수 없음 (프라이빗), class B 안에서만 사용 가능
new C().b; // 안에서 쓸 수 있는데 바깥에서 쓸 수 없다
new C().c; // 공식적으로 아무렇게 접근 허용

 

 

 

 

 

 

 

 

                        public            protected       private
클래스내부         O                    O               O
인스턴스             O                   X               X
상속클래스         O                   O

==> 자바처럼 객체지향처럼 사용할 수 있다

 

 

 

 

반응형