From 70422fef66af84aaf2ca6ca8c11262c118d74451 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 3 Feb 2025 12:16:54 +0100 Subject: [PATCH 1/4] content(learn/typescript): revise intro --- .../pages/en/learn/typescript/introduction.md | 39 +++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/apps/site/pages/en/learn/typescript/introduction.md b/apps/site/pages/en/learn/typescript/introduction.md index 4cd976f2fb581..b91641839a928 100644 --- a/apps/site/pages/en/learn/typescript/introduction.md +++ b/apps/site/pages/en/learn/typescript/introduction.md @@ -44,6 +44,45 @@ 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}!`); +} +``` + +### 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. + +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: + +```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); +}); +``` + +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. + ## How to run TypeScript code Okay, so we have some TypeScript code. Now how do we run it? From c7f5e1d15029e30393e1fa1ed4862b7cd6dd754f Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 3 Feb 2025 12:20:15 +0100 Subject: [PATCH 2/4] content(learn/typescript): revise intro bis --- apps/site/pages/en/learn/typescript/introduction.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/site/pages/en/learn/typescript/introduction.md b/apps/site/pages/en/learn/typescript/introduction.md index b91641839a928..a4d5f8169d2ed 100644 --- a/apps/site/pages/en/learn/typescript/introduction.md +++ b/apps/site/pages/en/learn/typescript/introduction.md @@ -83,6 +83,10 @@ fs.readFile('example.txt', 'utf8', (err, data) => { 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. +### 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. + ## How to run TypeScript code Okay, so we have some TypeScript code. Now how do we run it? From c03cc436c5d1a2c6fe9ce32937cdc59c812a4326 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Mon, 3 Feb 2025 19:23:47 +0100 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Jacob Smith <3012099+JakobJingleheimer@users.noreply.github.com> Signed-off-by: Augustin Mauroy --- .../pages/en/learn/typescript/introduction.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/apps/site/pages/en/learn/typescript/introduction.md b/apps/site/pages/en/learn/typescript/introduction.md index a4d5f8169d2ed..354bcdd2a0a41 100644 --- a/apps/site/pages/en/learn/typescript/introduction.md +++ b/apps/site/pages/en/learn/typescript/introduction.md @@ -52,8 +52,7 @@ TypeScript consists of two main components: the code itself and type definitions 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 +```ts displayName="example.ts" function greet(name: string) { console.log(`Hello, ${name}!`); } @@ -61,9 +60,9 @@ function greet(name: string) { ### 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. +Type definitions 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 interoperability with JavaScript: code is not usually distributed as TypeScript, but instead transpiled to JavaScript that includes sidecar type definition files. -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: +For example, when you use Node.js with TypeScript, you'll need type definitions for Node.js APIs. This is available via `@types/node`. Install it using: ```bash npm add --save-dev @types/node @@ -71,21 +70,21 @@ 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 +```js import * as fs from 'fs'; -// TypeScript knows the correct types thanks to @types/node -fs.readFile('example.txt', 'utf8', (err, data) => { +fs.readFile('example.txt', 'foo', (err, data) => { +// ^^^ Argument of type '"foo"' is not assignable to parameter of type … if (err) throw err; console.log(data); }); ``` -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. +Many popular JavaScript libraries have their type definitions available under the `@types` namespace, maintained by the DefinitelyTyped community. This enables seamless integration of existing JavaScript libraries with TypeScript projects. ### 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. +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 only a tool for type checking—it's also a build tool for transforming modern JavaScript syntax into compatible versions for different environments. ## How to run TypeScript code From 7d8c5d9e52281681a50a4046a12715e563f9a2f7 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Wed, 5 Feb 2025 17:12:46 +0100 Subject: [PATCH 4/4] fix: code format --- apps/site/pages/en/learn/typescript/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/pages/en/learn/typescript/introduction.md b/apps/site/pages/en/learn/typescript/introduction.md index 354bcdd2a0a41..45f208d7694d0 100644 --- a/apps/site/pages/en/learn/typescript/introduction.md +++ b/apps/site/pages/en/learn/typescript/introduction.md @@ -74,7 +74,7 @@ These type definitions allow TypeScript to understand Node.js APIs and provide p import * as fs from 'fs'; fs.readFile('example.txt', 'foo', (err, data) => { -// ^^^ Argument of type '"foo"' is not assignable to parameter of type … + // ^^^ Argument of type '"foo"' is not assignable to parameter of type … if (err) throw err; console.log(data); });