-
-
Notifications
You must be signed in to change notification settings - Fork 6.4k
content(learn): update resources about typescript #6951
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
c53ed00
content(learn): update ressources about typescript
AugustinMauroy dfe4e40
adding important note
AugustinMauroy 215a5c7
content(learn): update from feedback
AugustinMauroy 96bd205
content(learn): remove global install of tsc
AugustinMauroy 3a90cdb
fix fails from github copilot
AugustinMauroy 9e74f30
fix: remove old stuff from navigation
AugustinMauroy b6bcd40
update
AugustinMauroy 461bbd5
update
AugustinMauroy 43f5c59
Update from feedback
AugustinMauroy 725e8a1
Merge branch 'main' into content(learn)-typescript
AugustinMauroy File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
185 changes: 0 additions & 185 deletions
185
apps/site/pages/en/learn/getting-started/nodejs-with-typescript.md
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
--- | ||
title: Introduction to TypeScript | ||
layout: learn | ||
authors: sbielenica, ovflowd, vaishnav-mk, AugustinMauroy | ||
--- | ||
|
||
# Introduction to TypeScript | ||
|
||
## What is TypeScript | ||
|
||
**[TypeScript](https://www.typescriptlang.org)** is an open-source language maintained and developed by Microsoft. It's loved and used by a lot of software developers around the world. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
Basically, it's a superset of JavaScript that adds new capabilities to the language. The most notable addition is static type definitions, something that is not present in plain JavaScript. Thanks to types, it's possible, for example, to declare what kind of arguments we are expecting and what is returned exactly in our functions or what's the exact shape of the object that we are creating. TypeScript is a really powerful tool and opens a new world of possibilities in JavaScript projects. It makes our code more secure and robust by preventing many bugs before the code is even shipped - it catches problems during code development and integrates wonderfully with code editors like Visual Studio Code. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
We can talk about other TypeScript benefits later, let's see some examples now! | ||
|
||
## First TypeScript code | ||
|
||
Take a look at this code snippet and then we can unpack it together: | ||
|
||
<!-- | ||
Maintainers note: this code is duplicated in the next article, please keep them in sync | ||
--> | ||
|
||
```ts | ||
type User = { | ||
name: string; | ||
age: number; | ||
}; | ||
|
||
function isAdult(user: User): boolean { | ||
return user.age >= 18; | ||
} | ||
|
||
const justine = { | ||
name: 'Justine', | ||
age: 23, | ||
} satisfies User; | ||
|
||
const isJustineAnAdult = isAdult(justine); | ||
``` | ||
|
||
The first part (with the `type` keyword) is responsible for declaring our custom object type representing users. Later we utilize this newly created type to create function `isAdult` that accepts one argument of type `User` and returns `boolean`. After this, we create `justine`, our example data that can be used for calling the previously defined function. Finally, we create a new variable with information on whether `justine` is an adult. | ||
|
||
There are additional things about this example that you should know. Firstly, if we would not comply with declared types, TypeScript would alarm us that something is wrong and prevent misuse. Secondly, not everything must be typed explicitly - TypeScript is very smart and can infer types for us. For example, variable `isJustineAnAdult` is of type `boolean` even if we didn't type it explicitly or `justine` would be valid argument for our function even though we didn't declare this variable as of `User` type. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## How to run TypeScript code | ||
|
||
Okay, so we have some TypeScript code. Now how do we run it? | ||
There are few possible ways to run TypeScript code, we will cover all of them in the next articles. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
--- | ||
title: Running TypeScript with a Node.js Itself | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
layout: learn | ||
authors: AugustinMauroy | ||
--- | ||
|
||
> **⚠️WARNING⚠️:** All content in this article uses Node.js experimental features. Please make sure you are using a version of Node.js that supports the features mentioned in this article. And remember that experimental features can change on future versions of Node.js. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
# Running TypeScript with a Node.js Itself | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
In the previous articles, we learned how to run TypeScript code using transpilation and with a runner. In this article, we will learn how to run TypeScript code using Node.js itself. | ||
|
||
## Running TypeScript code with Node.js | ||
|
||
Since V22.6.0, Node.js has experimental support for some TypeScript syntax. You can write code that's valid TypeScript directly in Node.js without the need to transpile it first. | ||
|
||
So how do you run typed JavaScript code with Node.js? | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```bash | ||
node --experimental-strip-types example.ts | ||
``` | ||
|
||
The `--experimental-strip-types` flag tells Node.js to strip the type annotations from the TypeScript code before running it. | ||
|
||
And that's it! You can now run typed JavaScript code directly in Node.js without the need to transpile it first, and use TypeScript to catch type-related errors. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
In the future we all hope that this feature will be stable and available in the LTS version of Node.js, so that we can all enjoy it without any additional steps. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Limitations | ||
|
||
At the time of writing, the experimental support for TypeScript in Node.js has some limitations. To allow typescript to run in node.js, our collaborators have chosen to only strip types from the code. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
You can get more information on the [api docs](https://nodejs.org/docs/latest/api/typescript.html#unsupported-typescript-features) | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Important notes | ||
|
||
Thanks to all the contributors who have made this feature possible. We hope that this feature will be stable and available in the LTS version of Node.js soon. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
We can understand that this feature is experimental and has some limitations; if that doesn't suit your use-case, please use something else, or contribute a fix. Bug reports are also welcome, please keep in mind the project is run by volunteers, without warranty of any kind, so please be patient if you can't contribute the fix yourself. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
--- | ||
title: Running TypeScript with a runner | ||
layout: learn | ||
authors: AugustinMauroy | ||
--- | ||
|
||
# Running TypeScript with a runner | ||
|
||
In the previous article, we learned how to run TypeScript code using transpilation. In this article, we will learn how to run TypeScript code using a runner. | ||
|
||
## Running TypeScript code with `ts-node` | ||
|
||
[ts-node](https://typestrong.org/ts-node/) is a TypeScript execution environment for node.js. It allows you to run TypeScript code directly in node.js without the need to compile it first. But it's not typechecking your code. So we recommend to type check your code first with `tsc` and then run it with `ts-node` before shipping it. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
To use `ts-node`, you need to install it first: | ||
|
||
```bash | ||
npm i -D ts-node | ||
``` | ||
|
||
Then you can run your TypeScript code like this: | ||
|
||
```bash | ||
npx ts-node example.ts | ||
``` | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Running TypeScript code with `tsx` | ||
|
||
[tsx](https://tsx.is/) is another TypeScript execution environment for node.js. It allows you to run TypeScript code directly in node.js without the need to compile it first. But it's not typechecking your code. So we recommend to type check your code first with `tsc` and then run it with `tsx` before shipping it. | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
To use `tsx`, you need to install it first: | ||
|
||
```bash | ||
npm i -D tsx | ||
``` | ||
|
||
Then you can run your TypeScript code like this: | ||
|
||
```bash | ||
npx tsx example.ts | ||
``` | ||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Registering `tsx` via `node` | ||
|
||
AugustinMauroy marked this conversation as resolved.
Show resolved
Hide resolved
|
||
If you want to use `tsx` via `node`, you can register `tsx` via `--import`: | ||
|
||
```bash | ||
node --import=tsx example.ts | ||
``` |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.