반응형
class
class Cart {
constructor(user){
this.user = user;
this.store {};
}
put(id, project){
this.store[id] = product;
}
get(id){
return this.store[id];
}
}
//instance
const cartJohn = new Cart({name:"john"});
const cartJohn = new Cart({name:"jay"});
//typescript------------------------------
interface User{
name:String;
}
interface Product{
id:String;
price:number;
}
class Cart {
protected user:User; // protected = 외부에서 접근 불가, 클래스 상속시에는 접근가능
private store:object; //private = 외부에서 접근 불가store라는 속성은 해당 클래스 내부에서만 접근가능
constructor(user: User){
this.user = user;
this.store {};
}
put(id:string, product:Product){
this.store[id] = product;
}
get(id:string){
return this.store[id];
}
}
//cart 상속
class PromotionCart extends Cart{
addPromotion(){
this.user //protected(상속시 접근 가능) 로 받아온 속성
}
}
//instance
const cartJohn = new Cart({name:"john"});
//ex) cartJohn.stroe -> 접근불가 : private
const cartJohn = new Cart({name:"jay"});
const cart2 = new PromotionCart({name:"john"});
////ex) cart2.put() -> 접근가능
1. 접근 제한자
- protected : 해당 클래스 내부에서만 접근이 가능한 속성 or 메서드 (기본 pubilc), 상속시에는 접근 가능
- private : 해당 클래스 내부에서만 접근이 가능한 속성 or 메서드 (기본 pubilc)
=> 공통 : 클래스 밖 인스턴스에서 접근이 불가하다.
=> 차이 : 클래스 상속시 protected는 접근가능, private은 접근 불가
2. 속성과 할당을 동시에 하기 + 접근 제한자
- 생성자 정의시, 매개변수에 접근 제한자를 같이 쓰면 속성을 정의하고 할당하는 코드를 한번에 처리가 가능하다.
↓
interface User{
name:String;
}
interface Product{
id:String;
price:number;
}
class Cart {
//protected user:User; 속성과 할당을 동시에 매개변수에서
// private store:object; 속성과 할당을 동시에 매개변수에서
constructor(protected user: User, private store:object = {}){ //접근제한자 꼭 명시
//this.user = user; 속성과 할당을 동시에 매개변수에서
//this.store {}; 속성과 할당을 동시에 매개변수에서
}
put(id:string, product:Product){
this.store[id] = product;
}
get(id:string){
return this.store[id];
}
}
- 위 코드 처럼 cart의 매개변수에 접근 제한자, 속성, 할당을 동시에 할 수 있다.
- 접근 제한자가 pubilc인 경우, (보통 default가 public라서 생략이 가능하지만) 매개변수에 동시에 작성시에는 pubilc을 명시해줘야한다.
3. 상속과 인터페이스의 관계
//1. implements - 클래스에서 인터페이스를 구현하는 방법
interface Person {
name: string;
say(message: string): void;
}
interface Programmer {
writeCode(requriment:stirng): string
}
class KoreanProgrammer implements Person, Programmer { //다중인터페이스
constructor(pubilc name: string){
}
say(message: string): void{
console.log(message);
}
writeCode(requriment: string): string{
console.log(requriment);
return requriment+"..."
}
loveKimchi(){
console.log("love")
}
}
const jay = new KoreanProgrammer("jay")
---------------------------------------------------------
//2. abstract : 완성이 되지않은 클래스, 추상 클래스 - 인스턴스를 만들수 없는 클래스
abstract class Korean implements Person{
pubilc abstract jumin:number; //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
constructor(pubilc name: string){
}
say(msg: string): void{
console.log(msg);
}
abstract loveKimchi(): void; //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
}
// ↓ 추상클래스 상속
class KoreanProgrammer2 extends Korean implements Programmer{
constructor(pubilc name: string, pubilc jumin:number){ //jumin 구현
super(name) // 상속
}
say(message: string): void{
console.log(message);
}
writeCode(requriment: string): string{
console.log(requriment);
return requriment+"..."
}
loveKimchi(){
console.log("love") //상속시, abstract 정의된 메서드를 꼭 구현해야한다.
}
}
const jay = new KoreanProgrammer2("jay", 123462)
//const jay = new Korean("jay", 123462) 추상클래스의 인스턴스는 만들 수 없다.
implements
- 클래스에서 인터페이스를 구현하는 방법
abstract 추상 클래스
- 인스턴스를 만들 수 없는 클래스
- 완성 되지 않은 클래스
- abstract로 정의된 메서드를 꼭 구현해야함.
- 상속을 받아서 하위 클래스에서 추상클래스를 구현해야한다. (이 하위클래스를 인스턴스화 하면 됨)
'TypeScript' 카테고리의 다른 글
React + Typescript (0) | 2021.01.28 |
---|---|
[TypeScript 강의노트] - 고급타입 (0) | 2021.01.22 |
[TypeScript 강의노트] - generic (0) | 2021.01.21 |
[TypeScript 강의노트] (0) | 2021.01.21 |