๐Ÿ˜Ž
Onemorebottlee's TIL
  • ๐Ÿค“Introduce
  • ๐Ÿ“–DevLog
    • ๐Ÿ’ฃError
      • npm ERR! Cannot read properties of null (reading 'edgesOut')
      • git
        • src refspec main does not match any
      • NextJS
        • No img element
        • ReferenceError : document is not defined
        • `next/image` Un-configured Host
  • ๐Ÿ“บLecture
    • Nomad Coders
      • ์ดˆ๋ณด์ž๋ฅผ ์œ„ํ•œ ๋ฆฌ๋•์Šค 101
        • #0 Introduction
        • #1 PURE REDUX: COUNTER
        • #2 PURE REDUX: TO DO LIST
        • #3 REACT REDUX
        • #4 Redux Toolkit
      • ๋ฐ”๋‹๋ผ JS๋กœ ๊ทธ๋ฆผ ์•ฑ ๋งŒ๋“ค๊ธฐ
      • React JS ๋งˆ์Šคํ„ฐ ํด๋ž˜์Šค
        • #2 Styled Componnents
        • #3 TypeScript
        • #4 Crypto Tracker
        • #5 State Management
        • #6 Trello
        • #7 ANIMATIONS
      • Next.js ์‹œ์ž‘ํ•˜๊ธฐ
        • #0 INTRODUCTION
        • #1 FRAMEWORK OVERVIEW
        • #2 PRACTICE PROJECT
      • Typescript๋กœ ๋ธ”๋ก์ฒด์ธ ๋งŒ๋“ค๊ธฐ
        • #1 Introduction
        • #2 Overview of TypeScript
        • #3 Functions
        • #4 Classes and Interfaces
        • #5 TypeScript Blockchain
      • SQL Master Class
        • #1 Introduction
        • #2 SQLite
        • #3 Data Definition Language
        • #4 Data Manipulation Language
        • #5 Subqueries and CTEs
        • #6 Indexes
        • #7 MySQL
        • #8 Foreign Keys
        • #9 JOINS
        • #10 Nomalization
        • #11 Events & Triggers
        • #12 Full-Text Indexes
        • #13 PostgreSQL
        • #14 Functions And Procedures
        • #15 Transactions
        • #16 Data Control Language
        • #17 PostgreSQL JSON Columns
        • #18 PostgreSQL Extensions
        • #19 MongoDB
        • #20 REDIS
        • #21 Javascript and Python Drivers
    • Udemy
      • TypeScript ๋งˆ์Šคํ„ฐ with Webpack & React
        • [S1] ์†Œ๊ฐœ
        • [S2] ์„ค์น˜ ๋ฐ ์„ค์ •
        • [S3] ํƒ€์ž… ์• ๋„ˆํ…Œ์ด์…˜ ๊ธฐ์ดˆ
        • [S4] ํ•จ์ˆ˜
        • [S5] ๊ฐ์ฒด ํƒ€์ž…
        • [S6] ๋ฐฐ์—ด ํƒ€์ž…
        • [S7] ์œ ๋‹ˆ์˜จํƒ€์ž…
        • [S8] Tuple & Enum
        • [S9] ์ธํ„ฐํŽ˜์ด์Šค
        • [S10] TypeScript ์ปดํŒŒ์ผ๋Ÿฌ
        • [S11] ๋ฏธ๋‹ˆ ํ”„๋กœ์ ํŠธ DOM, ํƒ€์ž… ๋‹จ์–ธ, ๊ทธ๋ฆฌ๊ณ  ๋” ๋งŽ์€ ๋‚ด์šฉ
        • [S12] Class
        • [S13] TS Class
        • [S14] Generics โญโญโญโญโญ
        • [S15] Narrowing
        • [S16] Type Declarations
        • [S17] Module
        • [S18] Webpack ๊ณผ TypeScript
        • [S19] React
    • ๋ชจ๋‘๋ฅผ ์œ„ํ•œ ์ปดํ“จํ„ฐ ๊ณผํ•™ CS50
      • 1. ์ปดํ“จํŒ… ์‚ฌ๊ณ 
      • 2. C์–ธ์–ด
      • 3. ๋ฐฐ์—ด
      • 4. ์•Œ๊ณ ๋ฆฌ์ฆ˜
      • 5. ๋ฉ”๋ชจ๋ฆฌ
      • 6. ์ž๋ฃŒ๊ตฌ์กฐ
    • ์ƒํ™œ์ฝ”๋”ฉ
      • DATABASE
        • DATABASE1
  • ๐Ÿ“šBook
    • ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive
      • 1์žฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ
      • 2์žฅ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?
      • 3์žฅ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์‹คํ–‰ ๋ฐฉ๋ฒ•
      • 4์žฅ ๋ณ€์ˆ˜
      • 5์žฅ ํ‘œํ˜„์‹๊ณผ ๋ฌธ
      • 6์žฅ ๋ฐ์ดํ„ฐ ํƒ€์ž…
      • 7์žฅ ์—ฐ์‚ฐ์ž
      • 8์žฅ ์ œ์–ด๋ฌธ
      • 9์žฅ ํƒ€์ž… ๋ณ€ํ™˜๊ณผ ๋‹จ์ถ• ํ‰๊ฐ€ โญโญโญ
      • 10์žฅ ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด
      • 11์žฅ ์›์‹œ ๊ฐ’๊ณผ ๊ฐ์ฒด์˜ ๋น„๊ต
      • 12์žฅ ํ•จ์ˆ˜ โญโญโญโญ
      • 13์žฅ ์Šค์ฝ”ํ”„
      • 14์žฅ ์ „์—ญ ๋ณ€์ˆ˜์˜ ๋ฌธ์ œ์ 
      • 15์žฅ let, const ํ‚ค์›Œ๋“œ์™€ ๋ธ”๋ก ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„ โญโญโญ
      • 16์žฅ ํ”„๋กœํผํ‹ฐ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ
      • 17์žฅ ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์˜ํ•œ ๊ฐ์ฒด ์ƒ์„ฑ
      • 18์žฅ ํ•จ์ˆ˜์™€ ์ผ๊ธ‰ ๊ฐ์ฒด โญโญ
      • 19์žฅ ํ”„๋กœํ† ํƒ€์ž… โญโญโญโญโญ
      • 20์žฅ strict mode
      • 21์žฅ ๋นŒํŠธ์ธ ๊ฐ์ฒด โญ
      • 22์žฅ this โญโญโญ
      • 23์žฅ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ โญโญโญโญโญโญโญโญโญโญ
      • 24์žฅ ํด๋กœ์ € โญโญโญโญโญโญโญ
      • 25์žฅ ํด๋ž˜์Šค
      • 26์žฅ ES6 ํ•จ์ˆ˜์˜ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ
      • 27์žฅ ๋ฐฐ์—ด โญโญโญ
      • 28์žฅ Number
      • 29์žฅ Math
      • 30์žฅ Date
      • 31์žฅ RegExp
      • 32์žฅ String
      • 33์žฅ 7๋ฒˆ์งธ ๋ฐ์ดํ„ฐ ํƒ€์ž… Symbol
      • 34์žฅ ์ดํ„ฐ๋Ÿฌ๋ธ”
      • 35์žฅ ์Šคํ”„๋ ˆ๋“œ ๋ฌธ๋ฒ•
      • 36์žฅ ๋””์ŠคํŠธ๋Ÿญ์ฒ˜๋ง ํ• ๋‹น
      • 37์žฅ Set๊ณผ Map
      • 38์žฅ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ๊ณผ์ •โญโญโญโญโญโญโญโญ
      • 39์žฅ DOM โญโญโญโญโญโญโญโญโญโญโญ
      • 40์žฅ ์ด๋ฒคํŠธโญโญโญโญโญโญโญโญโญโญโญ
      • 41์žฅ ํƒ€์ด๋จธ
      • 42์žฅ ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ โญโญโญโญโญโญโญโญ
      • 43์žฅ Ajax
      • 44์žฅ REST API
      • 45์žฅ ํ”„๋กœ๋ฏธ์Šค
      • 46์žฅ ์ œ๋„ˆ๋ ˆ์ดํ„ฐ์™€ async/await
      • 47์žฅ ์—๋Ÿฌ ์ฒ˜๋ฆฌ
      • 48์žฅ ๋ชจ๋“ˆ
      • 49์žฅ Babel๊ณผ Webpack์„ ์ด์šฉํ•œ ES6+/ES.NEXT ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ๊ตฌ์ถ•
    • ๋Ÿฌ๋‹ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
      • Ch.1 ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ
      • Ch.2 ํƒ€์ž… ์‹œ์Šคํ…œ
      • Ch.3 ์œ ๋‹ˆ์–ธ๊ณผ ๋ฆฌํ„ฐ๋Ÿด
      • Ch.4 ๊ฐ์ฒด
      • Ch.5 ํ•จ์ˆ˜
      • Ch.6 ๋ฐฐ์—ด
      • Ch.7 ์ธํ„ฐํŽ˜์ด์Šค
      • Ch.8 ํด๋ž˜์Šค
      • Ch.9 ํƒ€์ž… ์ œํ•œ์ž
      • Ch.10 ์ œ๋„ค๋ฆญ
      • Ch.11 ์„ ์–ธ ํŒŒ์ผ
      • Ch.12 IDE ๊ธฐ๋Šฅ ์‚ฌ์šฉ
      • Ch.13 ๊ตฌ์„ฑ ์˜ต์…˜
      • Ch.14 ๊ตฌ๋ฌธ ํ™•์žฅ
      • Ch.15 ํƒ€์ž… ์šด์˜
      • ์šฉ์–ด ์‚ฌ์ „
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ ๊ฐ€์ด๋“œ
    • SQL in 10 Minutes
      • 1์žฅ SQL ์ดํ•ดํ•˜๊ธฐ
      • 2์žฅ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
      • 3์žฅ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ ์ •๋ ฌํ•˜๊ธฐ
      • 4์žฅ ๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง
      • 5์žฅ ๊ณ ๊ธ‰ ๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง
      • 6์žฅ ์™€์ผ๋“œ์นด๋“œ ๋ฌธ์ž๋ฅผ ์ด์šฉํ•œ ํ•„ํ„ฐ๋ง
      • 7์žฅ ๊ณ„์‚ฐ ํ•„๋“œ ์ƒ์„ฑํ•˜๊ธฐ
      • 8์žฅ ๋ฐ์ดํ„ฐ ์กฐ์ž‘ ํ•จ์ˆ˜ ์‚ฌ์šฉํ•˜๊ธฐ
      • 9์žฅ ๋ฐ์ดํ„ฐ ์š”์•ฝ
      • 10์žฅ ๋ฐ์ดํ„ฐ ๊ทธ๋ฃนํ•‘
      • 11์žฅ ์„œ๋ธŒ์ฟผ๋ฆฌ ์‚ฌ์šฉํ•˜๊ธฐ
      • 12์žฅ ํ…Œ์ด๋ธ” ์กฐ์ธ
      • 13์žฅ ๊ณ ๊ธ‰ ํ…Œ์ด๋ธ” ์กฐ์ธ ์ƒ์„ฑํ•˜๊ธฐ
      • 14์žฅ ์ฟผ๋ฆฌ ๊ฒฐํ•ฉํ•˜๊ธฐ
      • 15์žฅ ๋ฐ์ดํ„ฐ ์‚ฝ์ž…ํ•˜๊ธฐ
      • 16์žฅ ๋ฐ์ดํ„ฐ ์—…๋ฐ์ดํŠธ์™€ ์‚ญ์ œ
      • 17์žฅ ํ…Œ์ด๋ธ” ์ƒ์„ฑ๊ณผ ์กฐ์ž‘
      • 18์žฅ ๋ทฐ ์‚ฌ์šฉํ•˜๊ธฐ
      • 19์žฅ ์ €์žฅ ํ”„๋กœ์‹œ์ € ์‚ฌ์šฉํ•˜๊ธฐ
      • 20์žฅ ํŠธ๋žœ์žญ์…˜ ์ฒ˜๋ฆฌ ๊ด€๋ฆฌํ•˜๊ธฐ
      • 21์žฅ ์ปค์„œ ์‚ฌ์šฉํ•˜๊ธฐ
      • 22์žฅ ๊ณ ๊ธ‰ ๋ฐ์ดํ„ฐ ์กฐ์ž‘ ์˜ต์…˜
    • ๋ฉด์ ‘์„ ์œ„ํ•œ CS ์ „๊ณต์ง€์‹ ๋…ธํŠธ
      • 4 ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค
        • 4.1 ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์˜ ๊ธฐ๋ณธ
    • 2023 ์ด๊ธฐ์  SQL ๊ฐœ๋ฐœ์ž ์ด๋ก ์„œ + ๊ธฐ์ถœ๋ฌธ์ œ
      • ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง ์ดํ•ด
        • S1. ๋ฐ์ดํ„ฐ ๋ชจ๋ธ๋ง
  • ๐Ÿ’ปStudy
    • CS ์ง€์‹ ๋ฐœํ‘œ
      • 1ํšŒ์ฐจ
      • 2ํšŒ์ฐจ
      • 3ํšŒ์ฐจ
      • 4ํšŒ์ฐจ
      • 5ํšŒ์ฐจ
      • 6ํšŒ์ฐจ
      • 7ํšŒ์ฐจ
      • 8ํšŒ์ฐจ
      • 9ํšŒ์ฐจ
    • TypeScript Exercises
      • Ex 1
      • Ex 2
      • Ex 3
      • Ex 4
      • Ex 5
      • Ex 6
      • Ex 7
      • Ex 8
      • Ex 9
      • Ex 10
  • ๐Ÿ”„ETC
    • Article
      • Atomic Design Pattern
      • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž
    • DATABASE
      • Oracle
        • CEIL() & FLOOR() - ์†Œ์ˆ˜์  ์˜ฌ๋ฆผ & ๋‚ด๋ฆผ
        • DUAL ํ…Œ์ด๋ธ” - ์ž„์‹œ ํ…Œ์ด๋ธ”๋กœ ๊ฒฐ๊ณผ ํ™•์ธํ•˜๊ธฐ
    • Ubuntu
      • ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์—…๋ฐ์ดํŠธ
