TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day8

 🍶 진도

 

4. 함수와 타입 (5/5)

• 함수 오버로딩
• 사용자 정의 타입 가드

5. 인터페이스 (3/3)

• 인터페이스
• 인터페이스 확장하기
• 인터페이스 선언 합치기

🫘 요약

 

함수 오버로딩

/**
 * 함수 오버로딩
 * 하나의 함수를 매개변수의 갯수나 타입에 따라
 * 여러가지 버전으로 만드는 문법
 * -> 하나의 함수 func
 * -> 모든 매개변수의 타입은 number
 * -> ver1. 매개변수가 1개 -> 이 매개변수에 20을 곱한 값 출력
 * -> ver2. 매개변수가 3개 -> 이 매개변수들을 다 더한 값을 출력
 */

// 버전들 -> 오버로드 시그니처
function func(a: number): void; // 1번
function func(a: number, b: number, c: number): void; // 2번
// 실제 구현부 -> 구현 시그니처
// function func(a: number);
// function func(a: number, b: number, c: number) 는 1번 오버로드 시그니처를 만든 의미가 없어지기 때문에 ?로 있을수도 없을수도 있는 매개변수의 값을 표현해줘야한다
function func(a: number, b?: number, c?: number) {
    if (typeof b === "number" && typeof c === "number") {
        console.log(a + b + c);
    } else {
        console.log(a * 20);
    }
}
// func();
func(1);
// func(1,2);
func(1, 2, 3);

 

사용자 정의 타입 가드

/**
 * 사용자 정의 타입가드
 */

type Dog = {
    name: string;
    isBark: boolean;
}
type Cat = {
    name: string;
    isScratch: boolean;
};

type Animal = Dog | Cat;
// 서로소 유니온 타입으로 type을 수정하지 못하는 경우라고 치고 함수 전개

function isDog(animal:Animal): animal is Dog{
return (animal as Dog).isBark !== undefined;
}
function isCat(animal: Animal): animal is Cat {
    return (animal as Cat).isScratch !== undefined;
}

function warning(animal:Animal)  {
    if(isDog(animal)){
        // animal에 커서 대보면 animal: Dog
        animal;
    }else if("isScratch" in animal){
        // animal에 커서 대보면 animal: Cat
        animal;
    }
}

 

인터페이스

/**
 * 인터페이스 interface
 */

interface Person {
    readonly name: string;
    age?: number;
    // sayHi: () => void;  // 함수 타입 표현식
    sayHi(): void; // 호출 시그니처
    sayHi(a: number, b: number): void; // 호출 시그니처
}

const person: Person = {
    name: "Natty",
    sayHi: function () {
        console.log("hi");
    },
};

person.sayHi();
person.sayHi(1,2);

 

인터페이스 확장

/**
 * 인터페이스의 확장
 */

type Animal = {
    name: string;
    color: string;
};

interface Dog extends Animal {
    isBark: boolean;
}
const dog: Dog = {
    name: "",
    color: "",
    isBark: true,
};

interface Cat extends Animal {
    isScratch: boolean;
}

interface Chicken extends Animal {
    isFly: boolean;
}

interface DogCat extends Dog, Cat {}
const dogCat: DogCat = {
    name: "",
    color: "",
    isBark: false,
    isScratch: true,
};

인터페이스 선언 합치기

/**
 * 선언 합침
 */

interface Person {
    name: string;
}

interface Person {
    // name: number; 
    // 후속 속성 선언 시에는 같은 형식이 있어야함. 서브타입도 안된다
    name: string;
    age: number;
}
// 확장시에는 서브타입인 string literal type이어도 ok였지만 선언 합침의 경우에는 서브타입도 안된다
interface Developer extends Person {
    name: "hello";
}

const person: Person = {
    name: "",
    age: 25,
};


/**
 * 모듈 보강
 */

interface Lib {
    a: number;
    b: number;
}
interface Lib {
    c: string;
}
const lib: Lib = {
    a: 1,
    b: 2,
    c: "xoxo",
// c 를 추가하고 싶을 때, 선언 합침을 이용해서 타입을 추가할 수 있다.
};

 

 

🍬 과제

 

Q1. 구현 시그니처를 완성하세요

function add(): number;
function add(a: number): number;
function add(a: number, b: number, c: number): number;


function add(a?: number, b?: number, c?: number) {
  return a || 0 + b || 0 + c || 0;
}

add();
console.log(add(1));
console.log(add(1, 2, 3));

 

Q2. 사용자 정의 타입 가드를 완성하세요. (타입 수정 X)

type Guest = {
  visitCount: number;
};

type Member = {
  id: string;
};

type User = Guest | Member;


function isGuest(user: User): user is Guest {
  if (!(user as Guest).visitCount) {
    return false;
  }
  return true;
}
function isMember(user: User): user is Member {
  if(!(user as Member).id) {
    	return false; 
  }
	return true;
}

 

Q3. 사용자 정의 타입 가드를 완성하세요. (타입 수정 X)

interface Person {
  name: string;
}

interface Student extends Person {
  grade: "A" | "B" | "C";
}
interface Developer extends Person {
  skill: string[];
}
interface Boss extends Person {
  company: string;
}