-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (135 loc) · 7.82 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>TypeScript The Right Way</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="shortcut icon" href="/img/typescript/ts-logo-favicon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> -->
<link href="/assets/fonts/open-sans/font-faces.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<header role="banner">
<div role="presentation">
<a id="github-link"
href="https://github.com/Droces/tstherightway"
target="_blank"
title="View the repository on GitHub">
<img src="/img/github/GitHub-Mark-64px.png" alt="GitHub logo">
</a>
<h1>TypeScript The Right Way</h1>
</div>
</header>
<nav id="sidebar" aria-expanded="false">
<ul class="non-list">
<li><a href="#contents">Contents</a></li>
<li><a href="#not-covered">Not covered</a></li>
<li><a href="#strict-type-checking">Strict type checking</a></li>
<li><a href="#code-coverage">Code coverage</a></li>
<li><a href="#the-any-type">The "any" type</a></li>
<li><a href="#inference-and-assertions">Inference and assertions</a></li>
<li><a href="#optional-and-non-value-properties">Optional and non-value properties</a></li>
<li><a href="#interfaces-and-classes">Interfaces and classes</a></li>
<li><a href="#community-type-definitions">Community type definitions</a></li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#namespaces">Namespaces</a></li>
<li><a href="#non-primitive-general-types">Non-primitive general types</a></li>
<li><a href="#principles">Principles</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#contributing">Contributing</a></li>
</ul>
</nav>
<button id="small-device-button-sidebar">
<svg fill="none" height="26" viewBox="0 0 26 26" width="26" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m0 1c0-.552285.447715-1 1-1h24c.5523 0 1 .447715 1 1v3h-26z"></path><path d="m0 11h13 13v4h-26z"></path><path d="m0 22h26v3c0 .5523-.4477 1-1 1h-24c-.552284 0-1-.4477-1-1z"></path></g></svg>
</button>
<main>
<h2 id="contents">Contents</h2>
<p><em>To be added</em></p>
<h2 id="not-covered">Not covered</h2>
<p>JavaScript best practices.</p>
<p>Frontend frameworks.</p>
<h2 id="strict-type-checking">Strict type checking</h2>
<p><em>To be added</em></p>
<h2 id="code-coverage">Code coverage</h2>
<p><em>To be added</em></p>
<h2 id="the-any-type">The "any" type</h2>
<p><em>To be added</em></p>
<h2 id="inference-and-assertions">Inference and assertions</h2>
<p>When declaring primitive variables, allow TypeScript to infer the type. This is safer and reduces redundancy.</p>
<pre>const name = "Sam"; // Name is inferred to be a string</pre>
<p>When you know the type of a value that TypeScript can’t know about, assert its type using <code>as</code>.</p>
<pre>return document.getElementById("canvas") as HTMLCanvasElement;</pre>
<p>See <a href="https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions" target="_blank">Type Assertions on the TS website</a></p>
<h2 id="optional-and-non-value-properties">Optional and non-value properties</h2>
<p><em>To be added</em></p>
<h2 id="interfaces-and-classes">Interfaces and classes</h2>
<p><em>To be added</em></p>
<h2 id="community-type-definitions">Community type definitions</h2>
<p><em>To be added</em></p>
<h2 id="documentation">Documentation</h2>
<p>See <a href="https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html" target="_blank">JSDoc Reference on the TS website</a></p>
<p><em>To be added</em></p>
<h2 id="namespaces">Namespaces</h2>
<p><em>To be added</em></p>
<h2 id="non-primitive-general-types">Non-primitive general types</h2>
<p>Don’t ever use the types <code>Number</code>, <code>String</code>, <code>Boolean</code>, <code>Symbol</code>, or <code>Object</code> These types refer to non-primitive boxed objects that are almost never used appropriately in JavaScript code.</p>
<pre>
/* WRONG */
function reverse(s: String): String;</pre>
<p>Do use the types <code>number</code>, <code>string</code>, <code>boolean</code>, and <code>symbol</code>.</p>
<pre>
/* OK */
function reverse(s: string): string;</pre>
Instead of <code>Object</code>, use the non-primitive <code>object</code> type (<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html#object-type" target="_blank">added in TypeScript 2.2</a>).
<h2 id="principles">Principles of this site</h2>
<p>To create the most helpful best-practices site possible, we adhere to these guiding principles:</p>
<ul>
<li><strong>Informative</strong>: Provides explanations and examples</li>
<li><strong>Efficient</strong>: As short and simple as possible</li>
<li><strong>Opinionated</strong>: Selects most appropriate options</li>
<li><strong>Non-introductory</strong>: Doesn't teach the language</li>
<li><strong>Non-redundant</strong>: Doesn't cover anything that's explained better elsewhere</li>
<li><strong>Transparent</strong>: Provides reasoning</li>
<li><strong>Community-powered</strong>: Anyone can contribute</li>
<li><strong>Evolving</strong>: Always changing, never finished</li>
</ul>
<h2 id="resources">Resources</h2>
<ul>
<li><a target="_blank" href="https://www.typescriptlang.org/">TypeScript</a> website</li>
<li><a target="_blank" href="https://basarat.gitbook.io/typescript/">TypeScript Deep Dive</a> e-book</li>
<li><a target="_blank" href="https://jstherightway.org/">JS The Right Way</a> website</li>
<li><a target="_blank" href="https://definitelytyped.org/guides/best-practices.html">Best practices | DefinitelyTyped</a> page</li>
<li><a target="_blank" href="https://thewebdev.info/category/javascript/typescript/typescript-best-practices/">TypeScript Best Practices Archives - The Web Dev</a> blog</li>
<li><a target="_blank" href="https://devhints.io/typescript">TypeScript Cheatsheet</a></li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Please help us by adding or editing the content using pull requests to <a href="https://github.com/Droces/tstherightway" target="_blank">the repository on GitHub</a>.</p>
</main>
<footer role="contentinfo">
<div role="presentation">
<p>Work in progress. Help us improve it. Website by Dane Rossenrode of <a href="https://websites.touchdreams.co.za" target="_blank">Touchdreams</a></p>
</div>
</footer>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA-XXXXX-Y', 'auto'); ga('set', 'anonymizeIp', true); ga('set', 'transport', 'beacon'); ga('send', 'pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>
</html>