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 basics
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 basics

TypeScript basics

Introduction to TypeScript basics

Typescript is an object-oriented programming language and is also open source. It was created and maintained by Microsoft and comes under the Apache 2 license. Typescript was introduced by a core member of the C# language development team. Typescript is also considered as the superset of Javascript and it compiles the code into plain javascript. This language is used for application scale Javascript development and can be executed on any operating system, browser, or host. For running typescript codes on browser, a compiler is needed to generate a javascript file. Typescript is an ES6 version of Javascript including additional features. This article explains Typescript basics with explanations of different concepts of Typescript. This article would help beginners in understanding the basics of Typescript.

Installation

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

For using Typescript, first, it should be installed on your local computer. Typescript can be installed with NPM. Typescript can be installed with NPM using the following command.

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,198 ratings)

npm install -g typescript

Typescript would be installed globally using this command which will help you in using it in any project. After installing Typescript, one can start creating a new file using the code editor and make sure that the extension of the file is .ts.

Typescript codes cannot be executed on browsers as it doesn’t understand typescript codes. So, after writing the typescript code, it needs to be changed into javascript. The command written below can be used:

tsc <your_file_name>.ts

The above command would create a Javascript code and translate the original Typescript code into JS automatically.

Strong Typing

Now, we can move forward to deriving variables as string, Boolean, number, array, and other data types. Examples of strong typing are given below:

  • let name: string; // This command can be used for creating variables as string data types to store alphabets.
  • let isChecked: boolean; // This command can be used for creating variables as Boolean data type; here the output can be true or false.
  • let age: number; // This command can be used for creating variables as a number data type to store numerical values.
  • let array: number[]; // This command can be used for creating variables that can store an array of numbers.

let data: any; // This command can be used for creating variables with any data type. This data type can be changed to any other data type while writing the program.

Object-Oriented Features

  • Class & Interface

One of the most important feature of Typescript is that its follows object-oriented programming. In Typescript, we can define classes and interfaces, For example:

class Course {
Course_Name: String;
Course_Code: number;
duration: number;
Students_ID: number[] Getcoursedetails() {
// write further codes
}
}

Here, a class Course has been created, and moving further in the code, one can create multiple instances with new keyword.

let Tableau = new Course(); // Here, a new instance of Course class is created.

Once the Course() object is created, there is no need for declaring its type once again. Typescript does it automatically.

  • Constructors

If anyone understands object-oriented programming then they would be knowing about constructor(). Each and every class has its default constructor method and can be called by creating an instance of that class.

class Course {
Course_name: String;
Course_Code: number;
constructor(Course_name?: string, Course_Code?: number) {
this.Course_name = Course_name;
this.Course_Code = Course_Code;
}
getcoursedetails() {
// write further codes
}
}

The questions marks used above marks the parameters optional.

  • Access Modifiers

Access modifiers are used in object-oriented programming to restrict or permit the access of variables from outside the class. The three major types of access modifiers are as follows:

  • Public — Public access modifier is used to permit the access of variables from outside the class.
  • Private — Private access modifier restricts the access of variables from outside the class.
  • Protected — Protected access modifiers permits the access of variables within the class or to its derived classes.

class Course {
private Course_name: String;
private Course_Code: number;
constructor(Course_name?: string, Course_Code?: number) {
this.Course_name = Course_name;
this.Course_Code = Course_Code;
}
getcoursedetails() {
// write further codes}
}

  • Static type-checking

When a code is written, saved, and re-run; we may see some errors and those errors can be dugged easily sometimes but not always. Debugging can take much of the time and can also involve numerous editing and change in code.

Static type checker is a tool that helps in finding the bugs before running the code. The shapes and behaviours of the code and the values it may give can be seen by static types of systems. This way, typescript helps us in telling when we are going off track in our codes.

Types for Tooling

As we learned from the above segment that Typescript can detect bugs even before we run the code. Now, there is more feature which makes Typescript easier to use. Typescript can also prevent the coder from making errors while writing the code. The information is with typescript that the properties which we are accessing for different variables are correct or not. Typescript also starts suggesting particular properties which we can use, once Typescript is informed. This means that Typescript is also very much flexible for editing codes, now the type checker can help us with its error messages and will help in completion of the code while we write the code in the editor. This is called tooling in typescript and is very much useful for writing error-free codes.

Text Editors which can be used for Typescript

Initially, only Microsoft Visual Studio supported Typescript, but now there are various text editors and IDE available which supports Typescript through plugins or natively. Some of the text editors are listed below:

  • Webstorm’s latest version
  • Vim
  • Emacs
  • Atom
  • Visual Studio Code
  • Official plugin for Sublime Text.

Conclusion

On the basis of this article, we understood Typescript and its basic concepts. This article explains each and every concept in detail and with examples. The concepts explained in this article can be used by beginners in starting their journey with Typescript.

Recommended Articles

This is a guide to TypeScript basics. Here we discuss the Definition, Object-Oriented Features, Types for Tooling. You may also have a look at the following articles to learn more –

  1. TypeScript Array of Objects
  2. TypeScript keyof Enum
  3. TypeScript Set
  4. TypeScript Nullable
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