By 06/07/2015 18 Comments

Creating A First TypeScript Project

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.

New-project

Fig: [1.1] Creating a new project

Creating and generating a TypeScript project

Fig: [1.2] Creating and generating a TypeScript project

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].
  1. app.css
  2. app.ts
  3. index.html
  4. web.config
Default TypeScript’s generated project files

Fig: [1.3] Default TypeScript’s generated project files

  • 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].

Run TypeScript project

Fig: [1.4] Run TypeScript project

TypeScript project is running on web browser (output)

Fig: [1.5] TypeScript project is running on web browser (output)

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].

clicking on [Show All Files] icon on the [Solution Explorer] toolbar

Fig: [1.6] clicking on [Show All Files] icon on the [Solution Explorer] toolbar

An option [Include In Project] is being pressed

Fig: [1.7] An option [Include In Project] is being pressed







Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .