TypeScript-클래스

TypeScript는 객체 지향 JavaScript입니다. TypeScript는 클래스, 인터페이스 등과 같은 객체 지향 프로그래밍 기능을 지원합니다. OOP 측면에서 클래스는 객체 생성을위한 청사진입니다. 클래스는 객체에 대한 데이터를 캡슐화합니다. Typescript는 클래스라는이 개념을 기본적으로 지원합니다. JavaScript ES5 이전 버전은 클래스를 지원하지 않았습니다. Typescript는 ES6에서이 기능을 가져옵니다.

수업 만들기

TypeScript에서 클래스를 선언하려면 class 키워드를 사용하십시오. 동일한 구문은 다음과 같습니다.

통사론

class class_name { 
   //class scope 
}

class 키워드 뒤에는 클래스 이름이옵니다. 클래스 이름을 지정할 때 식별자에 대한 규칙을 고려해야합니다.

클래스 정의에는 다음이 포함될 수 있습니다.

  • Fields− 필드는 클래스에서 선언 된 모든 변수입니다. 필드는 객체와 관련된 데이터를 나타냅니다.

  • Constructors − 클래스의 객체에 대한 메모리 할당을 담당합니다.

  • Functions− 함수는 개체가 취할 수있는 작업을 나타냅니다. 때때로 메서드라고도합니다.

이러한 구성 요소를 합쳐서 클래스의 데이터 멤버라고합니다.

Typescript에서 Person 클래스를 고려하십시오.

class Person {
}

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

예 : 클래스 선언

class Car { 
   //field 
   engine:string; 
 
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  

   //function 
   disp():void { 
      console.log("Engine is  :   "+this.engine) 
   } 
}

이 예제는 Car 클래스를 선언합니다. 클래스에는 engine이라는 필드가 있습니다. 그만큼var필드를 선언하는 동안 키워드는 사용되지 않습니다. 위의 예제는 클래스의 생성자를 선언합니다.

생성자는 클래스의 변수 초기화를 담당하는 클래스의 특수 함수입니다. TypeScript는 constructor 키워드를 사용하여 생성자를 정의합니다. 생성자는 함수이므로 매개 변수화 할 수 있습니다.

그만큼 this키워드는 클래스의 현재 인스턴스를 나타냅니다. 여기서 매개 변수 이름과 클래스 필드 이름은 동일합니다. 따라서 모호함을 피하기 위해 클래스의 필드 앞에this 예어.

disp () 는 간단한 함수 정의입니다. 여기서는 function 키워드가 사용되지 않습니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Engine is  :   " + this.engine);
   };
   return Car;
}());

인스턴스 개체 만들기

클래스의 인스턴스를 만들려면 new키워드 다음에 클래스 이름이옵니다. 동일한 구문은 다음과 같습니다.

통사론

var object_name = new class_name([ arguments ])

  • 그만큼 new 키워드는 인스턴스화를 담당합니다.

  • 표현식의 오른쪽은 생성자를 호출합니다. 생성자는 매개 변수화 된 경우 값을 전달해야합니다.

예 : 클래스 인스턴스화

var obj = new Car("Engine 1")

속성 및 함수 액세스

클래스의 속성과 함수는 객체를 통해 액세스 할 수 있습니다. 사용 ' . '점 표기법 (마침표라고 함)을 사용하여 클래스의 데이터 멤버에 액세스합니다.

//accessing an attribute 
obj.field_name 

//accessing a function 
obj.function_name()

예 : 합치기

class Car { 
   //field 
   engine:string; 
   
   //constructor 
   constructor(engine:string) { 
      this.engine = engine 
   }  
   
   //function 
   disp():void { 
      console.log("Function displays Engine is  :   "+this.engine) 
   } 
} 

//create an object 
var obj = new Car("XXSY1")

//access the field 
console.log("Reading attribute value Engine as :  "+obj.engine)  

//access the function
obj.disp()

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var Car = (function () {
   //constructor
   function Car(engine) {
      this.engine = engine;
   }
	
   //function
   Car.prototype.disp = function () {
      console.log("Function displays Engine is  :   " + this.engine);
   };
   return Car;
}());

//create an object
var obj = new Car("XXSY1");

//access the field
console.log("Reading attribute value Engine as :  " + obj.engine);

//access the function
obj.disp();

위 코드의 출력은 다음과 같습니다.

Reading attribute value Engine as :  XXSY1 
Function displays Engine is  :   XXSY1

