-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (133 loc) · 11.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TypeScript Tutorial</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&display=swap">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/Codeblock-1.css">
<link rel="stylesheet" href="assets/css/Codeblock.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.html">Learn TypeScript and Setting up Tutorial</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<!-- <li class="nav-item"><a class="nav-link" href="community.html">Community</a></li> -->
<li class="nav-item"><a class="nav-link" href="learn-ts.html">Learn TypeScript</a></li>
</ul>
</div>
</div>
</nav>
<header class="masthead" style="background-image:url('assets/img/home.png');">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto position-relative">
<div class="site-heading">
<h1 id="title">TypeScript Setting up Tutorial</h1><span class="subheading">Welcome to the world of TypeScript, a powerful superset of JavaScript that brings static typing to your coding experience, enhancing readability, and reducing errors.</span>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 col-xl-11 col-xxl-10">
<section class="post-preview">
<article>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>By the end of this tutorial, you'll have a solid foundation for working with TypeScript in VS Code, and you'll be ready to take advantage of TypeScript's features to create more reliable and maintainable code.</strong></h2>
<p><strong>Let's embark on this journey to elevate your JavaScript projects with the robust capabilities of TypeScript!</strong></p>
<p>This will guide you through the process of setting up TypeScript in your local development environment, specifically focusing on Visual Studio Code (VS Code), one of the most popular code editors available today.</p>
<p>We'll start by walking you through the installation of TypeScript and configuring VS Code to handle TypeScript files efficiently. Then, we'll delve into learning the basic types of TypeScript.</p>
</article>
</section>
<hr>
<h3 class="post-subtitle"><span style="color: rgb(17, 17, 17);">Let's get started!</span></h3>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Install TypeScript</strong></h2>
<p>Open your terminal or command prompt and install TypeScript globally using npm with the following command:</p><pre class="codeblock"><code>npm install -g typescript</pre></code>
<p>This allows you to use the TypeScript compiler (tsc) from anywhere in your system.</p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Initialize Your Project</strong></h2>
<p>Create a new directory for your project and navigate into it:</p><pre class="codeblock"><code>mkdir my-typescript-project
cd my-typescript-project
</pre></code>
<p>Initialize a new npm package within your project directory:</p><pre class="codeblock"><code>npm init -y</pre></code>
<p>The <code>-y</code> flag will skip the questionnaire and generate a default <code>package.json</code> file.</p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Install TypeScript Locally</strong></h2>
<p>Although you’ve installed TypeScript globally, it’s a good practice to have it as a local dependency in your project as well:</p><pre class="codeblock"><code>npm install typescript --save-dev</pre></code>
<p></p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Create a <em>tsconfig.json</em> File</strong></h2>
<p>The <code>tsconfig.json</code> file specifies the root files and the compiler options required to compile the project. You can generate a default <code>tsconfig.json</code> file by running:</p><pre class="codeblock"><code>tsc --init</pre></code>
<p>You can then customize this file as needed for your project.</p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Write a TypeScript Code</strong></h2>
<p>Create a new file with a<strong><em> </em></strong><span style="background-color: #f0f0f0;font-weight: normal;font-family: 'Cutive Mono', monospace;padding-top: 1px;padding-bottom: 1px;"></span><code>.ts</code><strong><em>. </em></strong>extension, for example, <code>index.ts</code>, and start writing your TypeScript code.</p><pre class="codeblock"><code>// File: index.ts
// A function to add two numbers and return the result
function addNumbers(a: number, b: number): number {
return a + b;
}
// Call the function with two numbers
let result: number = addNumbers(10, 15);
// Output the result to the console
console.log(`The sum of 10 and 15 is ${result}`);
</pre></code>
<p>To compile this TypeScript code to JavaScript, you would use the TypeScript compiler <strong><em>(</em></strong><code>tsc</code><strong><em>)</em></strong> with the command <code>tsc index.ts</code><strong><em> </em></strong>. This will generate a corresponding <code>index.js</code> file with the compiled JavaScript code.</p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Compile TypeScript to JavaScript</strong></h2>
<p>To compile your TypeScript code to JavaScript, run the following command:</p><pre class="codeblock"><code>tsc</pre></code>
<p>If you have specified an <code>outDir</code>outDir in your <code>tsconfig.json</code>, the compiled <code>.js</code>. files will be found there. Otherwise, they’ll be in the same directory as your <code>.ts</code> files.</p>
</section>
<section>
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>Run your JavaScript Code</strong></h2>
<p>Finally, you can run your compiled JavaScript code using Node.js:</p><pre class="codeblock"><code>node index.js
</pre></code>
<p>Replace <code>index.js</code> with the path to your compiled JavaScript file.</p>
<p>And that’s it! You’ve successfully set up TypeScript in your local environment and are ready to start coding. Remember, you can always refer to the <a href="#https://www.typescriptlang.org/docs/">TypeScript documentation</a> for more detailed information and advanced configurations. Happy coding!</p>
</section>
<hr>
<div class="container pre-footer">
<section class="resources-section">
<h2 class="post-title" style="--bs-body-font-size: 1rem;"><strong>For more Resources and Examples see the links below:</strong></h2>
<p>If your not ready to install TypeScript to your local environment. You can try and practice your typescript at <a href="https://www.typescriptlang.org/play?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBBCcQQ0MwAUVWDEQC0gADVHBQGNJ3KAALygABEAAkYNAMOB4GRonzFBTBPB3AERcwABS0+mM9ysygc9wASmCKhwzQ8ZC8iHFzmB7BoXzcZmY7AYzEg-Fg0HUiQ58D0Ii8fLpDKZgj5SWxfPADlQAHJhAA5SASPlBFQAeS+ZHegmdWkgR1QjgUrmkeFATjNOmGWH0KAQiGhwkuNok4uiIgMHGxCyYrA4PCCJSAA">TypeScript playground</a>.</p>
<p>Here is for more <a href="https://www.typescriptlang.org/tsconfig">TypeScript configurations</a>.</p>
<p>For other TypeScript tools and cheat sheet <a href="https://www.typescriptlang.org/tools">TypeScript playground</a>.</p>
<p>If you fancy watching a tutorial, you can watch <a href="https://www.youtube.com/watch?v=HvxYkugp55A&t=6s">TypeScript and NodeJS: The Proper Setup!</a>.</p>
</section>
</div>
<div class="clearfix"><button class="btn btn-primary float-end" type="button" style="height: 74.6px;width: 335.1px;text-align: center;font-size: 14px;padding: 0px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;"><a href="learn-ts.html" style="font-size: 18px;"><br><strong><span style="color: rgb(255, 255, 255);">Learn TypeScript Data types ⇒</span></strong><br><br></a></button></div>
<hr>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item"><a href="https://www.linkedin.com/in/chari-154571226/"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse" style="font-size: 23px;"></i></span></a></li>
<li class="list-inline-item"><a href="mailto:chari.c.media@gmail.com"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-envelope fa-stack-1x fa-inverse" style="font-size: 21px;"></i></span></a></li>
<li class="list-inline-item"><a href="https://github.com/chari00"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-github fa-stack-1x fa-inverse" style="font-size: 26px;"></i></span></a></li>
</ul>
<p class="text-muted copyright">SoC-mcc© 2024</p>
</div>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>