This is part 8 of the tutorial series Learn TypeScript in Construct. This part continues on from part 7. So in case you missed it, see Learn TypeScript in Construct, part 7: More on functions.
In this part we'll continue using a script file in a new Construct project. You can carry on with the same project as before, or create a new project and add a new script file again; either way delete all the code in the script file so you're starting with an empty file. In this part we'll cover another key building block of programming in TypeScript: objects.
Objects
An object is essentially a group of variables, but in the context of objects we use the name property instead of variable. Objects can be created using braces { and }. Each property of the object can be declared with property: value syntax, separated by commas. An example of the syntax for an object with two properties is shown below.
{
firstProp: "Hello world!",
secondProp: 123
}
The properties are similar to variables, in that they have a name, and can be given a value of any type. However they are not declared with let, and they use a colon to separate the name and value. Properties also don't have scope like variables do: properties are part of the object, and so exist as long as the object does.
Objects are another data type in TypeScript. That means you can also assign objects to variables, as shown below. In fact, just like with functions, you can use objects anywhere you can use any other value like a string or a number. The typeof of an object is "object".
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(typeof myObject); // object
Once you have an object assigned to a variable, each of its properties can be accessed through a dot and the name of the property, e.g. myObject.firstProp.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(myObject.firstProp); // Hello world!
TypeScript's type checker makes sure you cannot read properties that don't exist. For example the code below will be marked as an error when accessing thirdProp, because it does not exist on the object.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
console.log(myObject.thirdProp); // error
It does this by using a type that describes that specific object: it knows it has a property named firstProp with the type string, and another property named secondProp with the type number. The type of the object looks similar to the object as written above, but with types instead of property values. The code above is equivalent to the following:
let myObject: {
firstProp: string,
secondProp: number
} = {
firstProp: "Hello world!",
secondProp: 123
};
Look carefully at that code: the type annotation for the variable looks like the object, but with types instead of property values. Then there is the assignment operator =, followed by the actual value to assign, which is the object with the property values. In other words, this first declares a variable that will hold an object which has two properties named firstProp with string type and secondProp with number type. Then it assigns an actual object to the variable that fulfils that requirement.
This can be made a little clearer using a type declaration to create a custom type. The code below is equivalent, but using a custom type named MyObjectType.
// Declare a custom type describing an object
// with two properties
type MyObjectType = {
firstProp: string,
secondProp: number
}
// Create a variable initialized to an object
// that has the two required properties
let myObject: MyObjectType = {
firstProp: "Hello world!",
secondProp: 123
};
That's still quite a verbose way to declare a variable. Fortunately, as with other types, TypeScript can infer that type for us. So the original code without a type annotation works the same: TypeScript derives the type from the object that the variable is initialized with.
Assigning properties
As with variables, properties can also be assigned with =.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
// Change the value of firstProp
myObject.firstProp = "A different string!";
// Logs "A different string!" to console
console.log(myObject.firstProp);
Much like with reading properties, TypeScript will disallow assigning properties that don't exist on the object.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
// Error: thirdProp does not exist on the object
myObject.thirdProp = "A different string!";
Another useful thing to be able to do is to log an entire object to the console. This will show all the properties and values on the object in the console. Note you may have to click an 'expand' button to see the contents.
let myObject = {
firstProp: "Hello world!",
secondProp: 123
};
// Logs the entire object to the console
console.log(myObject);
JavaScript differences
It's worth mentioning here that an advantage of TypeScript is it ensures all your object properties exist and are used correctly, marking your code with an error if you make a mistake like spelling a property name incorrectly. As JavaScript is a dynamic programming language it allows adding and removing object properties as the program runs, as well as accessing nonexistent properties (which return undefined). This can make it confusing if you make a mistake and end up taking longer to get your code right. It is possible to use such dynamic access in TypeScript too, but it rather defeats the purpose of using types, so it's not something we cover in this guide.
Another benefit worth highlighting is that the code editor is able to use types to help autocomplete your code. You may notice when typing myObject. a small list appears with the two possible object properties. That uses the type of myObject to show a precise list of what you can access. In JavaScript as it is a dynamic programming language it cannot refer to types to generate that list. Instead it has to guess. Often the list is very long and contains lots of possible options, sometimes with the properties you want, sometimes not, and sometimes including properties you cannot actually use. This means autocomplete is much more helpful in TypeScript - you can rely on it to show you what kind of code you can write.