Skip to content
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

content(learn/typescript): revise introduction #7470

Merged
merged 4 commits into from
Feb 5, 2025
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions apps/site/pages/en/learn/typescript/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,49 @@ The first part (with the `type` keyword) is responsible for declaring our custom

There are additional things about this example that you should know. Firstly, if we do not comply with the declared types, TypeScript will inform us that something is wrong and prevent misuse. Secondly, not everything must be typed explicitly—TypeScript infers types for us. For example, the variable `isJustineAnAdult` is of type `boolean` even if we didn't type it explicitly, and `justine` would be a valid argument for our function even though we didn't declare this variable as of `User` type.

## What does TypeScript consist of?

TypeScript consists of two main components: the code itself and type definitions.

### TypeScript Code

The code part is regular JavaScript with additional TypeScript-specific syntax for type annotations. When TypeScript code is compiled, all the TypeScript-specific parts are removed, resulting in clean JavaScript that can run in any environment. For example:

```ts
// This is TypeScript code
function greet(name: string) {
console.log(`Hello, ${name}!`);
}
```
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

### Type Definitions

Type definitions are declarations that describe the shape of existing JavaScript code. They are usually stored in `.d.ts` files and don't contain any actual implementation—they only describe the types. These definitions are essential for TypeScript to understand the types of libraries written in JavaScript.
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

For example, when you use Node.js with TypeScript, you'll need type definitions for Node.js APIs. This is where `@types/node` comes in—it's a package that contains type definitions for Node.js standard library. You can install it using:
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

```bash
npm add --save-dev @types/node
```

These type definitions allow TypeScript to understand Node.js APIs and provide proper type checking and autocompletion when you use functions like `fs.readFile` or `http.createServer`. For example:

```ts
import * as fs from 'fs';

// TypeScript knows the correct types thanks to @types/node
fs.readFile('example.txt', 'utf8', (err, data) => {
if (err) throw err;
console.log(data);
});
```
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

Many popular JavaScript libraries have their type definitions available in the `@types` namespace, maintained by the DefinitelyTyped community. This enables seamless integration of existing JavaScript libraries with TypeScript projects.
AugustinMauroy marked this conversation as resolved.
Show resolved Hide resolved

### Transform Capabilities

TypeScript also includes powerful transformation capabilities, particularly for JSX (used in React and similar frameworks). The TypeScript compiler can transform JSX syntax into regular JavaScript, similar to how Babel works. While we won't cover these transformation features in these articles, it's worth noting that TypeScript isn't just about type checking—it's also a powerful tool for transforming modern JavaScript syntax into compatible versions for different environments.
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?
Expand Down
Loading