Hot File

How to Creating A First TypeScript Project

View: 389    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/1 review File has been tested

Open visual studio 2013 by double click on it, create a new project (File -> New -> Project) [Fig: 1.1], then go to (installed -> Templates -> TypeScript) now in center window select [HTML Application with TypeScript] option then enter a name and location for your project and click Ok to generate a TypeScript project

Introduction

First TypeScript Project:

Make sure that you have installed visual studio 2013.

Open visual studio 2013 by double click on it, create a new project (File -> New -> Project) [Fig: 1.1], then go to (installed -> Templates -> TypeScript) now in center window select [HTML Application with TypeScript] option then enter a name and location for your project and click Ok to generate a TypeScript project [Fig: 1.2]. Your first TypeScript project has been generated now.

Remember:

TypeScript cannot be generated as an individual project only, but any of the ASP.NET project types support TypeScript.

You can include the TypeScript files in any type of project by simply adding them with .ts file extension within that project and visual studio will automatically start compiling TypeScript files as a part of new project.

Default TypeScript project files:

Once a new TypeScript project has been created, the project template generates the following files automatically [Fig: 1.3].

app.css

app.ts

index.html

web.config

If we will run this project [Fig: 1.4] now, we can see the output of this project because this is a complete and running default TypeScript application [Fig: 1.5]

Example: A closer look at a HTML file: index.html

<!DOCTYPE html> <!--This line tells to browser that this is an HTML5 document-->
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Creating A First TypeScript Website Project</title>
 
    <!--Import/call app.css file from path-->
    <link rel="stylesheet" href="app.css" type="text/css" />
 
    <!--Import/call a JavaScript file app.js from path-->
    <script src="app.js"></script>
</head>
<body>
 
    <!--Displa heading text on this web page-->
    <h1>TypeScript HTML App</h1>
 
    <!--A div declaration with id "content"-->
    <div id="content"></div>
</body>
</html>

Above file index.html is a simple HTML file, which includes an external stylesheet file app.css, as well as a JavaScript file app.js

The app.js is a JavaScript file that will be generated from app.ts TypeScript file, when this project will be compiled

A JavaScript file app.js is not included in TypeScript project, only app.ts TypeScript file is included. This is by default but a generated app.js JavaScript file can be seen by clicking on the [Show All Files] icon on the [Solution Explorer] toolbar [Fig: 1.6] and then press an option [Include In Project] [Fig: 1.7]

How to Creating A First TypeScript Project

How to Creating A First TypeScript Project Posted on 29-08-2016  Open visual studio 2013 by double click on it, create a new project (File -> New -> Project) [Fig: 1.1], then go to (installed -> Templates -> TypeScript) now in center window select [HTML Application with TypeScript] option then enter a name and location for your project and click Ok to generate a TypeScript project 9/10 389

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 552    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    2.25/2 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 618    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    2.25/2 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 288    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 302    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 314    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    4.5/2 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 291    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 4903    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 752    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    0/0 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd