EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials TypeScript Tutorial TypeScript JSON
Secondary Sidebar
TypeScript Tutorial
  • TypeScript Basic and Advanced
    • What is TypeScript?
    • Typescript Examples
    • TypeScript Versions
    • TypeScript Operators
    • JavaScript dump object
    • JavaScript get Method
    • Webpack ReactJS
    • Code Generator JavaScript
    • JavaScript Projects
    • Call Stack JavaScript
    • JavaScript Projects GitHub
    • JavaScript Filter Function
    • JavaScript nan
    • JavaScripttimestamp
    • TypeScript loop
    • CoffeeScript
    • TypeScript Webpack
    • setTimeout TypeScript
    • DHTMLX
    • CoffeeScript for loop
    • TypeScript number
    • JavaScript export module
    • TypeScript string contains
    • TypeScript Inheritance
    • TypeScript get
    • TypeScript undefined
    • TypeScript Global Variable
    • TypeScript Dictionary
    • TypeScript Generic
    • TypeScript Cast Object
    • TypeScript Optional Parameters
    • TypeScript? switch
    • TypeScript promise
    • TypeScript tuple
    • TypeScript Hashmap
    • TypeScript let
    • TypeScript Getter
    • TypeScript Pattern Matching
    • TypeScript number to string
    • TypeScript substring
    • TypeScript?lambda
    • TypeScript UUID
    • TypeScript JSDoc
    • TypeScript Decorators
    • Typescript for loop
    • TypeScript HTTP Request
    • TypeScript Abstract Class
    • TypeScript Question Mark
    • TypeScript Nullable
    • TypeScript reduce
    • TypeScript Mixins
    • TypeScript keyof
    • TypeScript string to number
    • TypeScript JSON parse
    • TypeScript const
    • TypeScript declare module
    • TypeScript String
    • TypeScript filter
    • TypeScript Multiple Constructors
    • TypeScript? Set
    • TypeScript string interpolation
    • TypeScript instanceof
    • TypeScript JSON
    • TypeScript Arrow Function
    • TypeScript generator
    • TypeScript namespace
    • TypeScript default parameter
    • TypeScript cast
    • TypeScript babel
    • Typescript Key-Value Pair
    • TypeScript if
    • TypeScript keyof Enum
    • TypeScript wait
    • TypeScript Optional Chaining
    • TypeScript JSX
    • TypeScript Version Check
    • TypeScript Unit Testing
    • TypeScript Handbook
    • TypeScript module
    • TypeScript Extend Interface
    • TypeScript npm
    • TypeScript pick
    • TypeScript Interface Default Value
    • JavaScript import module
    • Obfuscate Javascript
    • TypeScript basics
    • setInterval TypeScript
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • TypeScript Array
    • TypeScript Array of Objects
    • Methods TypeScript Array
    • TypeScript remove item from array
    • TypeScript add to array
    • TypeScript Array Contains
  • Function Of Array
    • TypeScript Function Interface
    • TypeScript Functions
    • TypeScript Export Function
    • TypeScript function return type

TypeScript JSON

TypeScript JSON

Introduction to TypeScript JSON

The JSON objects are used to transport and store data between the client and server and for the JSON objects to be able to access the methods of the TypeScript class, we make use of a method called assign method of object class and this assign method creates a copy of the JSON object to the TypeScript class and another way for the JSON objects to be able to access the methods of the class is to make use of class transformer tool in out TypeScript program from which the necessary method is imported for the JSON object to access the class.

Syntax for JSON objects to access the TypeScript class:

Object.assign(new TypeScript_class(), JSONobject);
plainToClass(TypeScript_class(), JSONobject);

  • new Typescript class creates the instance of the class.
  • JSONobject represents the object in JSON trying to access the method in class.
  • plainToClass is the method imported by class transformer tool to enable the JSON object to access methods in class.

