클래스는 함수, 자료형을 모아두는 일종의 집합체 이다. 클래스를 통해서 복잡한 기능을 구분하고 정리가 가능하다.
클래스를 통해 기능을 분리하여 구현하는 것이 타입스크립트에서의 가장 중요한 핵심이라 생각 한다.
class Abcd{
private hide : string = 'can not access'; //접근제어자 private는 클래스 내부에서만 사용 가능 하다.
public show : string;
constructor(arg : string){ //생성자
this.show = arg;
}
print() : void{
console.log(`hide value : ${this.hide}, show value : ${this.show}`);
}
}
const cls = new Abcd('init');
console.log(cls.show);
//console.log(cls.hide); <-- 컴파일 오류
cls.print();
클래스에서는 private, public, protected 접근제어자를 통해 변수 및 함수에 대해서 접근을 관리 한다.
기본적으로 선언을 하지 않으면 public으로 설정이 되어 자유로이 해당 클래스 내부의 자료에 접근 할 수 있다.
class Abcd2{
static ABCDEF : string = 'Hello'; //static선언
private hide : string = 'can not access';
public show : string;
constructor(arg : string){
this.show = arg;
}
print() : void{
console.log(`hide value : ${this.hide}, show value : ${this.show}`);
}
combine(arg:number) : number{
return arg * 2;
}
anoy = (arg:number) :number =>{ //람다식
return arg * 2;
}
}
const cls2 = new Abcd2('init2');
console.log(cls2.show);
cls2.print();
console.log(cls2.combine(10));
console.log(cls2.anoy(100));
//console.log(cls2.ABCDEF); <--- 컴파일 오류
console.log('static value -> ',Abcd2.ABCDEF);
static으로 변수를 선언하면 "클래스.변수명" 으로 접근해야 된다. new로 생성된 객체에서 접근을 하는 경우 컴파일 오류가 나다.
앞서 살펴본 유니온, 람다, 익명함수 등 모든 기능을 쓸 수 있다.
마찬가지로 클래스는 인터페이스를 상속받아서도 사용 가능 하다.
interface Person {
head:string,
hand:string,
body:string,
method: ()=>void,
foot?:string //옵셔널
}
class Man implements Person{ //상속받은 자료를 모두 구현해야 한다. 옵셔널이 아니면..
head : string ='head'; //상속받은 자료는 private 접근제어자를 가질 수 없다.
hand : string ='hand';
body : string ='body';
method(): void {
console.log('Ok');
}
}
const tae = new Man();
console.log(tae.head);
console.log(tae.hand);
console.log(tae.body);
//console.log(tae.foot); <--- 컴파일오류
tae.method();
인터페이스를 상속받은 경우에는 해당 속성을 전부 구현해야 한다. 물론 옵셔널 형태로 선언된 변수 또는 함수는 구현하지 않아도 된다.
클래스에서 클래스를 상속받는 경우에는 implements가 아니라 extends를 사용한다.
class Abcd{
private hide : string = 'can not access';
public show : string = 'hello';
}
class Abcd2 extends Abcd{
static ABCDEF : string = 'Yoo';
constructor(arg? : string){
super(); //부모의 내용 주입.
if(arg != undefined && arg != null){
this.show = arg;
}
}
print() : void{
//console.log(`hide value : ${this.hide}`); <--- 컴파일오류
console.log(`${Abcd2.ABCDEF}, value : ${this.show}`);
}
}
var abc = new Abcd2();
abc.print(); //부모의 show 값을 볼 수 있다.
abc = new Abcd2('world');
abc.print(); //자식의 show 값이 오버로딩 됨을 볼 수 있다.
상속받은 클래스, 부모의 클래스의 private한 변수는 당연히 접근 할 수 없다. 또한 부모 및 자식의 변수, 함수명이 같으면 상속받아서 구현한 자식의 변수, 함수의 내용으로 오버라이딩된다.
* 오타 지적 감사드립니다!
반응형
'TypeScript' 카테고리의 다른 글
Typescript 네임스페이스 그리고 Import (2) | 2019.04.26 |
---|---|
Typescript 제네릭 그리고 any (0) | 2019.04.26 |
Typescript 인터페이스 (0) | 2019.04.26 |
Typescript 유니언(Union) (0) | 2019.04.26 |
Typescript 배열 (0) | 2019.04.26 |
* 위 에니메이션은 Html의 캔버스(canvas)기반으로 동작하는 기능 입니다. Html 캔버스 튜토리얼 도 한번 살펴보세요~ :)
* 직접 만든 Html 캔버스 애니메이션 도 한번 살펴보세요~ :)
댓글