-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlearn-ts.html
181 lines (173 loc) · 11.6 KB
/
learn-ts.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!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/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.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/student.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="post-heading">
<h1>Learn Basic type of TypeScript</h1>
<h2 class="subheading" style="text-align: justify;"><strong>TypeScript is an open-source language which is a superset of JavaScript, meaning any valid JavaScript code is also valid TypeScript code. It was developed by Microsoft to help catch errors early through a type system and to make JavaScript development more efficient.</strong></h2>
</div>
</div>
</div>
</div>
</header>
<article>
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto">
<div class="container">
<section>
<h2 class="section-heading">Primitive Types</h2>
<p>TypeScript provides several primitive types that you can use to declare variables. Here are the most common ones:<br><br></p>
<section>
<p><span class="p-title">Number</span>: Used for both integers and floating-point values. TypeScript doesn’t differentiate between integers and floats; all numbers are simply type number.</p><pre class="codeblock">let age: number = 25;
let price: number = 99.99;
<code></pre></code>
</section>
<section>
<p><span class="p-title">String</span>: Represents textual data. It’s similar to strings in JavaScript.</p><pre class="codeblock"><code>let name: string = "Alice";
let greeting: string = "Hello, World!";
</pre></code>
</section>
<section>
<p><span class="p-title">Boolean</span>: Represents a logical entity and can have only two values: <strong>true </strong>or <strong>false</strong></p><pre class="codeblock"><code>let isCompleted: boolean = false;
let isValid: boolean = true;
</pre></code>
</section>
<section>
<p><span class="p-title">Null</span>: Intentional absence of any object value.</p><pre class="codeblock"><code>let empty: null = null;
</pre></code>
</section>
<section>
<p><span class="p-title">Undefined</span>: Indicates that a variable has not been assigned a value.</p><pre class="codeblock"><code>let notDefined: undefined;
</pre></code>
</section>
</section>
</div>
<div class="container">
<h2 class="section-heading">Union Types</h2>
<p>Union types allow you to define a variable that can hold more than one type of value.<br><br></p>
<section><pre class="codeblock">let id: number | string;
id = 101; // OK
id = "202"; // Also OK
// id = true; // Error: Type 'boolean' is not assignable to type 'number | string'.
<code></pre></code></section>
</div>
<div class="container">
<h2 class="section-heading">Custom Types</h2>
<p>You can create custom types using interfaces or type aliases.</p>
<p><span class="p-title">Interface</span>: Defines the shape of an object. In TypeScript, an interface is an abstract type that defines the contract for the shape of an object. It specifies which property names a given object can have.</p><pre class="codeblock">interface User {
name: string;
age: number;
}
let user: User = {
name: "Bob",
age: 30
};
<code></pre></code>
<p><strong>Here are some key points about interfaces in TypeScript:</strong></p>
<p><span class="p-title">Shape Definition</span>: An interface describes the structure or skeleton of an object. It enforces a specific syntax on classes, specifying the types of data an object must have. Essentially, an interface acts as a contract that outlines the shape of an object.</p>
<p><span class="p-title">Type Checking</span>: Interfaces are used for type checking during development. <br>When you define an object with properties, TypeScript implicitly creates an interface based on the property names and data types. <br>The compiler ensures that objects conform to the defined interface.</p>
<p>Let’s say we have an object with a <code>label</code> property of type <code>string</code> :</p><pre class="codeblock"><code>function printLabel(labeledObj: { label: string }) {
console.log(labeledObj.label);
}
</pre></code>
<p>We can achieve the same using an interface:</p><pre class="codeblock"><code>interface LabeledValue {
label: string;
}
function printLabel(labeledObj: LabeledValue) {
console.log(labeledObj.label);
}
</pre></code>
<p>The interface <code>LabeledValue</code> represents the requirement of having a <code>label</code> property of type <code>string</code>. The order of properties doesn’t matter; only the shape does.</p>
<section></section>
</div>
<div class="container">
<h2 class="section-heading">Arrays and Tuples</h2>
<p>Arrays can hold multiple values of the same type, while tuples can contain a fixed number of elements with different types.</p>
<p><span class="p-title">Arrays</span>: </p>
<section><pre class="codeblock">let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Anna", "John", "Sarah"];
<code></pre></code>
<p><span class="p-title">Tuple</span>: </p><pre class="codeblock">let person: [string, number] = ["Steve", 25]; // Tuple for a string and a number
;
<code></pre></code>
</section>
</div>
<div class="container">
<h2 class="section-heading">Enum</h2>
<p>Enums allow you to define a set of named constants.</p>
<section><pre class="codeblock">enum Color {
Red,
Green,
Blue
}
let c: Color = Color.Green;
<code></pre></code></section>
</div>
<div class="container">
<h2 class="section-heading">Any, Unknown, and Never</h2>
<p><span class="p-title">Any</span>: Can be anything, try to avoid using it.</p><pre class="codeblock">let notSure: any = 4;
notSure = "maybe a string";
<code></pre></code>
<p><span class="p-title">Unknown</span>: Safer than any, requires type checking.</p><pre class="codeblock">let result: unknown;
// You need to ensure the type before you can assign `result` to other typed variables or use it.
<code></pre></code>
<p><span class="p-title">Never</span>: Represents values that never occur.</p><pre class="codeblock">function error(message: string): never {
throw new Error(message);
}
<code></pre></code>
<section>
<p>These are the basics of TypeScript data types. For a more comprehensive tutorial, you can visit the <a href="https://www.typescriptlang.org/docs/">TypeScript Documentation</a> or follow interactive tutorials like the one provided by <a href="https://www.w3schools.com/typescript/index.php">W3Schools</a>.</p>
</section>
</div><button class="btn btn-primary float-end" type="button" style="height: 72.6px;width: 146.1px;text-align: center;font-size: 18px;padding: 0px;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;"><a href="index.html" style="font-size: 18px;"><br><i class="far fa-arrow-alt-circle-left" style="color: var(--bs-btn-disabled-color);"></i><strong><span style="color: rgb(255, 255, 255);"> Back</span></strong><br><br></a></button>
</div>
</div>
</div>
</article>
<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:[email protected]"><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>