Skip to content

Commit 0d128a7

Browse files
content(learn/typescript): revise introduction (#7470)
* content(learn/typescript): revise intro * content(learn/typescript): revise intro bis * Apply suggestions from code review Co-authored-by: Jacob Smith <[email protected]> Signed-off-by: Augustin Mauroy <[email protected]> * fix: code format --------- Signed-off-by: Augustin Mauroy <[email protected]> Co-authored-by: Jacob Smith <[email protected]>
1 parent 021bf3c commit 0d128a7

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

apps/site/pages/en/learn/typescript/introduction.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,48 @@ The first part (with the `type` keyword) is responsible for declaring our custom
4444

4545
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.
4646

47+
## What does TypeScript consist of?
48+
49+
TypeScript consists of two main components: the code itself and type definitions.
50+
51+
### TypeScript Code
52+
53+
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:
54+
55+
```ts displayName="example.ts"
56+
function greet(name: string) {
57+
console.log(`Hello, ${name}!`);
58+
}
59+
```
60+
61+
### Type Definitions
62+
63+
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.
64+
65+
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:
66+
67+
```bash
68+
npm add --save-dev @types/node
69+
```
70+
71+
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:
72+
73+
```js
74+
import * as fs from 'fs';
75+
76+
fs.readFile('example.txt', 'foo', (err, data) => {
77+
// ^^^ Argument of type '"foo"' is not assignable to parameter of type …
78+
if (err) throw err;
79+
console.log(data);
80+
});
81+
```
82+
83+
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.
84+
85+
### Transform Capabilities
86+
87+
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.
88+
4789
## How to run TypeScript code
4890

4991
Okay, so we have some TypeScript code. Now how do we run it?

0 commit comments

Comments
 (0)