TypeScript-객체

안 object키 값 쌍 세트를 포함하는 인스턴스입니다. 값은 스칼라 값이나 함수 또는 다른 객체의 배열 일 수 있습니다. 구문은 다음과 같습니다.

통사론

var object_name = { 
   key1: “value1”, //scalar value 
   key2: “value”,  
   key3: function() {
      //functions 
   }, 
   key4:[“content1”, “content2”] //collection  
};

위에 표시된 것처럼 객체는 스칼라 값, 함수 및 배열 및 튜플과 같은 구조를 포함 할 수 있습니다.

예 : 객체 리터럴 표기법

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
//access the object values 
console.log(person.firstname) 
console.log(person.lastname)

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

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

Tom 
Hanks

TypeScript 유형 템플릿

자바 스크립트에서 객체 리터럴을 다음과 같이 생성했다고 가정 해 보겠습니다.

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
};

객체에 값을 추가하려는 경우 JavaScript를 사용하여 필요한 수정을 할 수 있습니다. 나중에 person 객체에 함수를 추가해야한다고 가정 해 봅시다. 이것이 여러분이 할 수있는 방법입니다.

person.sayHello = function(){ return "hello";}

Typescript에서 동일한 코드를 사용하면 컴파일러에서 오류가 발생합니다. 이는 Typescript에서 구체적인 객체에는 유형 템플릿이 있어야하기 때문입니다. Typescript의 개체는 특정 유형의 인스턴스 여야합니다.

선언에서 메서드 템플릿을 사용하여이 문제를 해결할 수 있습니다.

예 : Typescript 유형 템플릿

var person = {
   firstName:"Tom", 
   lastName:"Hanks", 
   sayHello:function() {  }  //Type template 
} 
person.sayHello = function() {  
   console.log("hello "+person.firstName)
}  
person.sayHello()

컴파일 할 때 JavaScript에서 동일한 코드를 생성합니다.

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

hello Tom

객체는 기능을위한 매개 변수로 전달할 수도 있습니다.

예 : 함수 매개 변수로서의 객체

var person = { 
   firstname:"Tom", 
   lastname:"Hanks" 
}; 
var invokeperson = function(obj: { firstname:string, lastname :string }) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson(person)

이 예제는 객체 리터럴을 선언합니다. 함수 표현식은 사람 객체를 전달하여 호출됩니다.

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

//Generated by typescript 1.8.10
var person = {
   firstname: "Tom",
   lastname: "Hanks"
};

var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson(person);

출력은 다음과 같습니다.

first name :Tom 
last name :Hanks

즉석에서 익명 개체를 만들고 전달할 수 있습니다.

예 : 익명 개체

var invokeperson = function(obj:{ firstname:string, lastname :string}) { 
   console.log("first name :"+obj.firstname) 
   console.log("last name :"+obj.lastname) 
} 
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

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

//Generated by typescript 1.8.10
var invokeperson = function (obj) {
   console.log("first name :" + obj.firstname);
   console.log("last name :" + obj.lastname);
};

invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });
invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });

출력은 다음과 같습니다.

first name :Sachin 
last name :Tendulkar

덕 타이핑

덕 타이핑에서 두 개체가 동일한 속성 집합을 공유하는 경우 두 개체는 동일한 유형으로 간주됩니다. 덕 타이핑은 실제 유형이 아닌 객체에 특정 속성이 있는지 확인하여 적합성을 확인합니다. 개념은 일반적으로 다음 문구로 설명됩니다.

“오리처럼 걷고 오리처럼 헤엄 치고 오리처럼 꽥꽥 거리는 새를 보면 나는 그 새를 오리라고 부릅니다.”

TypeScript 컴파일러는 유형 안전성을 유지하면서 즉석에서 객체를 생성 할 수있는 덕 타이핑 시스템을 구현합니다. 다음 예제는 인터페이스를 명시 적으로 구현하지 않지만 필요한 모든 멤버를 포함하는 객체를 함수에 전달하는 방법을 보여줍니다.

예

interface IPoint { 
   x:number 
   y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
   var x = p1.x + p2.x 
   var y = p1.y + p2.y 
   return {x:x,y:y} 
} 

//Valid 
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  

//Error 
var newPoint2 = addPoints({x:1},{x:4,y:3})