Typescript | 함수 오버로딩, 접근 제어자, 제네릭(Generics)

함수 오버로딩

두 함수를 하나로 만들어주려면 ?

 --> 기본적인 구조는 같지만 매개변수가 다를 때 오버로딩을 이용해서 두 함수를 하나로 만들어줄 수 있음

 

'hello world' 출력하는 방법

1. 매개변수에 직접적으로 type을 union으로 주는 방법

 

2. 함수 오버로딩을 이용한 방법

 

접근 제어자

오류 발생

--> 타입스크립트에서는 this로 접근하는 속성들을 위한 type을 class body에 넣어줘야 함

↓

public 생략되어 있음

 

1. public

어디서나 접근 가능

id, title 앞에 아무것도 안 써있으면 기본적으로 public 적용되어 있는 것

 

2. protected

클래스 내, 상속 받은 자식 클래스에서 접근 가능

 

3. private

클래스 내에서만 접근 가능

 

복잡한 코드 정리하기

원래 코드

 

수정 코드

여기서 public은 생략 불가능

 

 

제네릭(Generics)

함수, 클래스, 인터페이스 등을 작성할 때 특정 타입에 의존하지 않고 다양한 타입을 처리할 수 있도록 하는 기능

템플릿처럼 동작하여 나중에 특정 타입으로 채워지는 타입 변수를 사용

제네릭을 사용하면 재사용성이 높은 함수와 클래스를 생성할 수 있음

any처럼 타입을 직접 지정하지 않지만 타입을 체크해 컴파일러가 오류를 찾을 수 있게 함

 

새로운 변수를 만들 때 마다 union을 통해 적어야 하는 게 늘어남

↓

 

T는 타입변수 ! 이름 다른 걸로 바꿔도 됨 (T라고 관습적으로 씀)

함수 호출 시 구체적인 타입으로 대체 됨

getArrayLength<number>(array1); // T는 number로 대체됩니다.
getArrayLength<string>(array2); // T는 string으로 대체됩니다.
getArrayLength<boolean>(array3); // T는 boolean으로 대체됩니다.

 

any를 쓰고 싶지 않을 때

원래 코드

 

타입 변수 사용

 

함수에 매개변수가 두 개라면 ?

 

기본값 설정 가능

 

제약 조건을 사용해서 필수 속성 설정하기

 

리액트에서 제네릭

• Props 인터페이스: 컴포넌트가 받을 prop의 타입을 정의

• 제네릭을 사용한 useState 훅: 상태의 타입을 명확히 지정하여 타입 안전성을 증가시킴

• 상태 사용: 상태에 접근하고 필요한 데이터를 출력하거나 사용할 수 있음

 

 

const [state, setState] = React.useState<{ name: string | null }>({ name: "" });

 

• useState 훅을 사용할 때 제네릭을 사용하여 상태의 타입을 지정합니다.
• 여기서는 상태의 타입을 { name: string | null }로 지정했습니다. 즉, state는 name이라는 속성을 가진 객체이고, name의 타입은 string 또는 null입니다.
• 초기 상태를 { name: "" }로 설정했습니다.