5.1.1_ typescript에서 extends가 활용되는 3가지를 설명해주세요.

eeeyooon commented 9 months ago

📝 150p (이전 챕터 내용도 포함됨)

❓ typescript에서 extends는 크게 3가지 방식으로 활용될 수 있습니다. 그 중 하나는 이번 챕터에서 배운 조건부 타입으로 설정하는 것인데요. 3가지 방식에 대한 설명과 조건부 타입을 설정할 때의 간단한 예제 코드를 작성해주세요.

lulla-by commented 9 months ago

typescript에서 extends는 3가지로 활용됩니다.

interface를 확장하고 싶을 경우
제네릭과 함께 조건부로 사용
제네릭 타입에서 타입의 매개변수에 대한 제약 한정자 역할

Stilllee commented 9 months ago

1. 인터페이스 확장

인터페이스가 다른 인터페이스의 모든 멤버를 상속받을 수 있다.

2. 제네릭 제약

제네릭 타입을 사용할 때, extends를 사용하여 특정 타입의 서브타입만을 허용하는 제약 조건을 추가할 수 있다.

3. 조건부 타입 설정

입력 타입에 따라 다른 타입을 반환할 수 있게한다.

type Check<T> = T extends string ? "String" : "Not String";

type Type1 = Check<string>; // "String"
type Type2 = Check<number>; // "Not String"

sryung1225 commented 9 months ago

타입스크립트에서 extends의 용도 3가지

(1) 타입을 확장하기 위해 사용
(2) 제네릭 타입에서 한정자 역할로 사용하기 위해 사용
- 개발자가 잘못된 값을 넘기는 휴먼에러를 방지
(3) 조건부 타입을 설정하기 위해 사용
- 반환 값을 사용자가 원하는 값으로 구체화하기 위함
```
// extends 조건부 타입 + 제네릭
interface A {
apple: number;
}
interface B {
banana: number;
}
```
type Alpha = T extends "a" ? A : B; // 제네릭 타입으로 extends를 사용한 조건부 타입 선언 type Haha = Alpha<"a">; // A 타입

// Haha가 A 타입이 맞는지 확인 const HahaTest1: Haha = { apple: 1 }; const HahaTest2: Haha = { banana: 2 }; // 🚨 ERORR : Object literal may only specify known properties, and 'banana' does not exist in type 'A'.

eeeyooon commented 9 months ago

extends는 크게 다음 3가지로 활용될 수 있습니다.

1. 타입 확장

extends를 사용하여 기존 타입의 모든 속성을 가진 새 타입을 만들고, 추가적인 속성을 더할 수 있습니다.

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  employeeId: number;
}

const employee: Employee = {
  name: "Alice",
  age: 30,
  employeeId: 123
};

이 예제에서 Employee 인터페이스는 Person 인터페이스의 모든 속성을 가지고 있을 뿐만 아니라, 추가적으로 employeeId 속성도 가지고 있습니다.

2. 제네릭으로 받는 타입을 제한하는 한정자

extends를 사용하여 제네릭 타입에 대한 제한 조건을 설정할 수 있습니다. 특정 타입이나 인터페이스를 상속 받은 타입만 제네릭으로 사용할 수 있도록 제한할 수 있습니다.

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const person = { name: "Alice", age: 25 };
const personName = getProperty(person, "name"); // "Alice"
const personAge = getProperty(person, "age"); // 25

console.log(personName); // Alice
console.log(personAge); // 25

이 예제에서 getProperty 함수는 obj와 key 두 개의 매개변수를 받습니다. K extends keyof T는 K가 T의 키 중 하나임을 보장합니다. 그리고 함수는 obj[key]를 반환하여, 지정된 키에 해당하는 객체의 속성 값을 얻습니다. person 객체를 생성하고 getProperty 함수를 사용하여 name과 age 속성 값을 가져옵니다.

3. 조건부 타입 설정

조건부 타입은 입력된 제네릭 타입에 따라 반환 타입이 달라지는 타입을 정의할 때 사용합니다.

type IsString<T> = T extends string ? true : false;
//IsString<T>는 제네릭 타입 T를 받아서 T가 string 타입에 할당 가능한지 체크함

// 사용 예
const isString: IsString<string> = true;
const isNotString: IsString<number> = false; 

console.log(isString); //true
console.log(isNotString); //false

이 예제에서 IsString<T>는 T가 string 타입과 일치할 때 true를 반환하고, 그렇지 않으면 false를 반환합니다.

Coding-Village-Protector / woowahan-ts