클래스 상속

TypeScript는 상속 개념을 지원합니다. 상속은 프로그램이 기존 클래스에서 새 클래스를 만드는 기능입니다. 새로운 클래스를 만들기 위해 확장 된 클래스를 부모 클래스 / 수퍼 클래스라고합니다. 새로 생성 된 클래스를 하위 / 하위 클래스라고합니다.

클래스는 'extends'키워드를 사용하여 다른 클래스에서 상속됩니다. 자식 클래스는 부모 클래스의 개인 멤버와 생성자를 제외한 모든 속성과 메서드를 상속합니다.

통사론

class child_class_name extends parent_class_name

그러나 TypeScript는 다중 상속을 지원하지 않습니다.

예 : 클래스 상속

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 

class Circle extends Shape { 
   disp():void { 
      console.log("Area of the circle:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Shape = (function () {
   function Shape(a) {
      this.Area = a;
   }
   return Shape;
}());

var Circle = (function (_super) {
   __extends(Circle, _super);
   function Circle() {
      _super.apply(this, arguments);
   }
	
   Circle.prototype.disp = function () { 
      console.log("Area of the circle:  " + this.Area); 
   };
   return Circle;
}(Shape));

var obj = new Circle(223);
obj.disp();

위 코드의 출력은 다음과 같습니다.

Area of the Circle: 223

위의 예제는 Shape 클래스를 선언합니다. 이 클래스는 Circle 클래스에 의해 확장됩니다. 클래스간에 상속 관계가 있기 때문에 자식 클래스, 즉 Car 클래스는 부모 클래스 속성 즉 영역에 대한 암시 적 액세스를 얻습니다.

상속은 다음과 같이 분류 할 수 있습니다.

  • Single − 모든 클래스는 최대 하나의 부모 클래스에서 확장 할 수 있습니다.

  • Multiple− 한 클래스는 여러 클래스에서 상속 할 수 있습니다. TypeScript는 다중 상속을 지원하지 않습니다.

  • Multi-level − 다음 예는 다중 수준 상속이 작동하는 방식을 보여줍니다.

예

class Root { 
   str:string; 
} 

class Child extends Root {} 
class Leaf extends Child {} //indirectly inherits from Root by virtue of inheritance  

var obj = new Leaf(); 
obj.str ="hello" 
console.log(obj.str)

Leaf 클래스는 다중 레벨 상속을 통해 Root 및 Child 클래스에서 속성을 파생합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var Root = (function () {
   function Root() {
   }
   return Root;
}());

var Child = (function (_super) {
   __extends(Child, _super);
   function Child() {
      _super.apply(this, arguments);
   }
   return Child;
}(Root));

var Leaf = (function (_super) {
   __extends(Leaf, _super);
   function Leaf() {
      _super.apply(this, arguments);
   }
   return Leaf;
}(Child));

var obj = new Leaf();
obj.str = "hello";
console.log(obj.str);

출력은 다음과 같습니다.

산출

hello

TypeScript ─ 클래스 상속 및 메서드 재정의

메서드 재정의는 자식 클래스가 수퍼 클래스의 메서드를 재정의하는 메커니즘입니다. 다음 예제는 같은 것을 설명합니다-

class PrinterClass { 
   doPrint():void {
      console.log("doPrint() from Parent called…") 
   } 
} 

class StringPrinter extends PrinterClass { 
   doPrint():void { 
      super.doPrint() 
      console.log("doPrint() is printing a string…")
   } 
} 

var obj = new StringPrinter() 
obj.doPrint()

super 키워드는 클래스의 직계 부모를 참조하는 데 사용됩니다. 키워드는 변수, 속성 또는 메서드의 수퍼 클래스 버전을 참조하는 데 사용할 수 있습니다. 13 행은 doWork () 함수의 수퍼 클래스 버전을 호출합니다.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var __extends = (this && this.__extends) || function (d, b) {
   for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   function __() { this.constructor = d; }
   d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

var PrinterClass = (function () {
   function PrinterClass() {
   }
   PrinterClass.prototype.doPrint = function () { 
      console.log("doPrint() from Parent called…"); 
   };
   return PrinterClass;
}());

var StringPrinter = (function (_super) {
   __extends(StringPrinter, _super);
	
   function StringPrinter() {
      _super.apply(this, arguments);
   }
	
   StringPrinter.prototype.doPrint = function () {
      _super.prototype.doPrint.call(this);
      console.log("doPrint() is printing a string…");
   };
	
   return StringPrinter;
}(PrinterClass));

var obj = new StringPrinter();
obj.doPrint();

위 코드의 출력은 다음과 같습니다.

doPrint() from Parent called… 
doPrint() is printing a string…

정적 키워드

static 키워드는 클래스의 데이터 멤버에 적용 할 수 있습니다. 정적 변수는 프로그램이 실행을 마칠 때까지 값을 유지합니다. 정적 멤버는 클래스 이름으로 참조됩니다.

예

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("The value of num is"+ StaticMem.num) 
   } 
} 

