일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 파이썬
- 타임어택
- 회고
- python
- LeetCode
- 자바스크립트
- 제로초
- 렛츠기릿 자바스크립트
- 손에 익히며 배우는 네트워크 첫걸음
- 토익
- 알고리즘
- 프로그래머스
- javascript
- programmers
- 코드스테이츠
- 타입스크립트
- 리트코드
- codestates
- til
- 리덕스
- 2주 프로젝트
- 백준
- js
- 코어 자바스크립트
- Async
- 4주 프로젝트
- 리액트
- 정재남
- SQL 고득점 Kit
- 타입스크립트 올인원
Archives
- Today
- Total
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
==> 자바처럼 객체지향처럼 사용할 수 있다
반응형