Skip to content

feat: translate TS for the New Programmer to pt #124

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

tomashugo
Copy link

No description provided.

@github-actions
Copy link
Contributor

github-actions bot commented Oct 28, 2021

Translation of TS for the New Programmer.md

title: TypeScript for new programmer
short: TS for new programmer
layout: docs
permalink: /pt/docs/handbook/typescript-from-scratch.html

oneline: Learn TypeScript from scratch

Congratulations on choosing TypeScript as one of your first programming languages - you've already started making good decisions.

You've probably heard that TypeScript is a "flavor" or "variant" of JavaScript.

TypeScript (TS) and JavaScript (JS) maintain a unique relationship between modern programming languages, so learning more about this relationship will help you understand how TypeScript extends JavaScript.

What is JavaScript? A brief history

JavaScript (also known as ECMAScript) began its life as a simple scripting language for browsers.
At the time it was invented, it was expected that it would be used to embed small pieces of code on a web page - so writing scripts with more than a few dozen lines would be unusual. Because of this, the first browsers ran this code quite slowly.
Over time, however, JS has become more and more popular, and web developers have begun to use it to create interactive web experiences.

Browser developers responded to this increased use of JS by optimizing their execution engines (dynamic build) and extending what could be done with them (adding APIs), which in turn caused web developers to use the language even more.
On modern websites, your browser is often running applications that contain hundreds of thousands of lines of code.
This is the long and gradual growth of the web, which started as a simple network of static pages, and evolved into a platform for all kinds of Applications Rich.

More than that, JS has become popular enough to be used outside the context of browsers, such as to deploy servers in JS using node.js.
JS's "run anywhere" nature has made it an attractive choice for platform-to-platform development.
Nowadays there are many developers who use only JavaScript throughout its stack technology!

To summarize, we have a language that was designed for quick uses, and that has become a complete tool for writing applications with millions of lines.
Every language has its own Peculiarities - strangeness and surprises, and the humble beginning of JavaScript made her have many of these peculiarities. Some examples:

  • The JavaScript equality operator (==) Modifies their arguments, leading to unexpected behavior:

    if ("" == 0) {
      // É verdade! Mas por quê?
    }
    if (1 < x < 3) {
      // Verdade para *qualquer* valor de x!
    }
  • JavaScript also allows us to access properties that are not present:

    const obj = { width: 10, height: 15 };
    // Por que isso é NaN? Difícil de dizer!
    const area = obj.width * obj.heigth;

Many programming languages would trigger an error in the occurrence of some of these conditions, others would do so during compilation - before any code was executed.
When you write small programs, some quirks can be annoying but manageable; but when you write hundreds or thousands of lines of code, these constant surprises can become a serious problem.

TypeScript: A static type checker

We said earlier that some programming languages would not even allow the startup of bugprograms.
Error detection in code without the need to run them is known as static check.
Determining what is an error and what is not based on the types of values being worked is known as static checking of Types.

TypeScript looks for errors in programs before they even run, and does so based on the kind of values that are being used, so it's a static type tester
For example, the last example above has an error due to the kind of the variable obj.
Here's the error that TypeScript encountered:

// @errors: 2551
const obj = { width: 10, height: 15 };
const area = obj.width * obj.heigth;

A JavaScript-typed superset

So how does TypeScript relate to JavaScript?

Syntax

TypeScript is a language that is a superset JavaScript: Soon JS syntax is allowed within TS.
The syntax refers to the way in which we write the text that forms the program.
For example, the code below has an error of syntax because there's a lack of ):

