#18 [5장_3] 주어진 코드에서 유틸리티 타입을 활용해 filterUsers의 타입을 올바르게 수정해보아요!

[hyeyoonS]

❓문제

주어진 코드에서 유틸리티 타입을 활용해 filterUsers의 타입을 올바르게 수정해보아요!

interface User {
    type: 'user';
    name: string;
    age: number;
    occupation: string;
}

interface Admin {
    type: 'admin';
    name: string;
    age: number;
    role: string;
}

export type Person = User | Admin;

export const persons: Person[] = [
    { type: 'user', name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' },
    {
        type: 'admin',
        name: 'Jane Doe',
        age: 32,
        role: 'Administrator'
    },
    {
        type: 'user',
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    },
    {
        type: 'admin',
        name: 'Bruce Willis',
        age: 64,
        role: 'World saver'
    },
    {
        type: 'user',
        name: 'Wilson',
        age: 23,
        occupation: 'Ball'
    },
    {
        type: 'admin',
        name: 'Agent Smith',
        age: 23,
        role: 'Administrator'
    }
];

export const isAdmin = (person: Person): person is Admin => person.type === 'admin';
export const isUser = (person: Person): person is User => person.type === 'user';

export function logPerson(person: Person) {
    let additionalInformation = '';
    if (isAdmin(person)) {
        additionalInformation = person.role;
    }
    if (isUser(person)) {
        additionalInformation = person.occupation;
    }
    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
}

export function filterUsers(persons: Person[], criteria: User): User[] {
    return persons.filter(isUser).filter((user) => {
        const criteriaKeys = Object.keys(criteria) as (keyof User)[];
        return criteriaKeys.every((fieldName) => {
            return user[fieldName] === criteria[fieldName];
        });
    });
}

console.log('Users of age 23:');

filterUsers(
    persons,
    {
        age: 23
    }
).forEach(logPerson); //🚨 Error: Argument of type '{ age: number; }' is not assignable to parameter of type 'User'. Type '{ age: number; }' is missing the following properties from type 'User': type, name, occupation

🎯답변

• 현재는 filterUsers 함수에 전달된 criteria 객체의 타입이 User 타입이어서, User의 모든 프로퍼티 type, name, age, occupation를 전달해야 합니다. 그런데 filterUsers 함수는 user 중 특정 속성값이 일치하는 user를 필터하는 함수이므로, User이 아닌 User의 일부 속성만을 받을 수 있도록 수정해야 합니다. ▶ Partial을 이용해서 User의 프로퍼티를 선택적 프로퍼티로 변경하기!

🤔 Partial이 뭐지?

• 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환합니다.
• 따라서 기존 객체 타입에 정의된 프로퍼티들 중 일부분만 사용할 수 있도록 합니다.

export function filterUsers(persons: Person[], criteria: Partial<User>): User[] {
    return persons.filter(isUser).filter((user) => {
        const criteriaKeys = Object.keys(criteria) as (keyof User)[];
        return criteriaKeys.every((fieldName) => {
            return user[fieldName] === criteria[fieldName];
        });
    });
}

이렇게 수정하면

filterUsers(
    persons,
    {
        age: 23
    }
).forEach(logPerson);

filterUsers(
    persons,
    {
        name: "Wilson"
    }
).forEach(logPerson);

이렇게 일부 속성이 일치하는 user을 필터할 수 있습니다.

[drizzle96]

• 잘못된 부분: filterUsers의 criteria 인자 타입
• 이유: filterUsers는 user 중 특정 속성 값이 일치하는 user를 필터하는 함수이고, criteria는 user 속성의 일부가 들어갈 수 있으므로 Partial 처리가 필요합니다.

export function filterUsers(persons: Person[], criteria: Partial<User>): User[] {
  return persons.filter(isUser).filter((user) => {
    const criteriaKeys = Object.keys(criteria) as (keyof User)[]
    return criteriaKeys.every((fieldName) => {
      return user[fieldName] === criteria[fieldName]
    })
  })
}

[qooktree1]

// filterUsers 함수는 결론적으로 2번째 인자로 age 객체를 보내고 그것을 User객체로 받기 때문에 오류가 난다.
// `User` 타입의 모든 속성이 존재해야지 해당 함수가 실행되게 된다.
// 따라서 부분집합의 개념인 `Partial` 유틸리티 함수를 사용한다.
export function filterUsers(persons: Person[], criteria: Partial<User>): User[] {
    return persons.filter(isUser).filter((user) => {
        const criteriaKeys = Object.keys(criteria) as (keyof User)[];
        return criteriaKeys.every((fieldName) => {
            return user[fieldName] === criteria[fieldName];
        });
    });
}

filterUsers(persons, { age: 23 }).forEach(logPerson);