Skip to content

Commit bf332fa

Browse files
author
mk360
committed
create file
1 parent 75c6157 commit bf332fa

File tree

1 file changed

+194
-0
lines changed

1 file changed

+194
-0
lines changed

‎docs/documentation/fr/get-started/TS for the New Programmer.md

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: TypeScript for the New Programmer
3+
short: TS for the New Programmer
4+
layout: docs
5+
permalink: /fr/docs/handbook/typescript-from-scratch.html
6+
oneline: Learn TypeScript from scratch
7+
---
8+
9+
Congratulations on choosing TypeScript as one of your first languages — you're already making good decisions!
10+
11+
You've probably already heard that TypeScript is a "flavor" or "variant" of JavaScript.
12+
The relationship between TypeScript (TS) and JavaScript (JS) is rather unique among modern programming languages, so learning more about this relationship will help you understand how TypeScript adds to JavaScript.
13+
14+
## What is JavaScript? A Brief History
15+
16+
JavaScript (also known as ECMAScript) started its life as a simple scripting language for browsers.
17+
At the time it was invented, it was expected to be used for short snippets of code embedded in a web page — writing more than a few dozen lines of code would have been somewhat unusual.
18+
Due to this, early web browsers executed such code pretty slowly.
19+
Over time, though, JS became more and more popular, and web developers started using it to create interactive experiences.
20+
21+
Web browser developers responded to this increased JS usage by optimizing their execution engines (dynamic compilation) and extending what could be done with it (adding APIs), which in turn made web developers use it even more.
22+
On modern websites, your browser is frequently running applications that span hundreds of thousands of lines of code.
23+
This is long and gradual growth of "the web", starting as a simple network of static pages, and evolving into a platform for rich _applications_ of all kinds.
24+
25+
More than this, JS has become popular enough to be used outside the context of browsers, such as implementing JS servers using node.js.
26+
The "run anywhere" nature of JS makes it an attractive choice for cross-platform development.
27+
There are many developers these days that use _only_ JavaScript to program their entire stack!
28+
29+
To summarize, we have a language that was designed for quick uses, and then grew to a full-fledged tool to write applications with millions of lines.
30+
Every language has its own _quirks_ — oddities and surprises, and JavaScript's humble beginning makes it have _many_ of these. Some examples:
31+
32+
- JavaScript's equality operator (`==`) _coerces_ its arguments, leading to unexpected behavior:
33+
34+
```js
35+
if ("" == 0) {
36+
// It is! But why??
37+
}
38+
if (1 < x < 3) {
39+
// True for *any* value of x!
40+
}
41+
```
42+
43+
- JavaScript also allows accessing properties which aren't present:
44+
45+
```js
46+
const obj = { width: 10, height: 15 };
47+
// Why is this NaN? Spelling is hard!
48+
const area = obj.width * obj.heigth;
49+
```
50+
51+
Most programming languages would throw an error when these sorts of errors occur, some would do so during compilation — before any code is running.
52+
When writing small programs, such quirks are annoying but manageable; when writing applications with hundreds or thousands of lines of code, these constant surprises are a serious problem.
53+
54+
## TypeScript: A Static Type Checker
55+
56+
We said earlier that some languages wouldn't allow those buggy programs to run at all.
57+
Detecting errors in code without running it is referred to as _static checking_.
58+
Determining what's an error and what's not based on the kinds of values being operated on is known as static _type_ checking.
59+
60+
TypeScript checks a program for errors before execution, and does so based on the _kinds of values_, it's a _static type checker_.
61+
For example, the last example above has an error because of the _type_ of `obj`.
62+
Here's the error TypeScript found:
63+
64+
```ts twoslash
65+
// @errors: 2551
66+
const obj = { width: 10, height: 15 };
67+
const area = obj.width * obj.heigth;
68+
```
69+
70+
### A Typed Superset of JavaScript
71+
72+
How does TypeScript relate to JavaScript, though?
73+
74+
#### Syntax
75+
76+
TypeScript is a language that is a _superset_ of JavaScript: JS syntax is therefore legal TS.
77+
Syntax refers to the way we write text to form a program.
78+
For example, this code has a _syntax_ error because it's missing a `)`:
79+
80+
```ts twoslash
81+
// @errors: 1005
82+
let a = (4
83+
```
84+
85+
TypeScript doesn't consider any JavaScript code to be an error because of its syntax.
86+
This means you can take any working JavaScript code and put it in a TypeScript file without worrying about exactly how it is written.
87+
88+
#### Types
89+
90+
However, TypeScript is a _typed_ superset, meaning that it adds rules about how different kinds of values can be used.
91+
The earlier error about `obj.heigth` was not a _syntax_ error: it is an error of using some kind of value (a _type_) in an incorrect way.
92+
93+
As another example, this is JavaScript code that you can run in your browser, and it _will_ log a value:
94+
95+
```js
96+
console.log(4 / []);
97+
```
98+
99+
This syntactically-legal program logs `Infinity`.
100+
TypeScript, though, considers division of number by an array to be a nonsensical operation, and will issue an error:
101+
102+
```ts twoslash
103+
// @errors: 2363
104+
console.log(4 / []);
105+
```
106+
107+
It's possible you really _did_ intend to divide a number by an array, perhaps just to see what happens, but most of the time, though, this is a programming mistake.
108+
TypeScript's type checker is designed to allow correct programs through while still catching as many common errors as possible.
109+
(Later, we'll learn about settings you can use to configure how strictly TypeScript checks your code.)
110+
111+
If you move some code from a JavaScript file to a TypeScript file, you might see _type errors_ depending on how the code is written.
112+
These may be legitimate problems with the code, or TypeScript being overly conservative.
113+
Throughout this guide we'll demonstrate how to add various TypeScript syntax to eliminate such errors.
114+
115+
#### Runtime Behavior
116+
117+
TypeScript is also a programming language that preserves the _runtime behavior_ of JavaScript.
118+
For example, dividing by zero in JavaScript produces `Infinity` instead of throwing a runtime exception.
119+
As a principle, TypeScript **never** changes the runtime behavior of JavaScript code.
120+
121+
This means that if you move code from JavaScript to TypeScript, it is **guaranteed** to run the same way, even if TypeScript thinks that the code has type errors.
122+
123+
Keeping the same runtime behavior as JavaScript is a foundational promise of TypeScript because it means you can easily transition between the two languages without worrying about subtle differences that might make your program stop working.
124+
125+
<!--
126+
Missing subsection on the fact that TS extends JS to add syntax for type
127+
specification. (Since the immediately preceding text was raving about
128+
how JS code can be used in TS.)
129+
-->
130+
131+
#### Erased Types
132+
133+
Roughly speaking, once TypeScript's compiler is done with checking your code, it _erases_ the types to produce the resulting "compiled" code.
134+
This means that once your code is compiled, the resulting plain JS code has no type information.
135+
136+
This also means that TypeScript never changes the _behavior_ of your program based on the types it inferred.
137+
The bottom line is that while you might see type errors during compilation, the type system itself has no bearing on how your program works when it runs.
138+
139+
Finally, TypeScript doesn't provide any additional runtime libraries.
140+
Your programs will use the same standard library (or external libraries) as JavaScript programs, so there's no additional TypeScript-specific framework to learn.
141+
142+
<!--
143+
Should extend this paragraph to say that there's an exception of
144+
allowing you to use newer JS features and transpile the code to an older
145+
JS, and this might add small stubs of functionality when needed. (Maybe
146+
with an example --- something like `?.` would be good in showing readers
147+
that this document is maintained.)
148+
-->
149+
150+
## Learning JavaScript and TypeScript
151+
152+
We frequently see the question "Should I learn JavaScript or TypeScript?".
153+
154+
The answer is that you can't learn TypeScript without learning JavaScript!
155+
TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.
156+
157+
There are many, many resources available for programmers to learn JavaScript; you should _not_ ignore these resources if you're writing TypeScript.
158+
For example, there are about 20 times more StackOverflow questions tagged `javascript` than `typescript`, but _all_ of the `javascript` questions also apply to TypeScript.
159+
160+
If you find yourself searching for something like "how to sort a list in TypeScript", remember: **TypeScript is JavaScript's runtime with a compile-time type checker**.
161+
The way you sort a list in TypeScript is the same way you do so in JavaScript.
162+
If you find a resource that uses TypeScript directly, that's great too, but don't limit yourself to thinking you need TypeScript-specific answers for everyday questions about how to accomplish runtime tasks.
163+
164+
## Next Steps
165+
166+
This was a brief overview of the syntax and tools used in everyday TypeScript. From here, you can:
167+
168+
- Learn some of the JavaScript fundamentals, we recommend either:
169+
170+
- [Microsoft's JavaScript Resources](https://docs.microsoft.com/javascript/) or
171+
- [JavaScript guide at the Mozilla Web Docs](https://developer.mozilla.org/docs/Web/JavaScript/Guide)
172+
173+
- Continue to [TypeScript for JavaScript Programmers](/docs/handbook/typescript-in-5-minutes.html)
174+
- Read the full Handbook [from start to finish](/docs/handbook/intro.html) (30m)
175+
- Explore the [Playground examples](/play#show-examples)
176+
177+
<!-- Note: I'll be happy to write the following... -->
178+
<!--
179+
## Types
180+
181+
* What's a type? (For newbies)
182+
* A type is a *kind* of value
183+
* Types implicitly define what operations make sense on them
184+
* Lots of different kinds, not just primitives
185+
* We can make descriptions for all kinds of values
186+
* The `any` type -- a quick desctiption, what it is, and why it's bad
187+
* Inference 101
188+
* Examples
189+
* TypeScript can figure out types most of the time
190+
* Two places we'll ask you what the type is: Function boundaries, and later-initialized values
191+
* Co-learning JavaScript
192+
* You can+should read existing JS resources
193+
* Just paste it in and see what happens
194+
* Consider turning off 'strict' -->

0 commit comments

Comments
 (0)