DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Build a Microservice in 4 Steps: An Introduction to Jolie
  • Build Quicker With Zipper: Building a Ping Pong Ranking App Using TypeScript Functions
  • Stateless vs. Stateful Widgets: Make the Right Choice for Your Flutter App
  • TypeScript: Useful Features

Trending

  • TDD With FastAPI Is Easy
  • Implementing Stronger RBAC and Multitenancy in Kubernetes Using Istio
  • How To Validate Archives and Identify Invalid Documents in Java
  • DevSecOps: Integrating Security Into Your DevOps Workflow
  1. DZone
  2. Coding
  3. JavaScript
  4. TypeScript 101: Tools to Hello World

TypeScript 101: Tools to Hello World

TypeScript is super-set of JavaScript created by Microsoft that “lets you write the way you really want and compiles to JavaScript.”

Josh Anderson user avatar by
Josh Anderson
·
Oct. 10, 15 · Code Snippet
Like (4)
Save
Tweet
Share
6.44K Views

Join the DZone community and get the full member experience.

Join For Free

this post by dhananjay kumar of the infragistics.com community blog , syndicated by permission.

this post will help you get started with typescript by setting up the development environment for typescript in visual studio and sublime text. at the end of the post, we will create a simple typescript program in visual studio.

typescript features

includes:

support for standard javascript
static typing and annotations
encapsulation using classes and modules
support for constructors, properties, and functions
syntax checking

does:

syntactically sugar-coat javascript as a super-set of ecmascript 5 and with various proposed features of ecmascript 6
compiles with module code generation which can be loaded statically or dynamically
works with type inference
does not reorder variable declaration

typescript in visual studio

prerequisites

figure 1: typescript download

to work with typescript in the visual studio, download the typescript package for your version of visual studio from http://www.typescriptlang.org and install as needed ( figure 1 , right).

more recent versions of visual studio include typescript.

to create a typescript project in visual studio

  1. find html application with typescript inside the typescript section of installed templates, as shown in ( figure 2 ), below.

    figure 2: typescript project template location

  2. create a project using the

    html application with typescript

    template. after making the project, find the files app.ts in the solution explorer ( figure 3 ) and app.js in the project folder:

    • app.ts
      a typescript file. whenever you save this file, visual studio will create a javascript equivalent of it with the name app.js .

    • in index.html ( figure 4 ), you will notice a reference to the compiled app.js ; however the file is not included in the project by default. you can add it to the project manually.

    figure 3: typescript file app.ts in solution explorer

    figure 4: reference to compiled app.js in index.html

you can add more than one typescript file with opening a context menu with a right click, selecting "add new item," and then "typescript file." after adding the new source file, visual studio will create a corresponding javascript file in the same folder. you need to manually add references to those javascript files in your html.

the file app.ts contains a reference code to print the current time in typescript. without changing anything, go ahead and run the application in your favorite browser and you will have the current time printed in the browser using typescript, shown in figure 5 , below:

figure 5: simple html with typescript application in browser


typescript in sublime text

prerequisites

  • a syntax highlighter

  • a custom build system

to install typescript syntax highlighting

  1. git clone this package to \appdata\roaming\sublime text 2\packages as shown in figure 6 , below:

    figure 6: git-cloning typescript plugin for sublimetext

  2. once installed, create a new .ts file in sublime text and you will find that typescript syntax is working ( figure 7 ):

    figure 7: working syntax highlighting in sublimetext

to create the typescript build system

  1. tools → build system → new build system

  2. in the new build system window, paste the code below and save the file with a name like "typescriptbuild."

{
    "selector": "source.ts",
    "cmd": ["tsc", "$file"],
    "file_regex": "^(.+?) \\((\\d+),(\\d+)\\)(: .+)$"
}

after custom build creation, select tools → build system → typescriptbuild and you should able to use ctrl+b  to build typescript into a javascript file.


a simple example

  1. using typescript, let's create a class. typescript allows us to create a class using simple syntax. a class can be created using the class keyword. we can define variables with the types, and a constructor can be created using the keyword constructor.

  2. below, we are creating a student class with two properties, constructor and a method. the class can be created as:

class student {
    name: string;
    age: number;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    print() {

        alert(this.name + " is " + this.age + " years old !!");
    }
}

window.onload = () => {
    var stud1 = new student("dj", 33);
    stud1.print();
};

we can create an object using the new keyword. in the student class print method, we are displaying the age and name of the student.

when you run the application you will get an alert message as shown in the image below:

i hope you find this post useful to get started with typescript - have something to say? leave a comment!

TypeScript Build (game engine)

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Build a Microservice in 4 Steps: An Introduction to Jolie
  • Build Quicker With Zipper: Building a Ping Pong Ranking App Using TypeScript Functions
  • Stateless vs. Stateful Widgets: Make the Right Choice for Your Flutter App
  • TypeScript: Useful Features

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: