TS: 한입크기로 잘라먹는 타입스크립트 챌린지_day9

🍮 진도

 

6. 클래스 (4/4)

• 자바스크립트의 클래스 소개
• 타입스크립트의 클래스
• 접근제어자
• 인터페이스와 클래스

 🥛  요약

 

자바스크립트의 클래스

/**
 * 클래스 class
 */

let studentA = {
    name: "Julie",
    grade: "A+",
    age: 24,
    study() {
        console.log("열심히 공부함");
    },
    introduce() {
        console.log("안녕하세요");
    },
};

class Student {
// field
    name;
    grade;
    age;
// constructor
    constructor(name, grade, age) {
        this.name = name;
        this.grade = grade;
        this.age = age;
    }
// method
    study() {
        console.log("열심히 공부함");
    }

    introduce() {
        console.log("안녕하세요");
    }
}

class StudentDeveloper extends Student {
// field
    favoriteSkill;

// constructor
    constructor(name, grade, age, favoriteSkill) {
        super(name, grade, age);
        // Student의 field가 그대로 가져오게 되는데 여기서는 밑의 favoriteSkill만 생성자 함수 안에 존재하기 때문에 여기서 super()로 인수를 전달해야 인스턴스가 생성됨 
        this.favoriteSkill = favoriteSkill;
    }
// method

    programming() {
        console.log(`${this.favoriteSkill}로 개발함`);
    }
}
let studentDeveloper = new StudentDeveloper(
    "테스트네임",
    "테스트그레이드",
    "테스트에이지",
    "테스트스킬"
);
console.log(studentDeveloper);
studentDeveloper.programming();
// 클래스를 이용해서 만든 객체 => 인스턴스
// 이거는 student라는 클래스를 이용해서 만든 인스턴스라서 student instance 라고 부르면 된다
let studentB = new Student("Bell", "B+", 26);
console.log(studentB);

 

타입스크립트의 클래스

/**
 * 타입스크립트의 클래스
 */

const employee = {
    name: "Julie",
    age: 24,
    position: "developer",
    work() {
        console.log("dobby");
    },
};

// class
class Employee {
// field
    name: string;
    age: number;
    position: string;

// constructor
    constructor(name: string, age: number, position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }
// method
    work() {
        console.log("do hard work");
    }
}
const employeeB = new Employee("Hanul", 24, "developer");
console.log(employeeB);

const employeeC: Employee = {
    name: "",
    age: 0,
    position: "",
    work() {},
};

// 더 세분화된 클래스
class ExecutiveOfficer extends Employee {
// field
    officeNumber: number;
// constructor
    constructor(
        name: string,
        age: number,
        position: string,
        officeNumber: number
    ) {
        super(name, age, position);
        this.officeNumber = officeNumber;
    }
}

 

접근제어자

/**
 * 접근제어자
 */

// class
class Employee {
// field
//    private name: string;
//    protected age: number;
//    public position: string;

// constructor
    // 매개변수 앞에 달아주는 것도 가능한데 생성자에 접근자를 달면 필드도 자동으로 생성해주고(생략필수), 필드값 초기화도 자동으로 해주기 때문에 생략(생략선택)해야함
    constructor(private name: string, protected age: number,public position: string) {
        this.name = name;
        this.age = age;
        this.position = position;
    }
// method
    work() {
        console.log("do hard work");
    }
}
class ExecutiveOfficer extends Employee {
// field
    officeNumber: number;
// constructor
    constructor(
        name: string,
        age: number,
        position: string,
        officeNumber: number
    ) {
        super(name, age, position);
        this.officeNumber = officeNumber;
    }
// method
    func() {
        // this.name;
        // 파생 클래스에서도 상위클래스에서 private으로 설정한 field의 값에 접근할 수 없다. Employee 클래스 내애서만 접근 가능
        this.age; // 외부에선 불가하지만 파생클래스에는 접근 가능하려면 protected로
    }
}

const employee =  new Employee('왕지은', 24, 'developer');
// employee.name='가나다'; // private 속성이면 해당 클래스 내에서만 접근가능
// employee.age=29; // protected 속성이면 외부에서 접근불가하지만 파생클래스에서까지는 접근이 가능
employee.position='designer'; // public

console.log(employee);

인터페이스와 클래스

/**
 * 인터페이스와 클래스
 */

interface CharacterInterface {
    name: string;
    moveSpeed: number;
    move(): void;
}

class Character implements CharacterInterface {
    // name: string;
    // moveSpeed: number;
    // 인터페이스로 정의하는 필드는 무조건 public
    // protected나 private을 정의하려면 밑의 constructor에 따로 정의해야함

    constructor(
        public name: string,
        public moveSpeed: number,
        private extra: string
    ) // 이것처럼 constructor에 정의

    {
        // this.name = name;
        // this.moveSpeed = moveSpeed;
    }
    move(): void {
        console.log(`${this.moveSpeed} 속도로 이동!`);
    }
}

 

 

🍵 과제

 

Q. 구현 시그니처를 완성하세요.

class Pokemon {
  constructor(
  		public name: string, 
        public skill: string, 
        readonly type: string
  ) {}
  getName() {
    return this.name;
  }
  setSkill(skill :string): void {
    this.skill = skill;
  }
}