Working of JSON in TypeScript

  • The data can be stored and transported between the client and server using JSON objects.
  • The JSON objects can access the methods in two ways, one is by using the assign method and the other is by using the class transformer tool.
  • The assign method helps the JSON objects to access the methods by creating a copy of the JSON object.
  • The class transformer tool imports the necessary method required to enable the JSON objects to access the methods.

Examples

Given below are the examples mentioned:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Example #1

TypeScript program to create a class and a JSON object and then enable the JSON object to access the TypeScript class by making use of the assign method and then display the output on the screen.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,818 ratings)

Code:

//a TypeScript class defined to compute the power of a number whose value is provided in the JSON object file
class compute
{
numb:number;
power()
{
//defining two variables whose scope is within the block and then obtaining the value of the number using which the power can be calculated from the JSON object file
let num = 2;
let num1 = Math.pow(num,this.numb);
this.numb = num1;
return this.numb;
}
}
//contents stored in the JSON object file saved as jsonobject.json
{
“numb”: 2
}
//Actual program to enable the json object to access the method in the TypeScript class
//the JSON object file is imported
import jsonobject from 'C:/Users/admin/Desktop/jsonobject.json';
class compute
{
numb:number;
power()
{
let num = 2;
let num1 = Math.pow(num,this.numb);
this.numb = num1;
return this.numb;
}
}
//an instance of the TypeScript class is created and passed as a parameter to the assign     function along with the data present in the JSON object file
let instcompute = Object.assign(new compute(), jsonData);
console.log(instcompute);

Output:

TypeScript JSON 1

In the above program, we are defining a class in which consists of a function called compute to compute the power of a number whose value is provided by the JSON object file stored in a specific location. Then the JSON object file is imported to enable the JSON object to access the methods of the class. Then an instance of the class is created which is passed as a parameter to the assign function along with the data present in the JSON object file.

Example #2

TypeScript program to create a class and a JSON object and then enable the JSON object to access the TypeScript class by making use of class transformer tool and then display the output on the screen.

Code:

//a TypeScript class defined to compute the power of a number whose value is provided in the JSON object file
class compute
{
numb:number;
power()
{
//defining two variables whose scope is within the block and then obtaining the value of the number using which the power can be calculated from the JSON object file
let num = 2;
let num1 = Math.pow(num,this.numb);
this.numb = num1;
return this.numb;
}
}
//contents stored in the JSON object file saved as jsonobject.json
{
“numb”: 3
}
//Actual program to enable the json object to access the method in the TypeScript class
//the JSON object file is imported
import jsonobject from 'C:/Users/admin/Desktop/jsonobject.json';
//importing the necessary method to enable the JSON object to access the methods in the TypeScript class from class transformer tool
import { plainToClass } from “class-transformer”;
class compute
{
numb:number;
power()
{
let num = 2;
let num1 = Math.pow(num,this.numb);
this.numb = num1;
return this.numb;
}
}
//the plainToClass method from the class transformer tool will enable the Json Object to access the methods in the TypeScript class
let instcompute = plainToClass(compute(), jsonData);
console.log(instcompute);

Output:

TypeScript JSON 2

In the above program, we are defining a class which consists of a function called compute to compute the power of a number whose value is provided by the JSON object file stored in a specific location. Then the JSON object file stored in a specific location and the necessary method required to enable the JSON object to access the method in the class are imported to enable the JSON object to access the methods of the class. Here the imported method is plainToClass method. Then the class and the data present in the JSON object file is passed as a parameter to plainToClass method to compute the power of a given number.

Conclusion

In this article, we saw the concept of accessing class by JSON object using assign method and class transformer tool which imports the necessary method to enable the JSON object to access the methods in class and corresponding programming examples with their outputs to demonstrate them.

Recommended Articles

This is a guide to TypeScript JSON. Here we discuss the introduction, working of JSON in TypeScript and examples respectively. You may also have a look at the following articles to learn more –

  1. TypeScript Dictionary
  2. TypeScript Generic
  3. TypeScript Array
  4. TypeScript Operators
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more