Skip to content

Commit 8e44945

Browse files
committed
small edits
1 parent 0d7c82e commit 8e44945

File tree

4 files changed

+34
-12
lines changed

4 files changed

+34
-12
lines changed

content/academy/switching_to_typescript.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ console.log(addAges(bob.age, john.age));
3838

3939
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.
4040

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.
4242

4343
![]({{@asset switching_to_typescript/images/typescript-error.webp}})
4444

content/academy/switching_to_typescript/mini_project.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ Easy enough, right? Well, not really. Let's take a look at how TypeScript interp
205205

206206
![Promise of any type]({{@asset switching_to_typescript/images/promise-any.webp}})
207207

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.
209209

210210
```TypeScript
211211
// index.ts

content/academy/switching_to_typescript/type_aliases.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,4 +145,4 @@ We've significantly cleaned up the function by moving its verbose type annotatio
145145

146146
## [](#next) Next up
147147

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}}).

content/academy/switching_to_typescript/unknown_and_type_casting.md renamed to content/academy/switching_to_typescript/unknown_and_type_assertions.md

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
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.
44
menuWeight: 7.6
55
paths:
6-
- switching-to-typescript/unknown-and-type-casting
6+
- switching-to-typescript/unknown-and-type-assertions
77
---
88

9-
# [](#unknown-and-type-casting) Unknown & type casting
9+
# [](#unknown-and-type-assertions) Unknown & type assertions
1010

1111
There are two types we haven't discussed yet - `any` and `unknown`.
1212

@@ -70,11 +70,11 @@ if (typeof userInput === 'string') {
7070
}
7171
```
7272

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.
7474

75-
## [](#type-casting) Type casting
75+
## [](#type-assertions) Type assertions
7676

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.
7878

7979
```TypeScript
8080
let userInput: unknown;
@@ -88,13 +88,35 @@ userInput = 'hello world!';
8888
savedInput = userInput as string;
8989
```
9090

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+
91113
## [](#final-thoughts) Final thoughts
92114

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.
94116

95117
**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.
96118

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.
98120

99121
Often times, these features are used in tandem.
100122

0 commit comments

Comments
 (0)