Typescript create object with fields

Objects & Object Type in TypeScript

In this tutorial, let us look at the objects and learn how to create the object type and assign it to objects. objects are the most fundamental data type in TypeScript. The Typescript has seven primitive data types string , number , bigint , boolean , undefined , symbol , and null . Anything that is not a primitive data type is an object. Understanding objects and creating types to represent them is crucial in learning TypeScript. In this tutorial, we will learn what objects are in TypeScript and how to create types for objects and use them.

What is an object?

An object is a collection of key-value pairs. Each key-value pair is known as a property, where the key is the name of the property and value its value

Objects provide a way to group several values into a single value. You can group any values of other types like string, number, booleans, dates, arrays, etc. An object can also contain other objects. We can easily build a more complex structure using them.

Each key-value pair in the key-value collection is a property of the object. The TypeScript objects can have any number of properties. You can also create an empty object without any properties. The key or name of the property must be unique. The property name is string (But can also be a symbol type). No two properties can have the same name. We store or retrieve the value of an object using its property name (key). Value can be any valid TypeScript value. For example string, number, date, function, or another object.

We can also assign a function to a property in which case the property is known as a method.

Creating Objects in TypeScript

There are a few ways in which you can create an object in TypeScript. One of the is to use the Object Literal Syntax. It consists of a list of key-value pairs, each separated by a comma and wrapped inside curly braces

Источник

Create an Object From Interface in TypeScript

1. Assign All Fields in the Created Object in TypeScript
2. Use the as Keyword to Set an Empty Object in TypeScript
3. Use the as Keyword to Set Only the Required Attributes in TypeScript
4. Use the Partial , Omit , and Pick Types to Create an Object in TypeScript
5. Use the ? Operator to Make Attributes in the Interface Optional in TypeScript

Interfaces in TypeScript provide a construct for strict typing support compared to plain JavaScript. The user may design interfaces or be present in a third-party library imported by the user.

Most of the time, the user wants to create an object based on the interface definition provided in the third-party library to access the methods and functionality provided by the third-party library.

This article will focus on creating an object from an interface definition.

Assign All Fields in the Created Object in TypeScript

All the properties associated with the interface definition can be directly assigned to the newly created object. The following code segment demonstrates this.

interface Animal   legs : number ;  eyes : number ;  name : string ;  wild : boolean ; >;  const dog : Animal =   legs : 4,  eyes : 2,  name : 'Dog',  wild : false >; 

The properties can now be accessed from the object like dog.name or dog.wild .

Use the as Keyword to Set an Empty Object in TypeScript

An empty object can be initialized using the as keyword, whose attributes can be set later. The following code segment demonstrates this.

interface Animal   legs : number ;  eyes : number ;  name : string ;  wild : boolean ; >;  const dog : Animal = <> as Animal;  dog.legs = 4; dog.name = "Dog"; console.log(dog); 

Thus an empty object was initialized of the type Animal , and the attributes legs and name were set. When the object was printed, it only showed the set attributes.

Use the as Keyword to Set Only the Required Attributes in TypeScript

The required attributes can be set directly using the as keyword. The as keyword forces the compiler to recognize the object is of a certain type even if all the fields in the object have not been set.

interface Animal   legs : number ;  eyes : number ;  name : string ;  wild : boolean ; >;  const dog : Animal =   legs : 4,  name : 'Dog', > as Animal; 

Use the Partial , Omit , and Pick Types to Create an Object in TypeScript

The Partial type is used to make all attributes of an interface optional. The Pick type is used when only certain interface attributes are required to create the object.

The Omit type is used as the inverse of the Pick type — to remove certain attributes from the interface while keeping all the other attributes as required.

interface Animal   legs : number ;  eyes : number ;  name : string ;  wild : boolean ; >;  const dogOnlyWithName : PickAnimal, 'name'> =   name : "Dog" >;  const dogWithoutWildFlagAndEyes : OmitAnimal, "wild" | "eyes"> =   legs : 4,  name : "Dog" >  const dogWithAllOptionalTypes : PartialAnimal> =   eyes: 2 >; 

Use the ? Operator to Make Attributes in the Interface Optional in TypeScript

Some of the attributes in the interface can be marked optional by the ? operator. This is a viable option in the case of user-defined interfaces but cannot be implemented in the case of interfaces imported from third-party libraries.

interface Animal   legs : number ;  eyes? : number ;  name : string ;  wild? : boolean ; >;  const dog : Animal =   legs : 4,  name : 'Dog' >; 

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

Related Article — TypeScript Interface

Источник