Powered by GitBook
On this page
  • ๋ฌธ์ œ
  • ํ’€์ด

Was this helpful?

  1. Study
  2. TypeScript Exercises

Ex 5

๋ฌธ์ œ

/*

Intro:

    Time to filter the data! In order to be flexible
    we filter users using a number of criteria and
    return only those matching all of the criteria.
    We don't need Admins yet, we only filter Users.

Exercise:

    Without duplicating type structures, modify
    filterUsers function definition so that we can
    pass only those criteria which are needed,
    and not the whole User information as it is
    required now according to typing.

Higher difficulty bonus exercise:

    Exclude "type" from filter criteria.

*/

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);

// In case you are stuck:
// https://www.typescriptlang.org/docs/handbook/utility-types.html
// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#predefined-conditional-types

ํ’€์ด

filterUsers ํ•จ์ˆ˜๋Š” ์ฃผ์–ด์ง„ ๋ฐฐ์—ด์—์„œ ์กฐ๊ฑด์„ ํ•„ํ„ฐ๋งํ•ด ์›ํ•˜๋Š” ์š”์†Œ๋งŒ ๋‚จ๊ธฐ๋Š” ํ•จ์ˆ˜๋‹ค.

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];
        });
    });
}

PreviousEx 4NextEx 6

Last updated 1 year ago

Was this helpful?

๐Ÿ’ป