-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
656 lines (597 loc) · 48.9 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
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<div id="top-page" class="page-wrapper">
<nav id="navbar">
<header class="main-header">
<div class="ts-icon-wrapper">
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="ts-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path style="fill:#0078CF;"
d="M512,256c0,23.155-3.072,45.599-8.84,66.936c-13.479,49.894-41.66,93.748-79.621,126.631
C378.64,488.469,320.073,512,256,512C114.615,512,0,397.385,0,256S114.615,0,256,0S512,114.615,512,256z" />
<g>
<path style="fill:#F2F2F2;" d="M503.16,322.936c-13.479,49.894-41.66,93.748-79.621,126.631c-3.709,0.199-7.586,0.293-11.609,0.293
c-53.154,0-82.693-33.217-97.374-58.138l48.191-28.954c0,0,16.394,34.837,47.125,34.837c30.741,0,43.039-10.25,43.039-33.813
c0-28.693-99.391-38.933-114.761-88.116c-15.37-49.183,5.12-118.868,76.852-113.737c44.826,3.197,70.04,25.213,82.651,41.273
l-47.815,34.544c-10.25-29.706-52.255-29.706-60.458-5.12c-8.192,24.597,19.466,38.933,62.506,53.279
C473.997,293.282,491.781,306.876,503.16,322.936z" />
<polygon style="fill:#F2F2F2;" points="300.943,169.786 83.106,169.786 83.106,221.202 162.935,221.202 162.935,444.45
221.115,444.45 221.115,221.202 300.943,221.202 " />
</g>
</svg>
</div>
<h1>Type<span class="ts-script-text">Script</span>
<svg id="docs-icon" width="34" height="34" viewBox="0 0 34 34" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M34 23.9062V1.59375C34 0.710547 33.1879 0 32.1786 0H7.28571C3.26339 0 0 2.85547 0 6.375V27.625C0 31.1445 3.26339 34 7.28571 34H32.1786C33.1879 34 34 33.2895 34 32.4062V31.3438C34 30.8457 33.7344 30.3941 33.3246 30.102C33.0058 29.0793 33.0058 26.1641 33.3246 25.1414C33.7344 24.8559 34 24.4043 34 23.9062ZM9.71429 8.89844C9.71429 8.6793 9.9192 8.5 10.1696 8.5H26.2589C26.5094 8.5 26.7143 8.6793 26.7143 8.89844V10.2266C26.7143 10.4457 26.5094 10.625 26.2589 10.625H10.1696C9.9192 10.625 9.71429 10.4457 9.71429 10.2266V8.89844ZM9.71429 13.1484C9.71429 12.9293 9.9192 12.75 10.1696 12.75H26.2589C26.5094 12.75 26.7143 12.9293 26.7143 13.1484V14.4766C26.7143 14.6957 26.5094 14.875 26.2589 14.875H10.1696C9.9192 14.875 9.71429 14.6957 9.71429 14.4766V13.1484ZM28.9455 29.75H7.28571C5.94241 29.75 4.85714 28.8004 4.85714 27.625C4.85714 26.4562 5.95 25.5 7.28571 25.5H28.9455C28.8013 26.6355 28.8013 28.6145 28.9455 29.75Z"
fill="black" />
</svg>
</h1>
</header>
<div id="Table_of_Contents">
<h2>Table of Contents</h2>
<ul>
<li>
<a id="Introduction-menu-item" href="#Introduction" class="nav-link">Introduction</a>
</li>
<li>
<a id="Boolean-menu-item" href="#Boolean" class="nav-link">Boolean</a>
</li>
<li>
<a id="Number-menu-item" href="#Number" class="nav-link">Number</a>
</li>
<li>
<a id="String-menu-item" href="#String" class="nav-link">String</a>
</li>
<li>
<a id="Array-menu-item" href="#Array" class="nav-link">Array</a>
</li>
<li>
<a id="Tuple-menu-item" href="#Tuple" class="nav-link">Tuple</a>
</li>
<li>
<a id="Enum-menu-item" href="#Enum" class="nav-link">Enum</a>
</li>
<li>
<a id="Any-menu-item" href="#Any" class="nav-link">Any</a>
</li>
<li>
<a id="Void-menu-item" href="#Void" class="nav-link">Void</a>
</li>
<li>
<a id="Null_and_Undefined-menu-item" href="#Null_and_Undefined" class="nav-link">Null and Undefined</a>
</li>
<li>
<a id="Never-menu-item" href="#Never" class="nav-link">Never</a>
</li>
<li>
<a id="Object-menu-item" href="#Object" class="nav-link">Object</a>
</li>
<li>
<a id="Type_assertions-menu-item" href="#Type_assertions" class="nav-link">Type assertions</a>
</li>
<li>
<a id="A_note_about_‘let’-menu-item" href="#A_note_about_‘let’" class="nav-link">A note about ‘let’</a>
</li>
</ul>
</div>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>
<h2>Introduction</h2>
</header>
<div>
<blockquote>
This is a <b>FreeCodeCamp Project</b> made by <i style="white-space: nowrap;">Angelo
Annunziata</i>.<br>For official TypeScript documentation click <a
href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank"
rel="noopener">here</a>
</blockquote>
<p>
For programs to be useful, we need to be able to work with some of the simplest units of data:
numbers, strings, structures, boolean values, and the like. In TypeScript, we support much the
same
types as you would expect in JavaScript, with a convenient enumeration type thrown in to help
things
along.
</p>
</div>
</section>
<section class="main-section" id="Boolean">
<header>
<h2>Boolean</h2>
</header>
<div>
<p>
The most basic datatype is the simple true/false value, which JavaScript and TypeScript call a
<span class="keyword">boolean</span> value.
</p>
<code>
<span class="token key-word">let </span><span class="token function-variable function">isDone</span><span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
</code>
</div>
</section>
<section class="main-section" id="Number">
<header>
<h2>Number</h2>
</header>
<div>
<p>
As in JavaScript, all numbers in TypeScript are floating point values. These floating point
numbers
get the type <span class="keyword">number</span>. In addition to hexadecimal and decimal
literals,
TypeScript also supports
binary and octal literals introduced in ECMAScript 2015.
</p>
<code>
<span class="token key-word">let</span> <span class="token function-variable function">decimal</span><span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span><br>
<span class="token key-word">let</span> <span class="token function-variable function">hex</span><span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token">0xf00d</span><span class="token punctuation">;</span><br>
<span class="token key-word">let</span> <span class="token function-variable function">
binary
</span><span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token">0b1010</span><span class="token punctuation">;</span><br>
<span class="token key-word">let</span> <span class="token function-variable function">octal</span><span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token">0o744</span><span class="token punctuation">;</span>
</code>
</div>
</section>
<section class="main-section" id="String">
<header>
<h2>String</h2>
</header>
<div>
<p>
Another fundamental part of creating programs in JavaScript for webpages and servers alike is
working with textual data. As in other languages, we use the type <span
class="keyword">string</span> to refer to these textual
datatypes. Just like JavaScript, TypeScript also uses double quotes <span
class="keyword">"</span>
or single quotes <span class="keyword">'</span> to
surround string data.
</p>
<code>
<span class="token key-word">let</span> color<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string"><span class="token punctuation">"</span>blue</span><span class="token punctuation">";</span></span><br>
color <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
</code>
<p>
You can also use template strings, which can span multiple lines and have embedded expressions.
These strings are surrounded by the backtick/backquote <span class="keyword">`</span> character,
and
embedded expressions are
of the form <span class="keyword">${ expr }</span>.
</p>
<code>
<span class="token key-word">let</span> fullName<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string"><span class="token punctuation">`</span>Bob Bobbington</span><span class="token punctuation">`;</span><br>
<span class="token key-word">let</span> age<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">37</span><span class="token punctuation">;</span><br>
<span class="token key-word">let</span> sentence<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string"><span class="token punctuation">`</span>Hello, my name is ${ fullName }.<br><br>
I'll be ${ age + <span class="token number">1</span> } years old next month.</span><span class="token punctuation">`;</span>
</code>
<p>
This is equivalent to declaring <span class="keyword">sentence</span> like so:
</p>
<code>
<span class="token key-word">let</span> sentence<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string"><span class="token punctuation">"</span>Hello, my name is "</span> <span class="token punctuation">+</span> fullName <span class="token punctuation">+</span> <span class="token string"><span class="token punctuation">"</span>.\n\n<span class="token punctuation">"</span></span> <span class="token punctuation">+</span>
<span class="token string"><span class="token punctuation">"</span>I'll be <span class="token punctuation">"</span></span> <span class="token punctuation">+ (</span>age <span class="token punctuation">+</span> <span class="token number">1</span><span class="token punctuation">) +</span> <span class="token string"><span class="token punctuation">"</span> years old next month.</span><span class="token punctuation">";</span>
</code>
</div>
</section>
<section class="main-section" id="Array">
<header>
<h2>Array</h2>
</header>
<div>
<p>
TypeScript, like JavaScript, allows you to work with arrays of values. Array types can be
written in
one of two ways. In the first, you use the type of the elements followed by <span
class="keyword">[]</span> to denote an array of
that element type:
</p>
<code><span class="token key-word">let</span> list<span class="token punctuation">:</span> number<span class="token punctuation">[]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span>, <span class="token number">2</span>, <span class="token number">3</span><span class="token punctuation">];</span></code>
<p>
The second way uses a generic array type, <span class="keyword">Array<elemType></span>:
</p>
<code><span class="token key-word">let</span> list<span class="token punctuation">:</span> Array<number> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">];</span></code>
</p>
</div>
</section>
<section class="main-section" id="Tuple">
<header>
<h2>Tuple</h2>
</header>
<div>
<p>
Tuple types allow you to express an array with a fixed number of elements whose types are known,
but
need not be the same. For example, you may want to represent a value as a pair of a <span
class="keyword">string</span> and a
<span class="keyword">number</span>:
</p>
<code><span class="token comment">// Declare a tuple type</span><br>
<span class="token key-word">let</span> x<span class="token punctuation">: [</span>string, number<span class="token punctuation">];</span><br><br>
<span class="token comment">// Initialize it</span><br>
x <span class="token operator">=</span><span class="token punctuation">[</span><span class="token string">"hello"</span>, <span class="token number">10</span><span class="token punctuation">];</span> // OK<br><br>
<span class="token comment">// Initialize it incorrectly</span><br>
x <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,"</span><span class="token string">hello</span><span class="token punctuation">"];</span> <span class="token comment">// Error</span></code>
<p>
When accessing an element with a known index, the correct type is retrieved:
</p>
<code>
console<span class="token punctuation">.</span><span class="token function">log<span class="token punctuation">(</span></span>x<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">].</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">))</span><span class="token punctuation">;</span> <span class="token comment">// OK</span><br><br>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">].</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">))</span><span class="token punctuation">;</span> <span class="token comment">// Error, 'number' does not have 'substring'</span>
</code>
<p>
Accessing an element outside the set of known indices fails with an error:
</p>
<code>
x<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string"><span class="token punctuation">"</span>world</span><span class="token punctuation">";</span> <span class="token comment">// Error, Property '3' does not exist on type '[string, number]'.</span><br><br>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>x<span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">());</span> <span class="token comment">// Error, Property '5' does not exist on type '[string, number]'.</span>
</code>
</div>
</section>
<section class="main-section" id="Enum">
<header>
<h2>Enum</h2>
</header>
<div>
<p>
A helpful addition to the standard set of datatypes from JavaScript is the <span
class="keyword">enum</span>. As in languages
like C#, an enum is a way of giving more friendly names to sets of numeric values.
</p>
<code>
<span class="token key-word">enum</span> <span class="token function">Color</span> <span class="token punctuation">{</span><br> Red<span class="token punctuation">,</span><br> Green<span class="token punctuation">,</span><br> Blue<span class="token punctuation"><br>}</span><br><br>
<span class="token key-word">let</span> c<span class="token punctuation">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span><span class="token function">Green</span><span class="token punctuation">;</span>
</code>
<p>
By default, enums begin numbering their members starting at <span class="keyword">0</span>. You
can
change this by manually
setting the value of one of its members. For example, we can start the previous example at <span
class="keyword">1</span> instead
of <span class="keyword">0</span>:
</p>
<code>
<span class="token key-word">enum</span> <span class="token function">Color</span> <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green<span class="token punctuation">,</span> Blue<span class="token punctuation">}</span><br>
<span class="token key-word">let</span> c<span class="token punctuation">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span><span class="token function">Green</span><span class="token punctuation">;</span>
</code>
<p>
Or, even manually set all the values in the enum:
</p>
<code>
<span class="token key-word">enum</span> Color <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">,</span> Blue <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">}</span><br><br>
<span class="token key-word">let</span> c<span class="token punctuation">:</span> Color <span class="token operator">=</span> Color<span class="token punctuation">.</span><span class="token function">Green</span><span class="token punctuation">;</span>
</code>
<p>
A handy feature of enums is that you can also go from a numeric value to the name of that value
in
the
enum. For example, if we had the value <span class="keyword">2</span> but weren’t sure what that
mapped to in the <span class="keyword">Color</span> enum
above,
we could look up the corresponding name:
</p>
<code>
<span class="token key-word">enum</span> Color <span class="token punctuation">{</span>Red <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">,</span> Green<span class="token punctuation">,</span> Blue<span class="token punctuation">}</span><br><br>
<span class="token key-word">let</span> colorName: string <span class="token operator">=</span> Color<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">];</span><br>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>colorName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Displays 'Green' as its value is 2 above</span>
</code>
</div>
</section>
<section class="main-section" id="Any">
<header>
<h2>Any</h2>
</header>
<div>
<p>
We may need to describe the type of variables that we do not know when we are writing an
application.
These values may come from dynamic content, e.g. from the user or a 3rd party library. In these
cases, we want to opt-out of type checking and let the values pass through compile-time checks.
To
do so, we label these with the <span class="keyword">any</span> type:
</p>
<code>
<span class="token key-word">let</span> notSure<span class="token punctuation">:</span> any <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span><br>
notSure <span class="token operator">=</span> <span class="token string"><span class="token punctuation">"</span>maybe a string instead</span><span class="token punctuation">";</span><br>
notSure <span class="token punctuation">=</span> false<span class="token punctuation">;</span> <span class="token comment">// okay, definitely a boolean</span>
</code>
<p>
The <span class="keyword">any</span> type is a powerful way to work with existing JavaScript,
allowing you to gradually opt-in
and opt-out of type checking during compilation. You might expect <span
class="keyword">Object</span> to play a similar role, as
it
does in other languages. However, variables of type <span class="keyword">Object</span> only
allow
you to assign any value to
them.
You can’t call arbitrary methods on them, even ones that actually exist:
</p>
<code>
<span class="token key-word">let</span> notSure<span class="token punctuation">:</span> any <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span><br>
notSure<span class="token punctuation">.</span><span class="token function">ifItExists</span><span class="token punctuation">();</span> <span class="token comment">// okay, ifItExists might exist at runtime</span><br><br>
notSure<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">();</span> <span class="token comment">// okay, toFixed exists (but the compiler doesn't check)</span><br><br>
<span class="token key-word">let</span> prettySure<span class="token punctuation">:</span> Object <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span><br>
prettySure<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">();</span> <span class="token comment">// Error: Property 'toFixed' doesn't exist on type 'Object'.</span><br>
</code>
<blockquote>Note: Avoid using <span class="keyword">Object</span> in favor of the non-primitive
<span class="keyword">object</span> type as described in our Do’s and
Don’ts
section.</blockquote>
<p>
The <span class="keyword">any</span> type is also handy if you know some part of the type, but
perhaps not all of it. For
example, you may have an array but the array has a mix of different types:
</p>
<code>
<span class="token key-word">let</span> list<span class="token punctuation">:</span> any<span class="token punctuation">[]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> true<span class="token punctuation">,</span> <span class="token string">"free"</span><span class="token punctuation">];</span><br>
list<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
</code>
</div>
</section>
<section class="main-section" id="Void">
<header>
<h2>Void</h2>
</header>
<div>
<p>
<span class="keyword">void</span> is a little like the opposite of <span
class="keyword">any</span>:
the absence of having any type at all. You may commonly
see
this as the return type of functions that do not return a value:
</p>
<code>
function <span class="token function">warnUser</span>()<span class="token punctuation">:</span> void <span class="token punctuation">{</span><br>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string"><span class="token punctuation">"</span>This is my warning message</span><span class="token punctuation">");</span><br>
<span class="token punctuation">}</span>
</code>
<p>Declaring variables of type <span class="keyword">void</span> is not useful because you can only
assign <span class="keyword">null</span> (only if
<span class="keyword">--strictNullChecks</span> is not specified, see next section) or <span
class="keyword">undefined</span> to them:</p>
<code>
<span class="token key-word">let</span> unusable<span class="token punctuation">:</span> void <span class="token operator">=</span> undefined<span class="token punctuation">;</span><br>
unusable <span class="token operator">=</span> null<span class="token punctuation">;</span> <span class="token comment">// OK if `--strictNullChecks` is not given</span>
</code>
</div>
</section>
<section class="main-section" id="Null_and_Undefined">
<header>
<h2>Null and Undefined</h2>
</header>
<div>
<p>
In TypeScript, both <span class="keyword">undefined</span> and <span class="keyword">null</span>
actually have their own types named <span class="keyword">undefined</span> and <span
class="keyword">null</span>
respectively. Much like <span class="keyword">void</span>, they’re not extremely useful on their
own:
</p>
<code><span class="token comment">// Not much else we can assign to these variables!<br></span>
<span class="token key-word">let</span> u<span class="token punctuation">:</span> undefined <span class="token operator">=</span> undefined<span class="token punctuation">;</span><br>
<span class="token key-word">let</span> n<span class="token punctuation">:</span> null <span class="token operator">=</span> null<span class="token punctuation">;</span></code>
<p>
By default <span class="keyword">null</span> and <span class="keyword">undefined</span> are
subtypes
of all other types. That means you can assign <span class="keyword">null</span> and
<span class="keyword">undefined</span> to something like <span class="keyword">number</span>.
</p>
<p>
However, when using the <span class="keyword">--strictNullChecks</span> flag, <span
class="keyword">null</span> and <span class="keyword">undefined</span> are only assignable
to
<span class="keyword">any</span> and
their respective types (the one exception being that <span class="keyword">undefined</span> is
also
assignable to <span class="keyword">void</span>). This
helps avoid many common errors. In cases where you want to pass in either a <span
class="keyword">string</span> or <span class="keyword">null</span> or
<span class="keyword">undefined</span>, you can use the union type <span class="keyword">string
|
null | undefined</span>.
</p>
<p>
Union types are an advanced topic that we’ll cover in a later chapter.
</p>
<blockquote>As a note: we encourage the use of <span class="keyword">--strictNullChecks</span> when
possible, but for the purposes of this
handbook, we will assume it is turned off.</blockquote>
</div>
</section>
<section class="main-section" id="Never">
<header>
<h2>Never</h2>
</header>
<div>
<p>
The never type represents the type of values that never occur. For instance, never is the return
type for a function expression or an arrow function expression that always throws an exception
or
one that never returns; Variables also acquire the type never when narrowed by any type guards
that
can never be true.
</p>
<p>
The never type is a subtype of, and assignable to, every type; however, no type is a subtype of,
or
assignable to, never (except never itself). Even any isn’t assignable to never.
</p>
<p>
Some examples of functions returning never:
</p>
<code>
<span class="token comment">// Function returning never must have unreachable end point</span><br>
<span class="token key-word">function</span> <span class="token function">error</span><span class="token punctuation">(</span>message<span class="token punctuation">:</span> string<span class="token punctuation">):</span> never <span class="token punctuation">{</span><br>
<span class="token key-word">throw</span> new Error<span class="token punctuation">(</span>message<span class="token punctuation">);</span><br>
<span class="token punctuation">}</span><br><br>
<span class="token comment">// Inferred return type is never </span><br>
<span class="token key-word">function</span> <span class="token function">fail</span><span class="token punctuation">() {</span><br>
<span class="token key-word">return</span> error<span class="token punctuation">(</span><span class="token string">"Something failed"</span><span class="token punctuation">);</span><br>
<span class="token punctuation">}</span><br><br>
<span class="token comment">// Function returning never must have unreachable end point</span><br>
<span class="token key-word">function</span> <span class="token function">infiniteLoop</span><span class="token punctuation">():</span> never <span class="token punctuation">{</span><br>
<span class="token key-word">while</span> <span class="token punctuation">(</span>true<span class="token punctuation">) {</span><br>
<span class="token punctuation">}</span><br>
<span class="token punctuation">}</span>
</code>
</div>
</section>
<section class="main-section" id="Object">
<header>
<h2>Object</h2>
</header>
<div>
<p>object is a type that represents the non-primitive type, i.e. anything that is not:</p>
<ul>
<li>number</li>
<li>string</li>
<li>boolean</li>
<li>symbol</li>
<li>null</li>
<li>undefined</li>
</ul>
<p>
With object type, APIs like Object.create can be better represented. For example:
</p>
<code>
declare <span class="token key-word">function</span> <span class="token function">create</span>(o: object | null): void;<br><br>
<span class="token function">create</span><span class="token punctuation">({</span> prop<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">});</span> <span class="token comment">// OK</span> <br>
<span class="token function">create</span><span class="token punctuation">(</span>null<span class="token punctuation">);</span> <span class="token comment">// OK</span> <br><br>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token number">42</span><span class="token punctuation">);</span> <span class="token comment">// Error</span> <br>
<span class="token function">create</span><span class="token punctuation">(</span><span class="token string"><span class="token punctuation">"</span>string<span class="token punctuation">"</span></span>)<span class="token punctuation">;</span> <span class="token comment">// Error</span> <br>
<span class="token function">create</span><span class="token punctuation">(</span>false<span class="token punctuation">);</span> <span class="token comment">// Error</span> <br>
<span class="token function">create</span><span class="token punctuation">(</span>undefined<span class="token punctuation">);</span> <span class="token comment">// Error</span>
</code>
</div>
</section>
<section class="main-section" id="Type_assertions">
<header>
<h2>Type assertions</h2>
</header>
<div>
<p>
Sometimes you’ll end up in a situation where you’ll know more about a value than TypeScript
does.
Usually this will happen when you know the type of some entity could be more specific than its
current type.
</p>
<p>
Type assertions are a way to tell the compiler “trust me, I know what I’m doing.” A type
assertion
is like a type cast in other languages, but performs no special checking or restructuring of
data.
It has no runtime impact, and is used purely by the compiler. TypeScript assumes that you, the
programmer, have performed any special checks that you need.
</p>
<p>
Type assertions have two forms. One is the “angle-bracket” syntax:
</p>
<code><span class="token key-word">let</span> someValue<span class="token punctuation">:</span> any <span class="token operator">=</span> <span class="token string"><span class="token punctuation">"</span>this is a string</span><span class="token punctuation">";</span><br><br>
<span class="token key-word">let</span> strLength<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token punctuation">(</span><string>someValue<span class="token punctuation">).</span><span class="token function">length</span><span class="token punctuation">;</span></code><br>
<p>
And the other is the as-syntax:
</p>
<code>
<span class="token key-word">let</span> someValue<span class="token punctuation">:</span> any <span class="token operator">=</span><span class="token punctuation">"</span><span class="token string">this is a string</span><span class="token punctuation">";</span><br><br>
<span class="token key-word">let</span> strLength<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token punctuation">(</span>someValue as string<span class="token punctuation">).</span><span class="token function">length</span><span class="token punctuation">;</span>
</code>
<p>
The two samples are equivalent. Using one over the other is mostly a choice of preference;
however,
when using TypeScript with JSX, only as-style assertions are allowed.
</p>
</div>
</section>
<section class="main-section" id="A_note_about_‘let’">
<header>
<h2>A note about ‘let’</h2>
</header>
<div>
<p>
You may’ve noticed that so far, we’ve been using the let keyword instead of JavaScript’s var
keyword
which you might be more familiar with. The let keyword was introduced to JavaScript in ES2015
and is
now considered the standard because it’s safer than var. We’ll discuss the details later, but
many
common problems in JavaScript are alleviated by using let, so you should use it instead of var
whenever possible.
</p>
</div>
</section>
</main>
</div>
<div class="bottom-menu">
<div class="bottom-bar page-wrapper">
<a class="bottom-bar_btn" href="https://www.freecodecamp.org/ing.annunziata" target="_blank" rel="noopener">
<svg class="fa-freecodecamp" width="36" height="36" viewBox="0 -5 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M4.33125 10.1602C1.76875 14.9766 2.05625 21.6211 4.39375 26.1211C5.78125 28.807 7.5 29.8055 7.5 30.7969C7.5 31.275 7.125 31.7109 6.7 31.7109C5.48125 31.7109 0.5 26.4023 0.5 17.8031C0.5 9.96328 5.375 4.725 6.56875 4.725C6.94375 4.725 7.5 5.0625 7.5 5.50547C7.5 6.39844 5.73125 7.51641 4.33125 10.1602ZM16.5687 25.193C16.85 25.3195 17.3375 25.5586 17.3375 25.1086C17.3375 24.9188 17.2 24.9047 17.0687 24.8555C16.5375 24.6164 16.1937 24.3141 15.875 23.7867C15.3625 22.9359 15.2437 22.0852 15.2437 21.0727C15.2437 18.8156 18.0062 18.4078 18.0062 16.1508C18.0062 15.2859 17.525 15.0328 17.525 14.7937C17.525 14.6391 17.5687 14.6391 17.7062 14.6391C18.2062 14.6391 18.9 15.5742 19.1125 16.0312C19.25 16.3547 19.2625 16.4531 19.2625 16.8117C19.2625 17.3039 19.2187 17.8102 19.2187 18.3094C19.2187 20.2078 21.2125 19.7016 21.2125 18.7875C21.2125 18.3656 20.9875 17.9719 20.9875 17.5641C20.9875 17.5148 20.9875 17.4797 21.0312 17.4797C21.2437 17.4797 21.6187 18.0211 21.725 18.1898C22.0875 18.8156 22.2562 19.6523 22.2562 20.3977C22.2562 22.6758 20.4125 23.843 20.4125 24.3352C20.4125 24.4055 20.5937 24.8766 21.1687 24.4688C23.025 23.407 24.4875 21.1219 24.4875 18.1547C24.4875 15.7922 23.9437 14.0977 22.4812 12.3469C22.2375 12.0586 21.4562 11.1586 21.075 11.1586C20.5625 11.1586 21.525 12.4664 21.525 13.3523C21.525 13.8586 21.225 14.2172 20.7562 14.2172C20.0312 14.2172 19.85 12.4312 19.7625 11.8758C19.4 9.49922 18.9625 7.78359 16.8625 6.66563C16.2125 6.31406 14.5812 5.83594 14.5812 6.51094C14.5812 6.67969 14.75 6.79922 14.8687 6.86953C15.4437 7.26328 16.0937 8.37422 16.0937 9.55547C16.0937 12.7969 12.4875 15.757 12.4875 19.132C12.475 21.9656 14.2437 24.2367 16.5687 25.193V25.193ZM29.4 4.71094C29.025 4.71094 28.5 5.16797 28.5 5.59687C28.5 6.20859 29.2562 6.975 29.6 7.38281C34.7 13.3664 34.5125 22.4508 30.7 27.8438C30.2625 28.4695 28.4937 30.3258 28.4937 30.9023C28.4937 31.2609 29.0062 31.7039 29.3187 31.7039C30.9062 31.7039 35.4937 26.0227 35.4937 18.6469C35.5 10.2586 30.7375 4.71094 29.4 4.71094ZM26.7562 27.4289H10.4375C9.85 27.4289 9.46875 27.9563 9.46875 28.582C9.46875 29.1797 9.90625 29.6719 10.4375 29.6719H26.7562C27.3437 29.6719 27.5 29.1445 27.5 28.5188C27.5 27.9211 27.2812 27.4289 26.7562 27.4289V27.4289Z" />
</svg>
</a>
<a href="https://github.com/ild0tt0re" target="_blank" rel="noopener" class="bottom-bar_btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
</path>
</svg>
</a>
<button id="switch-theme" class="bottom-bar_btn" aria-label="Switch theme mode" title="Switch theme mode">
<svg id="night-theme-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="light-theme-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
<a id="menu-link" href="#Table_of_Contents" class="bottom-bar_btn">
<svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3" y2="6"></line>
<line x1="3" y1="12" x2="3" y2="12"></line>
<line x1="3" y1="18" x2="3" y2="18"></line>
</svg>
</a>
<a id="top-arrow" href="#top-page" class="bottom-bar_btn">
<svg id="top-arrow-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9.67356 21C9.06488 21 8.57143 20.5682 8.57143 20.0357V11.9996H2.3047C1.923 11.9996 1.73175 11.5959 2.00148 11.3596L11.2202 3.28288C11.6507 2.90572 12.3493 2.90568 12.7798 3.28288L21.9986 11.3596C22.2683 11.5959 22.077 11.9996 21.6954 11.9996H15.4286V20.0357C15.4286 20.5683 14.9351 21 14.3265 21H9.67356V21ZM9.67356 22.5H14.3265C15.8794 22.5 17.1429 21.3945 17.1429 20.0357V13.4996H21.6953C23.5975 13.4996 24.5612 11.4821 23.2115 10.2996L13.9928 2.2229C12.8919 1.2584 11.1084 1.25821 10.0073 2.2229L0.788517 10.2996C-0.555645 11.4771 0.394713 13.4995 2.3047 13.4995H6.85714V20.0356C6.85714 21.3945 8.12057 22.5 9.67356 22.5V22.5Z" />
</svg>
</a>
</div>
</div>
<!-- Scripts JS -->
<script defer src="./src/main.js"></script>
<script defer src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>