인덱스시그니처타입별칭인터페이스
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
1. 연습문제A
1. Person 타입 작성
문제: 사람을 나타내는 Person 타입을 정의하세요. 이 타입은 name (문자열), age (숫자) 속성을 가집니다. 그리고 이를 사용하는 getPersonInfo 함수를 작성하여 Person 객체를 출력하세요.
//code
2. 객체 생성
문제: Config 타입을 정의하여 host (문자열), port (숫자), ssl (불린값)을 갖는 객체 타입입니다. createConfig 함수는 Config 타입을 반환하도록 하세요.
//code
const config = createConfig('localhost', 8080, true);
console.log(config); // { host: 'localhost', port: 8080, ssl: true }
3. Rectangle 타입 작성
문제: Rectangle 타입을 정의하여 width (숫자)와 height (숫자) 속성을 가지게 하세요. calculateArea 함수를 작성하여 Rectangle 객체의 면적을 계산하세요.
//code
4. Student 타입 작성
문제: Student 타입을 정의하여 name (문자열), age (숫자), grades (숫자 배열) 속성을 포함하게 하세요. calculateAverageGrade 함수를 작성하여 평균 성적을 계산하세요.
//code
5. Response 타입 작성
문제: Response 타입을 작성하여 status (문자열), data (문자열), message (문자열) 속성을 포함하게 하세요. createResponse 함수를 작성하여 이 타입의 객체를 반환하세요.
// code
console.log(createResponse('success', 'John', 'fetch success')); // { status: 'success', data: 'John', message: 'fetch success'
6. Employee 타입 작성
문제: Employee 타입을 작성하여 id (문자열), name (문자열), position (문자열) 속성을 가집니다. getEmployeeInfo 함수에서 이 정보를 반환하도록 하세요.
//code
console.log(getEmployeeInfo({id:'1', name:'james', position:'developer'})); // "james works as a developer with ID: 1."
7. Circle 타입 작성
문제: Circle 타입을 작성하여 radius (숫자) 속성을 가지게 하세요. calculateCircumference 함수에서 원의 둘레를 계산하는 기능을 작성하세요.
//code
console.log(calculateCircumference({radius:3})); // 18.84955592153876
8. Product 타입 작성
문제: Product 타입을 작성하여 name (문자열), price (숫자), inStock (불린값) 속성을 가지게 하세요. getDiscountedPrice 함수에서 주어진 할인을 적용한 가격을 계산하세요.
//code
console.log(getDiscountedPrice({name: 'bag', price: 1000, inStock: true}, 10)); // 900
9. Book 타입 작성
문제: Book 타입을 작성하여 title (문자열), author (문자열), publishedYear (숫자) 속성을 포함하도록 하세요. getBookSummary 함수에서 책에 대한 간단한 요약을 반환하도록 하세요.
//code..
console.log(getBookSummary({title: 'river', author:'james', publishedYear: 2020)); // "river by james, published in 2020."
10. Transaction 타입 작성
문제: Transaction 타입을 작성하여 id (문자열), amount (숫자), timestamp (문자열) 속성을 가지게 하세요. isValidTransaction 함수에서 amount가 0보다 큰지 비교해서 결과를 반환하는 로직을 작성해주세요.(참/거짓 반환)
//code
2. 연습문제B
1. Action** 타입을 이용한 이벤트 핸들러 정의**
문제: Action 타입을 정의하여 type (문자열), payload (문자열, 숫자, 객체 등 다양한 값이 될 수 있음) 속성을 가질 수 있도록 하세요. 그리고 createAction 함수는 Action 객체를 반환하도록 하세요.
type Action = {
// code
};
// code
function createAction(){}
// 함수 호출 예시
const action1 = createAction('ADD_ITEM', { id: 1, name: 'item' });
const action2 = createAction('UPDATE_ITEM', 42);
const action3 = createAction('SET_STATUS', 'success');
console.log(action1); // { type: 'ADD_ITEM', payload: { id: 1, name: 'item' } }
console.log(action2); // { type: 'UPDATE_ITEM', payload: 42 }
console.log(action3); // { type: 'SET_STATUS', payload: 'success' }
2. NumberOrString** 타입을 사용한 객체 타입 생성**
문제: NumberOrString 타입을 정의하여 숫자 또는 문자열만 허용하는 타입을 만들고, 이를 사용하는 createObject 함수를 작성하세요. 이 함수는 id (숫자 또는 문자열)와 name (문자열)을 가지는 객체를 반환해야 합니다.
//code
const object1 = createObject(1, 'Alice');
const object2 = createObject('123', 'Bob');
console.log(object1); // { id: 1, name: 'Alice' }
console.log(object2); // { id: '123', name: 'Bob' }
3. Point 타입 작성
문제: Point 타입을 작성하여 x와 y 값을 각각 나타내는 속성을 가지게 하세요. 이 타입을 사용해 두 점의 거리(distance)를 계산하는 calculateDistance 함수를 작성하세요.
(유클리드 거리 계산을 사용합니다.)
4. 유니언 타입을 사용한 상태 관리 시스템
문제: Loading, Success, Error 상태를 나타내는 FetchRsult유니언 타입을 정의하고, fetchData 함수가 반환하는 타입을 작성하세요. fetchData 함수는 loading, success, error 중 하나의 상태를 반환합니다.
status: 'loading'일 때는 별다른 데이터 없이 상태만 반환합니다.status: 'success'일 때는data(string) 속성에 데이터를 포함해야 하며,status: 'error'일 때는message(string) 속성에 에러 메시지를 포함해야 합니다.
//code
const result1 = fetchData();
const result2 = fetchData();
const result3 = fetchData();
console.log(result1); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }
console.log(result2); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }
console.log(result3); // { status: 'loading' } 또는 { status: 'success', data: 'Data loaded successfully!' } 또는 { status: 'error', message: 'Failed to load data.' }
5. 조건부 타입을 사용한 NullOrUndefined 타입 처리
문제: NullOrUndefined 타입을 정의하고, getValue 함수에서 이 타입을 활용하여 값이 null 또는 undefined인지 여부를 체크하는 로직을 작성하세요.
//code
const check1 = getValue(null);
const check2 = getValue(undefined);
const check3 = getValue('Hello');
console.log(check1); // true
console.log(check2); // true
console.log(check3); // false
6. **Tuple**을 이용한 setCoordinates 함수 작성
문제: setCoordinates 함수는 두 개의 숫자값(x, y)을 가지는 튜플을 입력받고, 이를 반환하는 타입을 정의하세요.
//code
const coordinates = setCoordinates(10, 20);
console.log(coordinates); // [10, 20]
7. 객체 정의
문제: Person 객체는 name과 age 속성을 갖는 객체입니다. createPerson 함수는 Person 객체를 반환하는데, 이 객체는 불변이어야 합니다. 즉, Person 객체의 속성을 한 번 설정한 후에는 변경할 수 없어야 합니다.
//code
const person = createPerson('John', 30);
// person 객체의 속성은 변경할 수 없도록 해야 합니다.
person.name = 'Jane'; // 오류 발생: 읽기 전용 속성이므로 수정할 수 없음
console.log(person); // { name: 'John', age: 30 }
8. 유니언 타입을 사용하여 선택적 속성 처리
문제: User 타입을 정의하여 id, name, email을 속성으로 가지게 하세요. 그런 후, updateUser 함수를 작성하여 선택적 속성만 업데이트하도록 하세요. updateUser는 일부 속성만 업데이트할 수 있도록 해야 합니다.
//code
const user1 = { id: '1', name: 'Alice', email: 'alice@example.com' };
const updatedUser1 = updateUser(user1, { name: 'Alicia' });
console.log(updatedUser1); // { id: '1', name: 'Alicia', email: 'alice@example.com' }
9. 유니언 타입
문제: Role 타입을 정의하여 ‘admin'과 ‘user’를 유니언 타입으로 처리하고, assignRole 함수가 역할을 동적으로 할당하도록 하세요. 이때 assignRole 함수의 반환 값은 UserWithRole 타입이 될 수 있게 타입을 지정해줍니다.
//code
const user1 = { id: '1', name: 'Alice', role: 'user' };
const updatedUser = assignRole(user1, 'admin');
console.log(updatedUser); // { id: '1', name: 'Alice', role: 'admin' }
10. 유니언 타입을 사용하여 값 필터링
문제: string과 number 타입을 구분하기 위한 Primitive 타입을 정의하고, string만 반환하는 함수를 작성하세요. 반환 값이 string만 포함되도록 타입을 작성하세요.
//code
const stringValue = filterString('Hello');
console.log(stringValue); // 'Hello'
const numberValue = filterString(123); // Error: Not a string