Wee15 타입스크립트,소나큐브, 교과목 평가

week15/3.practice/exercise/ex1.ts

@@ -0,0 +1,53 @@
+/* 원문(en)
+
+Intro:
+
+    We are starting a small community of users. For performance
+    reasons we have decided to store all users right in the code.
+    This way we can provide our developers with more
+    user-interaction opportunities. With user-related data, at least.
+    All the GDPR-related issues will be solved some other day.
+    This would be the base for our future experiments during
+    these exercises.
+
+Exercise:
+
+    Given the data, define the interface "User" and use it accordingly.
+
+*/
+
+
+/*
+    1번
+
+    주어진 데이터에서 'User'라는 이름의 interface를 정의,
+    작성한 인터페이스를 코드 내에서 적절하게 사용하기
+*/
+
+export type User = unknown;
+
+export const users: unknown[] = [
+    {
+        name: 'Max Mustermann',
+        age: 25,
+        occupation: 'Chimney sweep'
+    },
+    {
+        name: 'Kate Müller',
+        age: 23,
+        occupation: 'Astronaut'
+    }
+];
+
+export function logPerson(user: unknown) {
+    console.log(` - ${user.name}, ${user.age}`);
+}
+
+console.log('Users:');
+users.forEach(logPerson);
+
+
+/* In case if you are stuck:
+
+// https://www.typescriptlang.org/docs/handbook/2/objects.html
+*/

week15/3.practice/exercise/ex2.ts

@@ -0,0 +1,73 @@
+/* 원문(en)
+
+Intro:
+
+    All 2 users liked the idea of the community. We should go
+    forward and introduce some order. We are in Germany after all.
+    Let's add a couple of admins.
+
+    Initially we only had users in the in-memory database. After
+    introducing Admins, we need to fix the types so that
+    everything works well together.
+
+Exercise:
+
+    Type "Person" is missing, please define it and use
+    it in persons array and logPerson function in order to fix
+    all the TS errors.
+
+*/
+
+/*
+    2번
+
+    현재 코드에는 'Person'이라는 Type이 정의(작성)되어 있지 않음
+    따라서 해당 타입을 정의 후, person 배열(array)과 logPerson()에 적용하여
+    TS 에러를 해결하기
+*/
+
+interface User {
+    name: string;
+    age: number;
+    occupation: string;
+}
+
+interface Admin {
+    name: string;
+    age: number;
+    role: string;
+}
+
+export type Person = unknown;
+
+export const persons: User[] /* <- Person[] */ = [
+    {
+        name: 'Max Mustermann',
+        age: 25,
+        occupation: 'Chimney sweep'
+    },
+    {
+        name: 'Jane Doe',
+        age: 32,
+        role: 'Administrator'
+    },
+    {
+        name: 'Kate Müller',
+        age: 23,
+        occupation: 'Astronaut'
+    },
+    {
+        name: 'Bruce Willis',
+        age: 64,
+        role: 'World saver'
+    }
+];
+
+export function logPerson(user: User) {
+    console.log(` - ${user.name}, ${user.age}`);
+}
+
+persons.forEach(logPerson);
+
+// In case if you are stuck:
+// https://www.typescriptlang.org/docs/handbook/2/types-from-types.html

week15/3.practice/exercise/ex3.ts

@@ -0,0 +1,81 @@
+/* 원문(en)
+
+Intro:
+
+    Since we already have some of the additional
+    information about our users, it's a good idea
+    to output it in a nice way.
+
+Exercise:
+
+    Fix type errors in logPerson function.
+
+    logPerson function should accept both User and Admin
+    and should output relevant information according to
+    the input: occupation for User and role for Admin.
+
+*/
+
+/*
+    3번
+
+    logPerson()의 타입 에러 해결하기
+    logPerson()은 User와 Admin 인터페이스를 
+    모두 인수로 전달받을 수 있어야하고,
+
+    전달받은 인수의 값(input value)에 따라 적절한 값(output value)을 반환해야함
+    ex) User 타입일 경우, occupation 프로퍼티
+    Admin 타입일 경우, role 프로퍼티
+*/
+
+interface User {
+    name: string;
+    age: number;
+    occupation: string;
+}
+
+interface Admin {
+    name: string;
+    age: number;
+    role: string;
+}
+
+export type Person = User | Admin;
+
+export const persons: Person[] = [
+    {
+        name: 'Max Mustermann',
+        age: 25,
+        occupation: 'Chimney sweep'
+    },
+    {
+        name: 'Jane Doe',
+        age: 32,
+        role: 'Administrator'
+    },
+    {
+        name: 'Kate Müller',
+        age: 23,
+        occupation: 'Astronaut'
+    },
+    {
+        name: 'Bruce Willis',
+        age: 64,
+        role: 'World saver'
+    }
+];
+
+export function logPerson(person: Person) {
+    let additionalInformation: string;
+    if (person.role) {
+        additionalInformation = person.role;
+    } else {
+        additionalInformation = person.occupation;
+    }
+    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
+}
+
+persons.forEach(logPerson);
+
+// In case if you are stuck:
+// https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing

week15/3.practice/exercise/ex4.ts

@@ -0,0 +1,76 @@
+/* 원문(en)
+
+Intro:
+
+    As we introduced "type" to both User and Admin
+    it's now easier to distinguish between them.
+    Once object type checking logic was extracted
+    into separate functions isUser and isAdmin -
+    logPerson function got new type errors.
+
+Exercise:
+
+    Figure out how to help TypeScript understand types in
+    this situation and apply necessary fixes.
+
+*/
+
+/*
+    4번
+
+    문제의 코드에서 TypeScript가 
+    타입을 이해할 수 있도록 코드를 수정해보기
+*/
+
+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' }
+];
+
+export function isAdmin(person: Person) {
+    return person.type === 'admin';
+}
+
+export function isUser(person: Person) {
+    return person.type === 'user';
+}
+
+export function logPerson(person: Person) {
+    let additionalInformation: string = '';
+    if (isAdmin(person)) {
+        additionalInformation = person.role;
+    }
+    if (isUser(person)) {
+        additionalInformation = person.occupation;
+    }
+    console.log(` - ${person.name}, ${person.age}, ${additionalInformation}`);
+}
+
+console.log('Admins:');
+persons.filter(isAdmin).forEach(logPerson);
+
+console.log();
+
+console.log('Users:');
+persons.filter(isUser).forEach(logPerson);
+
+// In case if you are stuck:
+// https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates