Create an example PR which shows how to add a language#181
Conversation
orta
left a comment
There was a problem hiding this comment.
Here's what some of these files are and how they interact
| @@ -0,0 +1,23 @@ | |||
| //// { title: "Fluxo de código", order: 3, compiler: { strictNullChecks: true } } | |||
There was a problem hiding this comment.
Playground support
The original file is "Code Flow.ts" which will override this file - in English the filename is the title, but you can change it to your own language
| const users = [{ name: 'Ahmed' }, { name: 'Gemma' }, { name: 'João' }] | ||
|
|
||
| // Vamos ver se conseguimos encontrar um usuário chamado "João". | ||
| const joao = users.find(u => u.name === 'João') |
There was a problem hiding this comment.
I switched the code from "Jon" to "João" to fit the audience. I think some of this is good, but I would ask that you please keep a diverse set of names in the examples (gender / nationality is mainly what I strive for)
| "id": "Playground", | ||
| "subtitle": "Saiba o que mudou neste site." | ||
| } | ||
| ], |
There was a problem hiding this comment.
This file dictates the name and metadata - given that the names were so small, it didn't really need changing
| "Fixits", | ||
| // Playground | ||
| "Config", | ||
| "Tooling" |
There was a problem hiding this comment.
This uses filenames, so it might be redundant. In the future I might remove this from non-english to simplify translator's jobs.
| @@ -0,0 +1,5 @@ | |||
| --- | |||
There was a problem hiding this comment.
TSConfig Support
These are the names of the category of compiler options, as well as an overview of the grouping.
| --- | ||
| display: "Arquivos" | ||
| oneline: "Incluir uma lista definida de arquivos, não suporta globs" | ||
| --- |
There was a problem hiding this comment.
This is the docs for an individual tsconfig option: "files" - you can change the name here, but it will only change the header.
At the top it will still say files:
Then further down it will show both this display, and the compiler flag name:

oneline is used in the playground TSConfig reference, you should have one for every option though.
| export const lang: Copy = defineMessages({ | ||
| ...navCopy, | ||
| ...docCopy, | ||
| }) |
There was a problem hiding this comment.
This is how we do language translation in the React side, you have an object which returns keys and values and you incrementally add new references. In this case only the navCopy comes from the pt subfolder instead of English.
import { navCopy } from "./pt/nav"| nav_beta: "Pesquise no site TypeScript", | ||
| nav_beta_notification: | ||
| "Nota: esta página é uma página beta, não confie nos problemas de URL e de arquivos <a>no microsoft/TypeScript-Website</a>", | ||
| } |
There was a problem hiding this comment.
This object first fills with the English copy, then adds the Portuguese copy.

I'm not going to merge this PR (most of the translation was done via Google Translate) but this PR exists to show you a working example of adding a language to the TypeScript website:
I added the beginnings of Portuguese, click the images to go through to the PR deploy:
Will leave a review with inline info now