5번 함수와 클래스 퀴즈

Q1. 다음 중 적절하게 쓰이지 않은 것을 고르세요.


// [1]
function shoes(name: string) {
  return "I'll buy " + name;
}
console.log(shoes(1234));

// [2]
function whatToEat(name: string): string {
  return "I'll eat " + name;
}
console.log(whatToEat("beef"));

// [3]
let whatToEat2 = function (name: string) {
  return "I'll eat " + name;
};
console.log(whatToEat2("fish cake"));

// [4]
let whatToEat3 = function (name: string): string {
  return "I'll eat " + name;
};

console.log(whatToEat3("ice cream"));

// [5]
let whatToBuy1 = (name: string) => {
  return "I'll buy " + name;
};

console.log(whatToBuy1("sweat shirt"));

// [6]
let whatToBuy2 = (name: string): string => {
  return "I'll buy " + name;
};

console.log(whatToBuy2("windbreaker"));

💡

정답 : [1] function shoes(name: string) { return "I'll buy " + name; } console.log(shoes("jordan")); 꼴로 고쳐줘야 한다. 해당 함수의 리턴 타입은 명시되어 있지 않고 타입을 추론을 하였다. 전체 흐름을 보았을 때, 전체가 string 형태로 반환 될 것임을 추론할 수 있는데, number 타입을 가지는 숫자 값을 넣는 것은 적절하지 않다.

Q2. 다음 중 잘못된 부분을 고르세요.


class Dog {
// [1]
  name;
  age;
  gender;
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

// [2]
let dog10 = new Dog("멍멍이", 10, "남");
console.log(dog10);

// [3]
let dog17: Dog = new Dog("왈왈이", 17, "여");
console.log(dog17);

💡

정답 : 없음 [2] dog10의 타입이 명시되어 있지 않으므로, 오류가 발생하는 것이라 생각할 수 있지만, 타입스크립트에서는 자동으로 타입을 지정해주므로 타입을 명시해줄 필요가 없다. 다만 분명하게 알아보기 위해 [3] 처럼 타입을 명시해주는 것을 권장할 뿐이다.

Q3. 다음 함수를 실행할 때, 에러가 발생하는 이유로 옳은 것은 무엇일까요?


function sum(num: number | string): void {
	console.log(num + 5);
}

sum(1);

// 보기
[1] 함수가 리턴할 시에 에러를 뿜는 void을 지정했는데 console.log()가 실행 되었기 때문에
[2] 함수가 실행될 때 number 타입과 string 타입을 계산했기 때문에
[3] 함수의 파라미터를 number 타입 또는 string 이라는 유니온 타입으로 지정했기 때문에

💡

정답 : [3] 함수의 파라미터를 number | string 이라는 유니온 타입으로 지정했기 때문에 1. 함수가 리턴할 시에 에러를 뿜는 void을 지정했는데 console.log()가 실행 되었기 때문에(X) → console.log()는 콘솔창에 출력하는 용도로, 타입스크립트 함수의 void 와는 연관이 없다. 함수에 void 지정 시에 return을 만나면 에러를 뿜는다. 2. 함수가 실행될 때 number 타입과 string 타입을 계산했기 때문에(X) → 타입스크립트에서는 string + number 또는 number + number의 연산이 가능하다. 3. 함수의 파라미터를 number | string 이라는 유니온 타입으로 지정했기 때문에(O) → 2번 보기와 같은 이유로 숫자 타입과 문자열 타입은 연산이 가능하지만, number | string은 유니온 타입으로 내가 새롭게 만든 타입이기 때문에 연산이 불가하다.

Q4. 아래의 코드에서 오류의 원인이 되는 부분을 바르게 고쳐보세요.


abstract class Fruit {
  constructor(name: string, price: number) {
    this.name = name; 
    this.price = price;
  }
}

class Orange extends Fruit{
  constructor(name:string, price:number){
    super(name, price)
  }
  public color() : void{
    console.log("주황")
  }
}
let orange = new Orange("얼마나오랜지", 2000);
orange.color();

💡

정답 : 생성자의 프로퍼티에 접근제한자가 없을 경우, 지역변수로만 사용이 가능하여 오류를 발생한다. (public, private, protected)

+(추가설명)

TypeScript에서 생성자 매개변수에 접근 제한자를 지정하면 해당 매개변수를 클래스 프로퍼티로 자동으로 선언하고 초기화하는 것을 의미합니다. 이는 반복적인 코드를 줄이고, 간결성과 가독성을 향상시키는 효과가 있습니다.

접근 제한자(public, protected, private)를 지정하지 않은 생성자 매개변수는 단순히 생성자 내부에서만 사용할 수 있는 로컬 변수로 취급됩니다. 따라서 추상 클래스 또는 일반 클래스의 생성자 매개변수에 접근 제한자를 넣는 것은 그 프로퍼티가 클래스의 다른 메서드나 서브 클래스에서 접근 가능하도록 할 것인지에 대한 결정입니다.

아래 코드는 name과 price를 생성자 매개변수로 받지만, 접근 제한자를 지정하지 않았습니다. 이들은 클래스의 다른 메서드에서 접근할 수 없고, 서브 클래스에서도 접근할 수 없습니다.

따라서 생성자 매개변수에 접근 제한자를 꼭 넣어주어야 하는 것은 아니지만, 그 변수를 클래스의 다른 부분에서 사용하려면 접근 제한자를 사용해야 합니다.

[옳게 작성된 코드] abstract class Fruit { constructor(public name: string, public price: number) { this.name = name; this.price = price; } }