TypeScript - obiekty
Na objectto instancja zawierająca zestaw par klucz-wartość. Wartości mogą być wartościami skalarnymi lub funkcjami, a nawet tablicą innych obiektów. Składnia jest podana poniżej -
Składnia
var object_name = {
key1: “value1”, //scalar value
key2: “value”,
key3: function() {
//functions
},
key4:[“content1”, “content2”] //collection
};
Jak pokazano powyżej, obiekt może zawierać wartości skalarne, funkcje i struktury, takie jak tablice i krotki.
Przykład: notacja dosłowna obiektu
var person = {
firstname:"Tom",
lastname:"Hanks"
};
//access the object values
console.log(person.firstname)
console.log(person.lastname)
Podczas kompilacji wygeneruje ten sam kod w JavaScript.
Dane wyjściowe powyższego kodu są następujące -
Tom
Hanks
Szablon typu TypeScript
Załóżmy, że utworzyłeś literał obiektu w JavaScript jako -
var person = {
firstname:"Tom",
lastname:"Hanks"
};
W przypadku, gdy chcesz dodać wartość do obiektu, JavaScript umożliwia dokonanie niezbędnych modyfikacji. Załóżmy, że musimy później dodać funkcję do obiektu osoby, w ten sposób możesz to zrobić.
person.sayHello = function(){ return "hello";}
Jeśli użyjesz tego samego kodu w Typescript, kompilator wyświetli błąd. Dzieje się tak, ponieważ w Typescript konkretne obiekty powinny mieć szablon typu. Obiekty w Typescript muszą być wystąpieniami określonego typu.
Możesz rozwiązać ten problem, używając szablonu metody w deklaracji.
Przykład: szablon typu maszynopisu
var person = {
firstName:"Tom",
lastName:"Hanks",
sayHello:function() { } //Type template
}
person.sayHello = function() {
console.log("hello "+person.firstName)
}
person.sayHello()
Podczas kompilacji wygeneruje ten sam kod w JavaScript.
Dane wyjściowe powyższego kodu są następujące -
hello Tom
Obiekty mogą być również przekazywane jako parametry do funkcji.
Przykład: obiekty jako parametry funkcji
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)
Przykład deklaruje literał obiektu. Wyrażenie funkcyjne jest wywoływane przekazując obiekt osoby.
Podczas kompilacji wygeneruje następujący kod 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);
Jego wynik jest następujący -
first name :Tom
last name :Hanks
Możesz tworzyć i przekazywać anonimowe obiekty w locie.
Przykład: obiekt anonimowy
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"});
Podczas kompilacji wygeneruje następujący kod 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" });
Jego wynik jest następujący -
first name :Sachin
last name :Tendulkar
Pisanie na klawiaturze
Podczas pisania kaczego dwa obiekty są uważane za tego samego typu, jeśli oba mają ten sam zestaw właściwości. Typowanie typu kaczka weryfikuje obecność pewnych właściwości w obiektach, a nie ich rzeczywisty typ, aby sprawdzić ich przydatność. Pojęcie to jest ogólnie wyjaśnione następującą frazą -
„Kiedy widzę ptaka, który chodzi jak kaczka i pływa jak kaczka i kwacze jak kaczka, nazywam go kaczką”.
Kompilator TypeScript implementuje system pisania kaczego, który umożliwia tworzenie obiektów w locie przy zachowaniu bezpieczeństwa typów. Poniższy przykład pokazuje, jak możemy przekazać do funkcji obiekty, które nie implementują jawnie interfejsu, ale zawierają wszystkie wymagane elementy członkowskie.
Przykład
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})