Getting Started with Angular 8 using TypeScript

In this article we will learn what is typescript and how to use typescript in angular.In this article we will cover We will cover following below;

• What is Typescript
• How to install Typescript
• Create a project and add the dummy product data in typescript file and append into it html.

What is Typescript ?
TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript.

To download the latest version of typescript follow the below command

npm install -g typescript

If the typescript is already installed, to check the version type below command. In our case we have latest stable typescript version 3.3.3333

tsc -v

Step-1
Let's create a new project in angular-8. To create the project add the below command and open the file into vs code editor as we use vs code.

ng new app-product

Step-2
Then we create a class name as product.ts and add some dummy data of products

export const products = [  
   {  
     name: 'Samsung',  
     price: 17799,  
     description: 'A large phone with one of the best screens'  
   },  
   {  
     name: 'Apple',  
     price: 36699,  
     description: 'A great phone with one of the best cameras'  
   },  
   {  
     name: 'Redmi',  
     price: 12299,  
     description: 'Triple Camera'  
   }  
 ];  

Step-3
We need to import the class in app.component.ts like below

Step-4
Add the product class into app.component.html file.

You can see the product class is iterate through DIV and name,price and description are bind accordingly.

Now run the application using below command and see the output like below.

</> Find the Source Code in Github.com/CoreProgramm/

Summary

  In this tutorial we discussed how to getting started with angular 8 using typeScript. If have any question related to this topic then give your feedback.