반응형
// 클래스
// class Car{
// constructor(color){
// this.color = color;
// }
// start(){
// console.log("start");
// }
// }
// const bmw2 = new Car("red");
//자바스크립트에서의 클래스
class Car{
color:string;
//1. 멤버변수는 미리 선언해줘야한다.
constructor(color:string){
//2. 매개변수 타입 명시
this.color = color;
}
start(){
console.log("start");
}
}
const bmw2 = new Car("red");
//타입스크립트에서의 클래스. - 멤버변수 미리 선언하는 방식
class Car2{
constructor(public color:string){
// constructor(readonly color:string){
//접근제어자 || readonly 키워드 이용
this.color = color;
}
start(){
console.log("start");
}
}
const bmw3 = new Car("red");
//타입스크립트에서의 클래스. - 접근제어자 || readonly 키워드 이용하는 방식
//(1) 접근제한자 (Access modifier) - public, private, protected
//public : 자식 클래스나 클래스 인스턴스에서 접근가능 (기본값)
//private : 해당 클래스의 내부 상태를 외부에서 직접 변경할 수 없으며, 캡슐화의 원칙을 따르게 된다.
//protected : 자식 클래스에서는 참조가능하지만 클래스 인스턴스에서는 참조불가능
//:자바스크립트에서는 지원하지않는 기능
//(2) 정적멤버변수 static
class Car3{
readonly name: string = "car";
//private color:string;
#color:string;
protected price:number = 1000;
static wheels = 4;
//1. 멤버변수는 미리 선언해줘야한다.
constructor(color:string,name:string){
//2. 매개변수 타입 명시
//this.color = color;
this.#color = color;
//#을 썼으면 호출할때도 #사용해야함
this.name = name;
}
start(){
console.log("start");
console.log(this.name);
console.log(this.#color);
//#을 썼으면 호출할때도 #사용해야함
console.log(this.price);
console.log(Car3.wheels);
//클래스명으로 접근가능한 정적매개변수
}
}
//카 클래스를 상속받은 Bmw
class Bmw2 extends Car3{
constructor(color:string, name:string){
super(color,name);
//자식 클래스에서 부모클래스의 생성자 호출 -> private인데도 접근가능 캡슐화
}
showName(){
console.log(super.name);
//부모클래스의 변수가 public이므로 자식클래스에서 접근가능 -> private일 경우 해당 클래스 내부에서만 사용가능
}
showPrice(){
console.log(this.name);
//자식클래스에서도 참조가능한 protected
}
}
const z4 = new Bmw2("black", "1234");
z4.showName();
z4.showPrice();
//z4.price;
//인스턴스에서는 참조못하고, 자식클래스에서는 참조가능한 protected
//z4.name = "1234";
//readonly 라서 읽기만 가능 -> 생성자로는 가능
console.log(Car3.wheels);
//클래스명으로 접근가능한 정적매개변수
//추상화: 프로퍼티나 메서드의 이름만 선언하고 구체화하는 것은 상속받는 쪽에 맡김 -> 구현하는 방식에 따라 다양함
//추상클래스
abstract class Car4{
color: string;
constructor(color:string){
this.color=color;
}
start(){
console.log("start");
}
abstract doSomething() :void;
//추상메서드
}
//const car3 = new Car4("red");
//new로 객체 생성이 불가능한 추상클래스
class Bmw4 extends Car4{
constructor (color:string){
super(color);
}
doSomething(){
alert(3);
}
//추상메서드는 상속하는 클래스에서 반드시 구현해야함
}
const z5 = new Bmw4("black");
//상속을 통해서만 구현이 가능한 추상클래스
반응형
'JavaScript > TypeScript' 카테고리의 다른 글
타입스크립트 제네릭 (+상한 제한) (0) | 2024.02.05 |
---|---|
타입스크립트 리터럴, 유니온/교차타입 (0) | 2024.02.02 |
타입스크립트 함수 (0) | 2024.02.01 |
타입스크립트 DOM (0) | 2024.02.01 |
타입스크립트 인터페이스 (구현과 상속) (0) | 2024.02.01 |