TypeScript 개념 - 3

 

* 출처 : https://github.com/ZeroCho/ts-all-in-one

GitHub - ZeroCho/ts-all-in-one

 

 

* 클래스는 interface를 따름

- public : 어느 곳에서나 가능

- private : 해당 클래스 내에서만 사용 가능

- protected : 해당 클래스 내에서만 가능, 상속한 경우에서도 사용 가능

//추상
interface A { //JS로 변환 시 사라짐
  readonly a: string;
  b: string;
}
//구현
//[자바처럼 쓸 수 있음]
class B implements A { //인터페이스를 클래스로 구현
  private a: string; //객체 지향에서 쓰는 것(클래스 B안에서만 할 수 있음)
  protected b: string; //객체 지향에서 쓰는 것(클래스 B안에서만 가능, 상속한 경우는 쓸 수 있음)
}
class C extends B {
	method() {
		console.log(this.a); //오류
		console.log(this.b); //접근 가능
	}
}
new C().a;



abstract class X { //반드시 구현해야 함
  abstract work(user: User): boolean;
}
class Y extends X {
  work(user: User): boolean {
    return true;
  }

 

 

* 옵셔널 

- 접근하는 객체의 프로퍼티가 null 또는 undefined일 수 있는 optional property인 경우 if문을 사용하지 않고 넘어가게 함

- 객체가 null이나 undefined이면 undefined를 리턴하고 그렇지 않은 경우 데이터 값을 리턴함 

* 참고 : https://lakelouise.tistory.com/192

[TypeScript] 타입스크립트 옵셔널 체이닝 (Optional Chaining)

//전부 다 받고 싶은 경우 function abc(...args: number[]) {}
function abc(a: number, b?: number, c: number?) {} //개수가 정해진 채 몇 개만 옵셔널로 받고 싶음
abc(1)
abc(1, 2)
abc(1, 2, 3)

let obj: { a: string, b?: string }  = { a: 'hello', b: 'world' } //b는 없어도 상관 없음
obj = { a: 'hello'}

 

 

* 제네릭

- 재사용이 높은 컴포넌트를 만들 때 자주 활용되는 특징을 지님

- 한가지 타입보다 여러 타입에서 동작하는 컴포넌트를 생성 시 사용

- 타입을 변수처럼 만듦

* 참고 : https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

제네릭 | 타입스크립트 핸드북

//아래의 문제를 해결하기 위해 나온 것
//문제
function add(x: string, y: string): string;
function add(x: number, y: number): number;
function add(x,y) {
    return x + y
}

add(1, 2) //문제 없음
add('1', '2') //문제 없음

add('1', 2) //문제 있음 
add('2', 1) //문제 있음

//제네릭 사용하는 경우
//T는 타입이 같으면 모두 다 됨
function add<T>(x: T, y: T): T { return x + y }
add<number>(1, 2);
add(1, 2);
add<string>('1', '2');
add('1', '2');
add(1, '2');

//제네릭 제한, 제네릭 기본값은 extends 사용
function add<T extends number | string>(x: T, y: T): T { return x + y }
add<number>(1, 2);
add(1, 2);
add<string>('1', '2');
add('1', '2');
add(1, '2');

 

 

* 기본값을 넣는 경우

//TS 내 화면
const a = (b: {children: 'zerocho'} = {children: 'zerocho'}) => {
    return true;
}

//JS 내 화면
const a = (b = { children: 'zerocho' }) => {
    return true;
};

 

 

* React에서 <T>만 붙일 경우 <div></div>값처럼 인식해서 오류가 남 

01

JSX가 React로 된 경우 오류 발생

//오류 해결
const add = <T=unknown>(x: T, y: T) => ({x, y})
const result = add(1, 2)