// @errors: 1005
let a = (4

TypeScript does not consider any JavaScript code to be an error because of its syntax.
This means that you can take any valid JavaScript code and put it in a TypeScript file without worrying about how it was written exactly.

Types

However, TypeScript is a superset Typed, which means that it has extra rules about how different types of values can be used.
The previous error of the obj.heigth it wasn't a mistake of syntax, it was a mistake about using a kind incorrectly.

In this other example, we have javascript code that will run normally in your browser, printing a value on the console:

console.log(4 / []);

This program, which is syntactically correct, will print Infinity on the console.
TypeScript, on the other hand, considers splitting a number by an array a meaningless operation, which will make it trigger an error:

// @errors: 2363
console.log(4 / []);

It's possible that you actually Wanted divide a number by an array, perhaps just to see what happens. But in most cases, however, this is a programming error.
The TypeScript type checker is designed to allow you to run correct programs while capturing as many common errors as possible.
(Later, we'll learn about the settings you can use to set how TypeScript strictly checks your code.)

If you move some code from a JavaScript file to a TypeScript file, you will probably see type errors depending on how your code was written.
They may be legitimate problems with your code, or TypeScript may be being very conservative with it.
Throughout this guide we will demonstrate how to add some TypeScript syntax to eliminate such errors.

Runtime Behavior (Runtime)

TypeScript is also a programming language that preserves the runtime behavior javascript.
For example, dividing by zero in JavaScript produces Infinity rather than firing an exception at run time.
As a principle, TypeScript never changes the runtime behavior of JavaScript code.

This means that if you move some JavaScript code to TypeScript, it is secure that it will run the same way, even if TypeScript thinks it has some type errors.

Maintaining the same Runtime feature as JavaScript is a key promise of TypeScript as this means you can easily migrate between the two languages without worrying about subtle differences that can cause your program to stop running.

Deleted Types

Roughly speaking, once the TypeScript compiler finishes checking your code, it Erases the types to produce the "compiled" code.
This means that once your code is compiled, the resulting JS code has no type information.

This also means that TypeScript never changes the behaviour programme based on inferred types.
The end result is that while you may see type errors during compilation, the type system itself has no influence on how your program works at runtime.

Finally, TypeScript does not provide any additional library at runtime.
Your programs will use the same default library (or external libraries) as JavaScript programs, so there is no specific TypeScript framework to learn.

Learning JavaScript and TypeScript

We often see the question "Should I learn JavaScript or TypeScript?".

The answer is that you can't learn TypeScript without learning JavaScript!
TypeScript shares javascript syntax and runtime behavior, so anything you learn about JavaScript will at the same time help you with TypeScript.

There are many resources available for programmers to learn JavaScript; you No you should ignore these features if you are writing TypeScript.
For example, in StackOverflow there are 20 times more questions with the javascript than the tag typescriptbut All the questions taggeadas with javascript are applicable to TypeScript.

If you find yourself looking for something like "how to sort a list in TypeScript," remember: TypeScript is the Runtime JavaScript with a build-time type analyzer.
The way to sort a list in TypeScript is the same as the one you use to do so in JavaScript.
If you find any features that use TypeScript directly, great, but don't just think you need something specific to TypeScript for day-to-day questions about how to perform run-time tasks

Next steps

This was a brief summary of the syntax and tools used in the day-to-day life of TypeScript. From here, you can:

Generated by 🚫 dangerJS against 929867d

@tomashugo
Copy link
Author

@khaosdoctor

Copy link
Contributor

@khaosdoctor khaosdoctor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small changes

@khaosdoctor
Copy link
Contributor

LGTM

@github-actions
Copy link
Contributor

Sorry @khaosdoctor, you don't have access to these files:

@luk3skyw4lker
Copy link
Contributor

I've also translated this file at #133

@khaosdoctor
Copy link
Contributor

lgtm

@github-actions
Copy link
Contributor

Sorry @khaosdoctor, you don't have access to these files:

@khaosdoctor
Copy link
Contributor

@tomashugo can you please remove the package-lock that was altered?

@github-actions
Copy link
Contributor

Thanks for the PR!

This section of the codebase is owned by @khaosdoctor and @danilofuchs - if they write a comment saying "LGTM" then it will be merged.

@tomashugo
Copy link
Author

@tomashugo can you please remove the package-lock that was altered?

Done

@tomashugo
Copy link
Author

I've also translated this file at #133

I dit it before

@khaosdoctor
Copy link
Contributor

LGTM

@github-actions
Copy link
Contributor

github-actions bot commented Sep 4, 2022

Sorry @khaosdoctor, this PR has merge conflicts. They'll need to be fixed before this can be merged.

@khaosdoctor
Copy link
Contributor

@tomashugo probably you'll need to merge master into your branch to solve those conflicts and then we can try again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants