-
Notifications
You must be signed in to change notification settings - Fork 1
/
typescript.html
1803 lines (1544 loc) · 84.1 KB
/
typescript.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
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="assets/img/mainlogo.jpg" type="image/x-icon">
<title>Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/prismjs/prism.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="myDesigns/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic">
<link rel="stylesheet" href="myDesigns/assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="myDesigns/assets/fonts/simple-line-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<style>
.scroll-to-top {
background-color: #f77b50 !important;
text-decoration: none !important;
}
.scroll-to-top:hover {
background: #f77b50 !important;
text-decoration: none !important;
}
footer .scroll-to-top {
text-decoration: none !important;
}
.offcanvas {
width: 700px !important; /* Override the default width */
}
</style>
</head>
<body id="page-top">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: rgb(1,4,45);">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">
<img src="assets/img/mainlogo.jpg" alt="" style="height: 7vh;"> Cheatbook
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.php">Home</a>
</li>
<!--frontend -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Frontend
</a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a class="dropdown-item" href="html.php">HTML</a></li>
<li><a class="dropdown-item" href="css.php">CSS</a></li>
<li><a class="dropdown-item"
href="javascript.php">JavaScript</a></li>
<li><a class="dropdown-item"
href="typescript.php">TypeScript</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li class="dropdown-header">JavaScript Frameworks</li>
<li><a class="dropdown-item" href="reactjs.php">Reacjs</a></li>
<li><a class="dropdown-item" href="nextjs.php">Nextjs</a></li>
<li><a class="dropdown-item"
href="angularjs.php">Angularjs</a></li>
<li><a class="dropdown-item" href="remix.php">Remixjs</a></li>
<li><a class="dropdown-item" href="vuejs.php">vuejs</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a class="dropdown-item" href="astrojs.php">Astrojs</a></li>
<li><a class="dropdown-item" href="electronjs.php">electronjs</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li class="dropdown-header">CSS Framework</li>
<li><a class="dropdown-item" href="bootstrap.php">Bootstrap</a></li>
<li><a class="dropdown-item" href="tailwindcss.php">Tailwind css</a></li>
<li><a class="dropdown-item" href="materialui.php">Material UI</a></li>
<li> <hr class="dropdown-divider" /> </li>
<li class="dropdown-header">State Management</li>
<li><a class="dropdown-item" href="redux.php">Redux</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- backend -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Backend
</a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a class="dropdown-item" href="django.php">Django</a></li>
<li><a class="dropdown-item" href="flask.php">Flask</a></li>
<li><a class="dropdown-item" href="fastapi.php">Fastapi</a></li>
<li><a class="dropdown-item" href="expressjs.php">Expressjs</a></li>
<li><a class="dropdown-item" href="nodejs.php">Nodejs</a></li>
<li><a class="dropdown-item" href="php.php">PHP</a></li>
<li><a class="dropdown-item" href="golang.php">GO</a></li>
<li><a class="dropdown-item" href="spring.php">Spring</a></li>
<li><a class="dropdown-item"href="springboot.php">Springboot</a></li>
<li> <hr class="dropdown-divider" /></li>
<li class="dropdown-header">Databases</li>
<li><a class="dropdown-item" href="Sql.php">SQL</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a class="dropdown-item" href="mysql.php">MySQL</a></li>
<li><a class="dropdown-item" href="mongodb.php">MongoDB</a></li>
<li><a class="dropdown-item" href="firebase.php">Firebase</a></li>
<li><a class="dropdown-item" href="cassandra.php">Cassandra</a></li>
<li><a class="dropdown-item" href="redis.php">Redis</a></li>
<li><a class="dropdown-item" href="postgresql.php">PostgreSQL</a></li>
<li><a class="dropdown-item" href="influxdb.php">infixDB</a></li>
<li> <hr class="dropdown-divider" /> </li>
<li class="dropdown-header">Java technologies</li>
<li><a class="dropdown-item" href="hibernet.php">Hibernet</a></li>
<li><a class="dropdown-item" href="jdbc.php">jdbc</a></li>
<li><a class="dropdown-item" href="servlets.php">servlets</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- programming -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Programming
</a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a class="dropdown-item" href="cplus.php">C++</a></li>
<li><a class="dropdown-item" href="c.php">C</a></li>
<li><a class="dropdown-item" href="java.php">Java</a></li>
<li><a class="dropdown-item" href="python.php">Python</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Data structure</li>
<li><a class="dropdown-item" href="dsa.php">DSA</a></li>
</ul>
</div>
</div>
</ul>
</li>
<!-- databases -->
<li class="nav-item dropdown mx-1">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Design
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="figma.php">Figma</a></li>
<li><a class="dropdown-item" href="adobexd.php">AdobeXD</a></li>
</ul>
</li>
<!-- API & Authentication -->
<li class="nav-item dropdown mx-1">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
API & Auth
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="restfulapi.php">RESTful API</a></li>
<li><a class="dropdown-item" href="graphql.php">GraphQL</a></li>
<li><a class="dropdown-item" href="jwtauth.php">JWT Auth</a></li>
<li><a class="dropdown-item" href="apollo.php">Apollo</a></li>
</ul>
</li>
<!-- testing -->
<li class="nav-item dropdown mx-1">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Testing
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="jest.php">Jest</a></li>
</ul>
</li>
<!-- cloud services -->
<li class="nav-item dropdown mx-1">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Cloud
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="aws.php">AWS</a></li>
<li><a class="dropdown-item" href="azure.php">Azure</a></li>
<li><a class="dropdown-item" href="googlecloud.php">Google Cloud</a></li>
<li><a class="dropdown-item" href="cloudflare.php">Cloudflare</a></li>
</ul>
</li>
<!-- Mobile Development-->
<li class="nav-item dropdown mx-1">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Mobile Dev
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="android.php">Android</a></li>
<li><a class="dropdown-item" href="kotlin.php">Kotlin</a></li>
<li><a class="dropdown-item" href="reactnative.php">React Native</a></li>
<li><a class="dropdown-item" href="flutter.php">Flutter</a></li>
</ul>
</li>
<!-- Devops -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Devops
</a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">CI/CD</li>
<li><a class="dropdown-item" href="docker.php">Docker</a></li>
<li><a class="dropdown-item" href="jenkins.php">jenkins</a></li>
<li><a class="dropdown-item" href="kubernetes.php">kubernetes</a></li>
<li><a class="dropdown-item" href="maven.php">Maven</a></li>
<li><a class="dropdown-item" href="git.php">Git</a> </li>
<li><a class="dropdown-item" href="github_action.php">Github Actions</a></li>
<li><a class="dropdown-item" href="Terraform.php">Terraform</a></li>
<li><a class="dropdown-item" href="ansible.php">Ansible</a></li>
<li><hr class="dropdown-divider" /></li>
<li class="dropdown-header">Web Servers</li>
<li><a class="dropdown-item" href="languages/devops/nginx.php">Nginx</a>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<hr class="dropdown-divider" />
</li>
<li class="dropdown-header">Operating System</li>
<li><a class="dropdown-item" href="windows.php">Windows</a>
</li>
<li><a class="dropdown-item" href="linux.php">Linux</a>
</li>
<li><a class="dropdown-item" href="macos.php">Macos</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li class="dropdown-header">Scripting</li>
<li><a class="dropdown-item" href="bashscript.php">Bash Scripting</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li class="dropdown-header">Monitoring</li>
<li><a class="dropdown-item" href="monit.php">Monit</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Tools
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="tools/shadowpicker/index.html">Shadow Picker</a></li>
<li><a class="dropdown-item" href="tools/readmemaker/index.html">Github Project Readme</a>
</li>
<li><a class="dropdown-item" href="tools/profilereadme/index.html">Github Profile Readme</a>
</li>
<li><a class="dropdown-item" href="tools/gradientcolorpicker.html">Gradient Colour
Picker</a></li>
<li><a class="dropdown-item" href="tools/colourbook/colorpiceker.html">Colour Picker</a>
</li>
<li><a class="dropdown-item" href="tools/codereview/index.html">Simple Code Editor</a> </li>
<li><a class="dropdown-item" href="tools/banner/index.html">Banner Maker</a> </li>
<li><a class="dropdown-item" href="tools/logomaker/index.html">Logo & Favicon Maker</a>
</li>
<li><a class="dropdown-item" href="tools/paraiso-colors-main/index.html">colour plates</a>
</li>
</ul>
</li>
</ul>
<a href="myDesigns/index.html">
<div class="button btn1 mx-1" style="font-size: 1em;">My Designs</div>
</a>
</div>
</div>
</nav> <!-- mid part -->
<nav class="mt-5 p-2 headline" style="background:linear-gradient(to top right, #fb5475 0%, #f77b50 59%);">
<div class="text-center " style="margin-top:5vh;"><img style="margin-right:2vh;" src="../../assets/img/typescript.svg" alt="" /> Typescript cheatsheet
</div>
</nav>
<div class="container">
<div class="p-5 mb-4 bg-light rounded-3 jumbo mt-2">
<div class="container-fluid py-3">
<h1 class="display-5 fw-bold">Typescript</h1>
<div class="row">
<div class="col-md-6">
<p class="fs-4">
TypeScript is typed JavaScript. TypeScript adds types to JavaScript to help you speed up the development by catching errors before you even run the JavaScript code.
<br/>
TypeScript is an open-source programming language that builds on top of JavaScript. It works on any web browser, any OS, and any environment that JavaScript runs.
</p>
</div>
<div class="col-md-6 text-center">
<img src="../../assets/img/typescript.svg" alt="" style="height:100%;" />
</div>
</div>
<button class="btn btn1" type="button" data-bs-toggle="offcanvas" data-bs-target="#o1" aria-controls="o1">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o1" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
Typescript
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
<p><strong>What is TypeScript?</strong></p>
<p>TypeScript is a syntactic superset of JavaScript which adds static typing.</p>
<p>This basically means that TypeScript adds syntax on top of JavaScript, allowing developers to add types.</p>
<br /> <br />
<p><strong>Why should I use TypeScript?</strong></p>
<p>JavaScript is a loosely typed language. It can be difficult to understand what types of data are being passed around in JavaScript.</p>
<p>In JavaScript, function parameters and variables don't have any information! So developers need to look at documentation, or guess based on the implementation.</p>
<p>TypeScript allows specifying the types of data being passed around within the code, and has the ability to report errors when the types don't match.</p>
<p>For example, TypeScript will report an error when passing a string into a function that expects a number. JavaScript will not.</p>
<p>TypeScript uses compile time type checking. Which means it checks if the specified types match before running the code, not while running the code.</p>
<br /> <br />
<p><strong>TypeScript Compiler</strong></p>
<p>TypeScript is transpiled into JavaScript using a compiler.</p>
</p>
</div>
</div>
</div>
</div>
<ol>
<!-- offcanvas -->
<li>
TypeScript Simple Types<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o2" aria-controls="o2">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o2" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Simple Types
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Simple Types</strong></p>
<p>TypeScript supports some simple types (primitives) you may know.</p>
<p>There are three main primitives in JavaScript and TypeScript:</p>
<ul>
<li><strong>boolean</strong> - true or false values</li>
<li><strong>number</strong> - whole numbers and floating point values</li>
<li><strong>string</strong> - text values like "TypeScript Rocks"</li>
</ul>
<p>There are also 2 less common primitives used in later versions of JavaScript and TypeScript:</p>
<ul>
<li><strong>bigint</strong> - whole numbers and floating point values, but allows larger negative and positive numbers than the number type.</li>
<li><strong>symbol</strong> - used to create a globally unique identifier.</li>
</ul>
<br /> <br />
<p><strong>Type Assignment</strong></p>
<p>When creating a variable, there are two main ways TypeScript assigns a type:</p>
<ul>
<li><strong>Explicit</strong></li>
<li><strong>Implicit</strong></li>
</ul>
<p>In both examples below, <code>firstName</code> is of type string:</p>
<p><strong>Explicit Type</strong></p>
<p>Explicit - writing out the type:</p>
<pre class="language-Typescript">
<code>let firstName: string = "Dylan";</code></pre>
<p>Explicit type assignments are easier to read and more intentional.</p>
<br /> <br />
<p><strong>Implicit Type</strong></p>
<p>Implicit - TypeScript will "guess" the type, based on the assigned value:</p>
<pre class="language-Typescript">
<code>let firstName = "Dylan";</code></pre>
<p>Note: Having TypeScript "guess" the type of a value is called inference.</p>
<p>Implicit assignment forces TypeScript to infer the value.</p>
<p>Implicit type assignments are shorter, faster to type, and often used when developing and testing.</p>
<br /> <br />
<p><strong>Error In Type Assignment</strong></p>
<p>TypeScript will throw an error if data types do not match.</p>
<p>Example:</p>
<pre class="language-Typescript">
<code>let firstName: string = "Dylan"; // type string
firstName = 33; // attempts to re-assign the value to a different type</code></pre>
<p>Implicit type assignment would have made <code>firstName</code> less noticeable as a string, but both will throw an error:</p>
<p>Example:</p>
<pre class="language-Typescript">
<code>let firstName = "Dylan"; // inferred to type string
firstName = 33; // attempts to re-assign the value to a different type</code></pre>
<p>JavaScript will not throw an error for mismatched types.</p>
<br /> <br />
<p><strong>Unable to Infer</strong></p>
<p>TypeScript may not always properly infer what the type of a variable may be. In such cases, it will set the type to <code>any</code> which disables type checking.</p>
<p>Example:</p>
<pre class="language-Typescript">
<code>// Implicit any as JSON.parse doesn't know what type of data it returns so it can be "any" thing...
const json = JSON.parse("55");
// Most expect json to be an object, but it can be a string or a number like this example
console.log(typeof json);</code></pre>
<p>This behavior can be disabled by enabling <code>noImplicitAny</code> as an option in a TypeScript project's <code>tsconfig.json</code>. That is a JSON config file for customizing how some of TypeScript behaves.</p>
</div>
</div>
</li>
<li>
TypeScript Special Types<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o22" aria-controls="o22">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o22" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Special Types
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Special Types</strong></p>
<p><strong>Type: any</strong></p>
<pre class="language-Typescript"><code>any</code></pre>
<p><code>any</code> is a type that disables type checking and effectively allows all types to be used.</p>
<p>The example below does not use <code>any</code> and will throw an error:</p>
<pre class="language-Typescript"><code>let u = true;
u = "string"; // Error: Type 'string' is not assignable to type 'boolean'.
Math.round(u); // Error: Argument of type 'boolean' is not assignable to parameter of type 'number'.</code></pre>
<p>Setting <code>any</code> to the special type <code>any</code> disables type checking:</p>
<pre class="language-Typescript"><code>let v: any = true;
v = "string"; // no error as it can be "any" type
Math.round(v); // no error as it can be "any" type</code></pre>
<p><code>any</code> can be a useful way to get past errors since it disables type checking, but TypeScript will not be able to provide type safety, and tools which rely on type data, such as auto completion, will not work. Remember, it should be avoided at "any" cost...</p>
<p><strong>Type: unknown</strong></p>
<pre class="language-Typescript"><code>unknown</code></pre>
<p><code>unknown</code> is a similar, but safer alternative to <code>any</code>.</p>
<p>TypeScript will prevent <code>unknown</code> types from being used, as shown in the below example:</p>
<pre class="language-Typescript"><code>let w: unknown = 1;
w = "string"; // no error
w = {
runANonExistentMethod: () => {
console.log("I think therefore I am");
}
} as { runANonExistentMethod: () => void }
// How can we avoid the error for the code commented out below when we don't know the type?
// w.runANonExistentMethod(); // Error: Object is of type 'unknown'.
if(typeof w === 'object' && w !== null) {
(w as { runANonExistentMethod: Function }).runANonExistentMethod();
}</code></pre>
<p><code>unknown</code> is best used when you don't know the type of data being typed. To add a type later, you'll need to cast it.</p>
<p>Casting is when we use the "<code>as</code>" keyword to say property or variable is of the casted type.</p>
<p><strong>Type: never</strong></p>
<pre class="language-Typescript"><code>never</code></pre>
<p><code>never</code> effectively throws an error whenever it is defined.</p>
<pre class="language-Typescript"><code>let x: never = true; // Error: Type 'boolean' is not assignable to type 'never'.</code></pre>
<p><code>never</code> is rarely used, especially by itself; its primary use is in advanced generics.</p>
<p><strong>Type: undefined & null</strong></p>
<pre class="language-Typescript"><code>undefined</code></pre>
<pre class="language-Typescript"><code>null</code></pre>
<p><code>undefined</code> and <code>null</code> are types that refer to the JavaScript primitives <code>undefined</code> and <code>null</code> respectively.</p>
<pre class="language-Typescript"><code>let y: undefined = undefined;
let z: null = null;</code></pre>
<p>These types don't have much use unless <code>strictNullChecks</code> is enabled in the <code>tsconfig.json</code> file.</p>
</div>
</li>
<li>
TypeScript Arrays<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o23" aria-controls="o23">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o23" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Arrays
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Arrays</strong></p>
<p>TypeScript has a specific syntax for typing arrays.</p>
<br /> <br />
<p><strong>Readonly</strong></p>
<p>The <code>readonly</code> keyword can prevent arrays from being changed.</p>
<p><strong>Example</strong></p>
<pre class="language-Typescript"><code>const names: readonly string[] = ["Dylan"];
names.push("Jack"); // Error: Property 'push' does not exist on type 'readonly string[]'.</code></pre>
<p><em>// try removing the readonly modifier and see if it works?</em></p>
<br /> <br />
<p><strong>Type Inference</strong></p>
<p>TypeScript can infer the type of an array if it has values.</p>
<p><strong>Example</strong></p>
<pre class="language-Typescript"><code>const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
// comment line below out to see the successful assignment
numbers.push("2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.
let head: number = numbers[0]; // no error</code></pre>
</div>
</div>
<pre class="language-Typescript"><code>const names: string[] = [];
names.push("Dylan"); // no error
// names.push(3); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.</code></pre>
</li>
<li>
TypeScript Tuples<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o24" aria-controls="o24">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o24" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Tuples
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Tuples</strong></p>
<p><strong>Typed Arrays</strong></p>
<p>A tuple is a typed array with a pre-defined length and types for each index.</p>
<p>Tuples are great because they allow each element in the array to be a known type of value.</p>
<p>To define a tuple, specify the type of each element in the array:</p>
<p>As you can see we have a number, boolean, and a string. But what happens if we try to set them in the wrong order:</p>
<pre class="language-Typescript"><code>// define our tuple
let ourTuple: [number, boolean, string];
// initialized incorrectly which throws an error
ourTuple = [false, 'Coding God was mistaken', 5];</code></pre>
<p>Even though we have a boolean, string, and number the order matters in our tuple and will throw an error.</p>
<br /> <br />
<p><strong>Readonly Tuple</strong></p>
<p>A good practice is to make your tuple readonly.</p>
<p>Tuples only have strongly defined types for the initial values:</p>
<pre class="language-Typescript"><code>// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding God was here'];
// We have no type safety in our tuple for indexes 3+
ourTuple.push('Something new and wrong');
console.log(ourTuple);</code></pre>
<p>You see the new valueTuples only have strongly defined types for the initial values:</p>
<pre class="language-Typescript"><code>// define our readonly tuple
const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'The Real Coding God'];
// throws error as it is readonly.
ourReadonlyTuple.push('Coding God took a day off');</code></pre>
<br /> <br />
<p><strong>Named Tuples</strong></p>
<p>Named tuples allow us to provide context for our values at each index.</p>
<pre class="language-Typescript"><code>const graph: [x: number, y: number] = [55.2, 41.3];</code></pre>
<p>Named tuples provide more context for what our index values represent.</p>
<br /> <br />
<p><strong>Destructuring Tuples</strong></p>
<p>Since tuples are arrays we can also destructure them.</p>
<pre class="language-Typescript"><code>const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;</code></pre>
</div>
</div>
<pre class="language-Typescript"><code>// define our tuple
let ourTuple: [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding God was here'];</code></pre>
</li>
<li>
TypeScript Object Types<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o25" aria-controls="o25">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o25" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Object Types
</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Object Types</strong></p>
<p>TypeScript has a specific syntax for typing objects.</p>
<p>Object types like this can also be written separately, and even be reused, look at interfaces for more details.</p>
<br /> <br />
<p><strong>Type Inference</strong></p>
<p>TypeScript can infer the types of properties based on their values.</p>
<pre class="language-Typescript"><code>const car = {
type: "Toyota",
};
car.type = "Ford"; // no error
car.type = 2; // Error: Type 'number' is not assignable to type 'string'.</code></pre>
<br /> <br />
<p><strong>Optional Properties</strong></p>
<p>Optional properties are properties that don't have to be defined in the object definition.</p>
<p><strong>Example without an optional property</strong></p>
<pre class="language-Typescript"><code>const car: { type: string, mileage: number } = { // Error: Property 'mileage' is missing in type '{ type: string; }' but required in type '{ type: string; mileage: number; }'.
type: "Toyota",
};
car.mileage = 2000;</code></pre>
<p><strong>Example with an optional property</strong></p>
<pre class="language-Typescript"><code>const car: { type: string, mileage?: number } = { // no error
type: "Toyota"
};
car.mileage = 2000;</code></pre>
<br /> <br />
<p><strong>Index Signatures</strong></p>
<p>Index signatures can be used for objects without a defined list of properties.</p>
<pre class="language-Typescript"><code>const nameAgeMap: { [index: string]: number } = {};
nameAgeMap.Jack = 25; // no error
nameAgeMap.Mark = "Fifty"; // Error: Type 'string' is not assignable to type 'number'.</code></pre>
<p>Index signatures like this one can also be expressed with utility types like <code>Record<string, number></code>.</p>
</div>
</div>
<pre class="language-Typescript"><code>const car: { type: string, model: string, year: number } = {
type: "Toyota",
model: "Corolla",
year: 2009
};</code></pre>
</li>
<li>
TypeScript Enums
<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o26" aria-controls="o26">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o26" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Enums </h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Enums</strong></p>
<p>An enum is a special "class" that represents a group of constants (unchangeable variables).</p>
<p>Enums come in two flavors: string and numeric. Let's start with numeric.</p>
<p><strong>Numeric Enums - Default</strong></p>
<p>By default, enums will initialize the first value to 0 and add 1 to each additional value:</p>
<pre class="language-Typescript"><code>enum CardinalDirections {
North,
East,
South,
West
}
let currentDirection = CardinalDirections.North;
// logs 0
console.log(currentDirection);
// throws error as 'North' is not a valid enum
currentDirection = 'North'; // Error: "North" is not assignable to type 'CardinalDirections'.</code></pre>
<br /> <br />
<p><strong>Numeric Enums - Initialized</strong></p>
<p>You can set the value of the first numeric enum and have it auto-increment from that:</p>
<pre class="language-Typescript"><code>enum CardinalDirections {
North = 1,
East,
South,
West
}
// logs 1
console.log(CardinalDirections.North);
// logs 4
console.log(CardinalDirections.West);</code></pre>
<br /> <br />
<p><strong>Numeric Enums - Fully Initialized</strong></p>
<p>You can assign unique number values for each enum value. Then the values will not be incremented automatically:</p>
<pre class="language-Typescript"><code>enum StatusCodes {
NotFound = 404,
Success = 200,
Accepted = 202,
BadRequest = 400
}
// logs 404
console.log(StatusCodes.NotFound);
// logs 200
console.log(StatusCodes.Success);</code></pre>
<br /> <br />
<p><strong>String Enums</strong></p>
<p>Enums can also contain strings. This is more common than numeric enums, because of their readability and intent.</p>
<pre class="language-Typescript"><code>enum CardinalDirections {
North = 'North',
East = 'East',
South = 'South',
West = 'West'
};
// logs "North"
console.log(CardinalDirections.North);
// logs "West"
console.log(CardinalDirections.West);</code></pre>
<p>Technically, you can mix and match string and numeric enum values, but it is recommended not to do so.</p>
</div>
</div>
<pre class="language-Typescript"><code>enum CardinalDirections {
North,
East,
South,
West
}
let currentDirection = CardinalDirections.North;
// logs 0
console.log(currentDirection);
// throws error as 'North' is not a valid enum
currentDirection = 'North'; // Error: "North" is not assignable to type 'CardinalDirections'.</code></pre>
</li>
<li>
TypeScript Type Aliases and Interfaces
<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o27" aria-controls="o27">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o27" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Type Aliases and Interfaces</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Type Aliases and Interfaces</strong></p>
<p>TypeScript allows types to be defined separately from the variables that use them.</p>
<p>Aliases and Interfaces allow types to be easily shared between different variables/objects.</p>
<br /> <br />
<p><strong>Type Aliases</strong></p>
<p>Type Aliases allow defining types with a custom name (an Alias).</p>
<p>Type Aliases can be used for primitives like string or more complex types such as objects and arrays:</p>
<pre class="language-Typescript"><code>type CarYear = number
type CarType = string
type CarModel = string
type Car = {
year: CarYear,
type: CarType,
model: CarModel
}
const carYear: CarYear = 2001
const carType: CarType = "Toyota"
const carModel: CarModel = "Corolla"
const car: Car = {
year: carYear,
type: carType,
model: carModel
};</code></pre>
<br /> <br />
<p><strong>Interfaces</strong></p>
<p>Interfaces are similar to type aliases, except they only apply to object types.</p>
<p><strong>Example</strong></p>
<pre class="language-Typescript"><code>interface Rectangle {
height: number,
width: number
}
const rectangle: Rectangle = {
height: 20,
width: 10
};</code></pre>
<br /> <br />
<p><strong>Extending Interfaces</strong></p>
<p>Interfaces can extend each other's definition.</p>
<p>Extending an interface means you are creating a new interface with the same properties as the original, plus something new.</p>
<p><strong>Example</strong></p>
<pre class="language-Typescript"><code>interface Rectangle {
height: number,
width: number
}
interface ColoredRectangle extends Rectangle {
color: string
}
const coloredRectangle: ColoredRectangle = {
height: 20,
width: 10,
color: "red"
};</code></pre>
</div>
</div>
</li>
<li>
TypeScript Union Types
<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o28" aria-controls="o28">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o28" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Union Types</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Union Types</strong></p>
<p>Union types are used when a value can be more than a single type.</p>
<p>Such as when a property would be string or number.</p>
<br /> <br />
<p><strong>Union | (OR)</strong></p>
<p>Using the | we are saying our parameter is a string or number:</p>
<pre class="language-Typescript"><code>function printStatusCode(code: string | number) {
console.log(`My status code is ${code}.`)
}
printStatusCode(404);
printStatusCode('404');</code></pre>
<br /> <br />
<p><strong>Union Type Errors</strong></p>
<p>Note: you need to know what your type is when union types are being used to avoid type errors:</p>
<pre class="language-Typescript"><code>function printStatusCode(code: string | number) {
console.log(`My status code is ${code.toUpperCase()}.`) // error: Property 'toUpperCase' does not exist on type 'string | number'. Property 'toUpperCase' does not exist on type 'number'.
}</code></pre>
<p>In our example, we are having an issue invoking <code>toUpperCase()</code> as it's a string method and <code>number</code> doesn't have access to it.</p>
</div>
</div>
</li>
<li>
TypeScript Functions
<button class="btn btn1 mx-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#o29" aria-controls="o29">
Read More...
</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="o29" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">
TypeScript Functions</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p><strong>TypeScript Functions</strong></p>
<p>TypeScript has a specific syntax for typing function parameters and return values.</p>
<br /> <br />
<p><strong>Return Type</strong></p>
<p>The type of the value returned by the function can be explicitly defined.</p>
<pre class="language-Typescript"><code>// the `: number` here specifies that this function returns a number
function getTime(): number {
return new Date().getTime();
}</code></pre>
<p>If no return type is defined, TypeScript will attempt to infer it through the types of the variables or expressions returned.</p>
<br /> <br />
<p><strong>Void Return Type</strong></p>
<p>The type void can be used to indicate a function doesn't return any value.</p>
<pre class="language-Typescript"><code>function printHello(): void {
console.log('Hello!');
}</code></pre>
<p><strong>Parameters</strong></p>
<p>Function parameters are typed with a similar syntax as variable declarations.</p>
<pre class="language-Typescript"><code>function multiply(a: number, b: number) {
return a * b;
}</code></pre>
<br /> <br />
<p>If no parameter type is defined, TypeScript will default to using any, unless additional type information is available as shown in the Default Parameters and Type Alias sections below.</p>
<br /> <br />
<p><strong>Optional Parameters</strong></p>
<p>By default, TypeScript will assume all parameters are required, but they can be explicitly marked as optional.</p>
<pre class="language-Typescript"><code>// the `?` operator here marks parameter `c` as optional
function add(a: number, b: number, c?: number) {
return a + b + (c || 0);
}</code></pre>
<br /> <br />
<p><strong>Default Parameters</strong></p>
<p>For parameters with default values, the default value goes after the type annotation:</p>
<pre class="language-Typescript"><code>function pow(value: number, exponent: number = 10) {
return value ** exponent;
}</code></pre>
<p>TypeScript can also infer the type from the default value.</p>
<br /> <br />
<p><strong>Named Parameters</strong></p>
<p>Typing named parameters follows the same pattern as typing normal parameters.</p>
<pre class="language-Typescript"><code>function divide({ dividend, divisor }: { dividend: number, divisor: number }) {
return dividend / divisor;
}</code></pre>
<br /> <br />
<p><strong>Rest Parameters</strong></p>
<p>Rest parameters can be typed like normal parameters, but the type must be an array as rest parameters are always arrays.</p>
<pre class="language-Typescript"><code>function add(a: number, b: number, ...rest: number[]) {
return a + b + rest.reduce((p, c) => p + c, 0);
}</code></pre>
<br /> <br />
<p><strong>Type Alias</strong></p>
<p>Function types can be specified separately from functions with type aliases.</p>
<p>These types are written similarly to arrow functions, read more about arrow functions <a href="https://www.example.com/arrow-functions">here</a>.</p>
<pre class="language-Typescript"><code>type Negate = (value: number) => number;
// in this function, the parameter `value` automatically gets assigned the type `number` from the type `Negate`
const negateFunction: Negate = (value) => value * -1;</code></pre>
</div>
</div>
<pre class="language-Typescript"><code>
function getTime(): number {