You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This code doesn't actually throw an error, but it does output `27undefined`. That's not good. The first issue is that `john.age` is **undefined**, and the second issue is that `bob.age` is a string and must be converted to a number to work properly in the `addAges` function. Despite these two significant mistakes, JavaScript doesn't tell us at all about them and lets the code run with bugs.
40
40
41
-
With TypeScript, these types of issues stick out like a sore thumb, and depending on your configurations, the compiler will refuse to compile it until they have been fixed.
41
+
With TypeScript, these types of issues stick out like a sore thumb, and depending on your configurations, the [compiler](https://www.techtarget.com/whatis/definition/compiler#:~:text=A%20compiler%20is%20a%20special,as%20Java%20or%20C%2B%2B.) will refuse to compile it until they have been fixed.
Copy file name to clipboardExpand all lines: content/academy/switching_to_typescript/mini_project.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -205,7 +205,7 @@ Easy enough, right? Well, not really. Let's take a look at how TypeScript interp
205
205
206
206

207
207
208
-
We're returning a promise of any type out of this function. This is where we can use [type casting]({{@link switching_to_typescript/unknown_and_type_casting.md}}) to help TypeScript understand that this response takes the shape of our `ResponseData` type.
208
+
We're returning a promise of any type out of this function. This is where we can use [type assertions]({{@link switching_to_typescript/unknown_and_type_assertions.md}}) to help TypeScript understand that this response takes the shape of our `ResponseData` type.
Copy file name to clipboardExpand all lines: content/academy/switching_to_typescript/type_aliases.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -145,4 +145,4 @@ We've significantly cleaned up the function by moving its verbose type annotatio
145
145
146
146
## [](#next) Next up
147
147
148
-
There is a special type you haven't learned about called `unknown`. We haven't yet discussed it, because it's best learned alongside **type casting**, which is yet another feature offered by TypeScript. Learn all about the `unknown` type and typecasting in the [next lesson]({{@link switching_to_typescript/unknown_and_type_casting.md}}).
148
+
There is a special type you haven't learned about called `unknown`. We haven't yet discussed it, because it's best learned alongside **type casting**, which is yet another feature offered by TypeScript. Learn all about the `unknown` type and typecasting in the [next lesson]({{@link switching_to_typescript/unknown_and_type_assertions.md}}).
Copy file name to clipboardExpand all lines: content/academy/switching_to_typescript/unknown_and_type_assertions.md
+31-9Lines changed: 31 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
-
title: Unknown, any, type guards & type casting
3
-
description: Understand the "unknown" and "any" types, as well as how to use type guards to make your code safer and type casting to avoid common TypeScript compiler errors.
2
+
title: Unknown, any, type guards & type assertions
3
+
description: Understand the "unknown" and "any" types, as well as how to use type guards to make your code safer and type assertions to avoid common TypeScript compiler errors.
# [](#unknown-and-type-casting) Unknown & type casting
9
+
# [](#unknown-and-type-assertions) Unknown & type assertions
10
10
11
11
There are two types we haven't discussed yet - `any` and `unknown`.
12
12
@@ -70,11 +70,11 @@ if (typeof userInput === 'string') {
70
70
}
71
71
```
72
72
73
-
This works, and in fact, it's the most optimal solution for this use case. But what if we were 100% sure that the value stored in `userInput` was a string? Thats when **type casting** comes in handy.
73
+
This works, and in fact, it's the most optimal solution for this use case. But what if we were 100% sure that the value stored in `userInput` was a string? Thats when **type assertions** comes in handy.
74
74
75
-
## [](#type-casting) Type casting
75
+
## [](#type-assertions) Type assertions
76
76
77
-
Despite the fancy name, [type casting](https://www.typescripttutorial.net/typescript-tutorial/type-casting/) is a simple concept based around a single keyword: `as`. We usually use this on values that we can't control the return type of, or values that we're sure have a certain type, but TypeScript needs a bit of help understanding that.
77
+
Despite the fancy name, [type assertions](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions) is a simple concept based around a single keyword: `as`. We usually use this on values that we can't control the return type of, or values that we're sure have a certain type, but TypeScript needs a bit of help understanding that.
78
78
79
79
```TypeScript
80
80
let userInput:unknown;
@@ -88,13 +88,35 @@ userInput = 'hello world!';
88
88
savedInput=userInputasstring;
89
89
```
90
90
91
+
## [](#non-null-assertion) Non-null assertion
92
+
93
+
You might already be familiar with [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) in JavaScript (`?.` syntax). TypeScript adds a new operator with a similar syntax that uses an exclamation mark instead (`!.`), which automatically removes `null` and `undefined` from a value's type - essentially asserting that you are certain it will never be `null` or `undefined`.
94
+
95
+
Consider this snippet:
96
+
97
+
```TypeScript
98
+
let job:undefined|string;
99
+
100
+
const chars =job.split('');
101
+
```
102
+
103
+
TypeScript will yell at you when trying to compile this code, stating that **Object is possibly 'undefined'**, which is true. In order to assert that `job` will not be `undefined` in this case, we can simply add an exclamation mark before the dot.
104
+
105
+
```TypeScript
106
+
let job:undefined|string;
107
+
108
+
const chars =job.split('');
109
+
```
110
+
111
+
This operator is called the [non-null assertion operator](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-).
112
+
91
113
## [](#final-thoughts) Final thoughts
92
114
93
-
Even though you've learned about them in the same lesson, type guards and type casting are inherently very different things with different use cases.
115
+
Even though you've learned about them in the same lesson, type guards and type assertions are inherently very different things with different use cases.
94
116
95
117
**Type guards** make a runtime check of whether or not a value passes a check that determines that it can be safely used as a certain type. They are great when dealing with values that might hold inconsistent data types (such as user input) where you aren't 100% sure if a certain property will exist.
96
118
97
-
**Type casting** tells TypeScript to take a value of one type and to treat it as if it were another type. No runtime checks are made. A common use case is casting the response body of an API call (usually has the `any` type depending on what you're using to fetch the data) to a custom type to receive TypeScript support on the data.
119
+
**Type assertions** tells TypeScript to take a value of one type and to treat it as if it were another type. No runtime checks are made. A common use case is asserting the response body of an API call (usually has the `any` type depending on what you're using to fetch the data) to a custom type to receive TypeScript support on the data.
0 commit comments