타입스크립트 연습문제 1. 인터페이스 정의 및 사용

 

 

 

✅ 주어진 코드로 "User" 인터페이스를 정의하고 이에 맞게 사용하기

 

 - 해결할 코드

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

 

---

 

💫 어떻게 할까?

 

1. User 인터페이스 정의

 

우리는 User 객체가 다음과 같은 속성을 가진다는 것을 알고 있습니다.

• name: 문자열
• age: 숫자
• occupation: 문자열

따라서 이를 interface로 정의할 수 있습니다.

export interface User { 
	name: string; 
    age: number; 
    occupation: string; 
}

---

 

2. users 배열 타입 적용

이제 users 배열의 타입을 명확히 정의할 수 있습니다.

export const users: User[] = [ 
	{ 
    	name: 'Max Mustermann', 
        age: 25, 
        occupation: 'Chimney sweep' 
     },
     { 
     	name: 'Kate Müller', 
        age: 23, 
        occupation: 'Astronaut' 
      } 
];

 

이렇게 하면 TypeScript가 users 배열의 모든 요소가 User 타입을 만족하는지 확인해 줄 수 있습니다.

---

 

3. logPerson 함수의 타입 명시

현재 logPerson 함수는 user: unknown으로 선언되어 있어, user.name과 user.age에 접근할 때 TypeScript에서 오류가 발생할 가능성이 있습니다. 따라서 함수의 인자 타입을 User로 지정해야 합니다.

 

export function logPerson(user: User) { 
	console.log(` - ${user.name}, ${user.age}`); 
}

이제 logPerson 함수가 User 객체를 안전하게 처리할 수 있습니다.

---

 

4. 최종 코드

이제 전체 코드를 interface를 적용하여 수정해 보면 다음과 같습니다.

export interface User { 
	name: string; 
    age: number; 
    occupation: string; 
} 

export const users: User[] = [ 
	{ 
    	name: 'Max Mustermann', 
        age: 25, 
        occupation: 'Chimney sweep' 
    }, 
    { 
    	name: 'Kate Müller', 
        age: 23, 
        occupation: 'Astronaut' 
    } 
]; 

export function logPerson(user: User) { 
	console.log(` - ${user.name}, ${user.age}`);
}

console.log('Users:'); 
users.forEach(logPerson);