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 type
Secondary Sidebar
TypeScript Tutorial
  • Type of Union
    • TypeScript Object Type
    • TypeScript type check
    • TypeScript promise type
    • TypeScript JSON type
    • TypeScript Union Types
    • TypeScript typeof
    • TypeScript Types
  • 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
  • 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 type

TypeScript JSON type

Introduction to TypeScript JSON type

The TypeScript comes up with the functionality of working with JSON Type data. JSON being the JavaScript Object Notation, is used to make a data model that is easy to write and read. We can easily analyze large and complex data set with this TypeScript JSON type.

In TypeScript also we can get these data and do operations over the JSON data. JSON supports the dynamic data model that makes it more flexible to work on. We can have the type inference from JSON in TypeScript. TypeScript uses the mechanism of type assertion that allows us to override views of type. There are certain methods available that help us to deal with the TypeScriptJSON Type data.

Syntax

let Demo_Snytax = [{
//variable Name
},
{
//variable Name 2
roll: '20',
name: 'anand'
},{
//variable Name3
roll: '30',
name: 'tom'
},
];

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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)

Screenshot:-

TypeScript JSON type output 1

Working of TypeScript JSON type

We can create a JSON object in TYPESCRIPT dynamically. There are two types of objects in TypeScript.

A Plain Object that we achieve with json.parse() which results in the plain object, and the TypeScript Class, which returns the Class Object.

When a JSON is used for storing or modeling data, we need to import the JSON file used in the namespace and get the json data to use the assign method that returns a class object that can be accessed to get the data.

A second parameter called reviver is also accepted that gets called with the key-value pair being parsed.

We can also push the data into a JSON Array. And can parse the JSON back to object in type Script.

Let us try to understand some more with the Help of Examples.

Example

Let us see some Example for JSON Type in TypeScript:-

Let us make JSON Data in TypeScript with the variable named:- studata, which contains the details of the student with roll number and name in a JSON Format.

Code:

let studata = [{
roll: '12',
name: 'anand'
},
{
roll: '20',
name: 'darak'
},{
roll: '30',
name: 'Peter'
},
];

Let us work around a simple JSON Type in TypeScript and try to push the JSON data using the JSON.push method.

This JSON.push method puts the JSON data into a new variable.

Code:

var studata2 = [];
for (let w in studata) {
studata2.push({
roll: w,
name: studata[w] });
}
console.log(studata2)

The output for the following code will print the JSON data in the studata2.

Sample Output:

Full Code Snapshot:

TypeScript JSON type output 2

Now let’s add an interface to the above code to support the Type inference and code validation.

So this is achieved to avoid the run time errors on the code, as when the property is changed to a different type, the mapping will not happen.

Code:

let studata = [{
roll: '12',
name: 'anand'
},
{
roll: '20',
name: 'darak'
},{
roll: '30',
name: 'Peter'
},
];
interface Student {
roll: string;
name: string;
}

Now let’s try to check the type of data residing in the JSON.

This can be achieved by using a For Each loop and the function TYPE OF

const a: Student[] = studata as Student[];
a.forEach((item: Student) => {
console.log(typeof(item.roll), typeof(item.name));
})

The output for this will give the type of JSON.

[LOG]: "string",  "string"
[LOG]: "string",  "string"
[LOG]: "string",  "string"

Full code Snapshot:

output 3

From this, we saw how a JSON Type works in TypeScript.

Rules and Regulation for Json Type

Let us look over the rules and regulations required for working with JSON Type in TypeScript.

  1. We can create a JSON object Dynamically.
  2. The JSON objects are used to hold the complex data models.
  3. JSON uses the schema-less and dynamic data model.
  4. Need to ensure the type of safety.
  5. Avoid the use of Object.
  6. Use JSON functions like json.parse , json.stringify to parse the JSON object.
  7. Stringify is used to convert the object to JSON String.
  8. JSON can also be converted into Array Objects simply by traversing the JSON using the PUSH method.
  9. The Object.assign method is also used to assign the object value.

Serialization / Deserialization of JSON data can also be done in TypeScript.

From the above article, we saw the rule for working with JSON Type.         

Conclusion

From the above article, we saw the use of JSON Type in TypeScript. We tried to understand how the JSON value works in TypeScript and what is used at the programming level from various examples and classification.

We also saw the internal working and the advantages of having a Key-Value pair that we define for various programming purposes. Also, the syntax and examples helped us to understand much precisely the function.

Recommended Articles

This is a guide to TypeScript JSON type. Here we discuss the Working of TypeScript JSON type along with the Uses, examples, and classification. You may also have a look at the following articles to learn more –

  1. TypeScript Abstract Class
  2. Typescript for loop
  3. TypeScript Generic
  4. What is TypeScript?
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