StaticMem.num = 12     // initialize the static variable 
StaticMem.disp()      // invoke the static method

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var StaticMem = (function () {
   function StaticMem() {
   }
	
   StaticMem.disp = function () {
      console.log("The value of num is" + StaticMem.num);
   };
	
   return StaticMem;
}());

StaticMem.num = 12;     // initialize the static variable
StaticMem.disp();      // invoke the static method

위 코드의 출력은 다음과 같습니다.

The value of num is 12

instanceof 연산자

그만큼 instanceof 연산자는 객체가 지정된 유형에 속하는 경우 true를 반환합니다.

예

class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var Person = (function () {
   function Person() {
   }
   return Person;
}());

var obj = new Person();
var isPerson = obj instanceof Person;
console.log(" obj is an instance of Person " + isPerson);

위 코드의 출력은 다음과 같습니다.

obj is an instance of Person True

데이터 숨기기

클래스는 다른 클래스의 멤버에 대한 데이터 멤버의 가시성을 제어 할 수 있습니다. 이 기능을 데이터 숨기기 또는 캡슐화라고합니다.

Object Orientation은 액세스 수정 자 또는 액세스 지정자 개념을 사용하여 캡슐화 개념을 구현합니다. 액세스 지정자 / 수정자는 정의하는 클래스 외부에있는 클래스의 데이터 멤버 가시성을 정의합니다.

TypeScript에서 지원하는 액세스 수정자는 다음과 같습니다.

S. 아니. 액세스 지정자 및 설명
1.

public

공용 데이터 구성원은 보편적 인 접근성을 갖습니다. 클래스의 데이터 멤버는 기본적으로 공용입니다.
2.

private

개인 데이터 멤버는 이러한 멤버를 정의하는 클래스 내에서만 액세스 할 수 있습니다. 외부 클래스 멤버가 전용 멤버에 액세스하려고하면 컴파일러에서 오류가 발생합니다.
삼.

protected

보호 된 데이터 멤버는 이전 멤버와 동일한 클래스 내의 멤버 및 하위 클래스의 멤버가 액세스 할 수 있습니다.

예

이제 데이터 숨김이 어떻게 작동하는지 예를 들어 보겠습니다.

class Encapsulate { 
   str:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str)     //accessible 
console.log(obj.str2)   //compilation Error as str2 is private

이 클래스에는 각각 공용 및 개인 멤버 인 두 개의 문자열 속성 str1 및 str2가 있습니다. 클래스가 인스턴스화됩니다. 이 예제에서는 선언하는 클래스 외부에서 개인 속성 str2에 액세스하므로 컴파일 시간 오류를 반환합니다.

클래스 및 인터페이스

클래스는 인터페이스를 구현할 수도 있습니다.

interface ILoan { 
   interest:number 
} 

class AgriLoan implements ILoan { 
   interest:number 
   rebate:number 
   
   constructor(interest:number,rebate:number) { 
      this.interest = interest 
      this.rebate = rebate 
   } 
} 

var obj = new AgriLoan(10,1) 
console.log("Interest is : "+obj.interest+" Rebate is : "+obj.rebate )

AgriLoan 클래스는 Loan 인터페이스를 구현합니다. 따라서 이제 속성을 포함하도록 클래스에 바인딩됩니다.interest 회원으로.

컴파일시 다음 JavaScript 코드가 생성됩니다.

//Generated by typescript 1.8.10
var AgriLoan = (function () {
   function AgriLoan(interest, rebate) {
      this.interest = interest;
      this.rebate = rebate;
   }
   return AgriLoan;
}());

var obj = new AgriLoan(10, 1);
console.log("Interest is : " + obj.interest + " Rebate is : " + obj.rebate);

위 코드의 출력은 다음과 같습니다.

Interest is : 10 Rebate is : 1
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved