Skip to content

Up to date MIGRANDO #24

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Feb 7, 2020
Merged

Up to date MIGRANDO #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8b8beb
Update migrating with new changes of original repo
dantehemerson Jan 19, 2020
b697988
Up to date ADVANCED and move Linting to README
dantehemerson Jan 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 129 additions & 103 deletions AVANZADO.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,22 @@ La mejor herramienta para crear bibliotecas React + TS en este momento es [`tsdx
- [TypeScript 3.2](#typescript-32)
- [TypeScript 3.3](#typescript-33)
- [TypeScript 3.4](#typescript-34)
- [TypeScript 3.5](#typescript-35)
- [TypeScript 3.6](#typescript-36)
- [TypeScript 3.7](#typescript-37)
- [Sección 3: Misceláneas](#sección-3-Misceláneas)

- [Escribir bibliotecas de TypeScript en lugar de aplicaciones](#escribir-bibliotecas-de-typeScript-en-lugar-de-aplicaciones)
- [Componentes Comentados](#componentes-comentados)
- [Componentes Namespaced](#componentes-namespaced)
- [Desarrollo de Sistemas de Diseño](#desarrollo-de-sistemas-de-diseño)
- [Migrando desde Flow](#migrando-desde-flow)
- [Prettier](#prettier)
- [Testing](#testing)
- [Linting](#linting)
- [Trabajar con bibliotecas que no son de TypeScript (escribe tu propio index.d.ts)](#trabajar-con-bibliotecas-que-no-son-de-typeScript-escribe-tu-propio-indexdts)
- [Sección 4: @types/react y @types/react-dom APIs](#sección-4-typesreact-y-typesreact-dom-apis)
- [Agregando atributos no estandarizados](#agregando-atributos-no-estandarizados)
- [@types/react-dom](#types-react-dom)

</details>

# Sección 0: Tipos de utilidad
Expand Down Expand Up @@ -699,7 +701,8 @@ Como puede ver en el ejemplo anterior de Omitir, también puede escribir una ló

_(Contribuido por [@ferdaber](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/issues/63))_

Hay muchos lugares donde desea reutilizar algunas piesas de props debido a _props drilling_, para que pueda exportar el tipo de accesorios como parte del módulo o extraerlos (de cualquier manera funciona).
Hay muchos lugares donde desea reutilizar algunas piesas de props debido a _props drilling_,
para que pueda exportar el tipo de accesorios como parte del módulo o extraerlos (de cualquier manera funciona).

La ventaja de extraer los tipos de props es que no necesitas exportar todo. Y el componente fuente se propagará a todos los componentes consumidores.

Expand Down Expand Up @@ -756,8 +759,7 @@ class DateIsInFutureError extends RangeError {}
function parse(date: string) {
if (!isValid(date))
throw new InvalidDateFormatError("no es un formato de fecha válido");
if (isInFuture(date))
throw new DateIsInFutureError("la fecha es en el futuro");
if (isInFuture(date)) throw new DateIsInFutureError("la fecha es en el futuro");
// ...
}

Expand All @@ -784,8 +786,7 @@ function parse(
): Date | InvalidDateFormatError | DateIsInFutureError {
if (!isValid(date))
return new InvalidDateFormatError("no es un formato de fecha válido");
if (isInFuture(date))
return new DateIsInFutureError("la fecha es en el futuro");
if (isInFuture(date)) return new DateIsInFutureError("la fecha es en el futuro");
// ...
}

Expand Down Expand Up @@ -893,6 +894,22 @@ Ayuda a escribir / usar componentes genéricos:

Más información: https://github.com/basarat/typescript-book/blob/master/docs/jsx/react.md#react-jsx-tip-generic-components

## TypeScript 3.0

[[Notas de la versión](https://github.com/Microsoft/TypeScript/releases/tag/v3.0.1) | [Publicación del blog](https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/)]

1. Parametros rest con tipo para escribir argumentos de longitud variable:

```ts
// `rest` acepta cualquier numero de strings - incluso ninguno!
function foo(...rest: string[]) {
// ...
}

foo("hello"); // funciona
foo("hello", "world"); // también funciona
```

2. Soporte para `propTypes` y`static defaultProps` en JSX usando `LibraryManagedAttributes`:

```tsx
Expand Down Expand Up @@ -1070,10 +1087,106 @@ const GenericComponent2 = myHoc(GenericComponent);

Consulte también [Notas de la actualización de Google a 3.5](https://github.com/microsoft/TypeScript/issues/33272)

## TypeScript Roadmap
## TypeScript 3.6

[[Notas de la versión](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-6.html) | [Publicación del blog](https://devblogs.microsoft.com/typescript/announcing-typescript-3-6/)]

Nada es particularmente específico de React, pero [el playground](https://github.com/agentcooper/typescript-play) recibió una actualización y [Las clases Ambientales y Funciones pueden fusionarse](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-6.html#ambient-classes-and-functions-can-merge)

## TypeScript 3.7

[[Notas de la versión](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html) | [Publicación del blog](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/)]

1. Optional Chaining

```ts
let x = foo?.bar.baz();

// es equivalente a

let x = foo === null || foo === undefined ? undefined : foo.bar.baz();

// Optional Element access
function tryGetFirstElement<T>(arr?: T[]) {
return arr?.[0];
}

// Llamada opcional
async function makeRequest(url: string, log?: (msg: string) => void) {
log?.(`Request started at ${new Date().toISOString()}`);
const result = (await fetch(url)).json();
log?.(`Request finished at at ${new Date().toISOString()}`);
return result;
}
```

2. Fusión nula

```ts
let x = foo ?? bar();

// es equivalente a

let x = foo !== null && foo !== undefined ? foo : bar();
```

**POR LO GENERAL DEBES USAR `??` SIEMPRE QUE USAS NORMALMENTE `||`** a menos que realmente te refieras a falsedad:

```tsx
function ShowNumber({ value }: { value: number }) {
let _value = value || 0.5; // reemplazará 0 con 0.5 incluso si el usuario se refiere a 0
// etc...
}
```

3. Funciones de Aserción

```tsx
function assert(condition: any, msg?: string): asserts condition {
if (!condition) {
throw new AssertionError(msg);
}
}
function yell(str) {
assert(typeof str === "string");

return str.toUppercase();
// ~~~~~~~~~~~
// error: La propiedad 'toUppercase' no existe en el tipo 'string'.
// Querías decir 'toUpperCase'?
}
```

También puede hacer assert sin una función personalizada
You can also assert without a custom function:

```tsx
function assertIsString(val: any): asserts val is string {
if (typeof val !== "string") {
throw new AssertionError("Not a string!");
}
}
function yell(str: any) {
assertIsString(str);

// Ahora Typescript sabe que 'str' es de tipo 'string'
return str.toUppercase();
// ~~~~~~~~~~~
// error: La propiedad 'toUppercase' no existe el tipo 'string'.
// Querías decir 'toUpperCase'?
}
```

4. `ts-nocheck`

Ahora puedes añadir `// @ts-nocheck` a la parte superior de los archivos Typescript! bueno para las migraciones.

## TypeScript Roadmap y Especificaciones

https://github.com/Microsoft/TypeScript/wiki/Roadmap

¿Sabía también que puede leer la especificación de TypeScript en línea? https://github.com/microsoft/TypeScript/blob/master/doc/spec.md

# Sección 3: Misceláneas

A veces, escribir React no se trata solo de React. Si bien no nos centramos en otras bibliotecas como Redux (ver más abajo para obtener más información al respecto), aquí hay algunos consejos sobre otras preocupaciones comunes al hacer aplicaciones con React + TypeScript.
Expand Down Expand Up @@ -1216,105 +1329,18 @@ yarn add -D prettier husky lint-staged
}
```

Esto está configurado para ti en [tsdx](https://github.com/palmerhq/tsdx/pull/45/files).

## Linting

> ⚠️ Nota que [TSLint ahora está en mantenimiento y deberías intentar usar ESLint en su lugar](https://medium.com/palantir/tslint-in-2019-1a144c2317a9). Si está interesado en los consejos de TSLint, consulte este PR desde [@azdanov](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/pull/14). El resto de esta sección solo se centra en ESLint.

> ⚠️ Este es un tema en evolución. `typescript-eslint-parser` ya no se mantiene y [el trabajo ha comenzado recientemente sobre`typescript-eslint` en la comunidad ESLint](https://eslint.org/blog/2019/01/future-typescript-eslint) para lleve ESLint con TSLint.

Siga los documentos de TypeScript + ESLint en https://github.com/typescript-eslint/typescript-eslint:

```
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
```

agregue un script `lint` a su`package.json`:

```json
"scripts": {
"lint": "eslint 'src/**/*.ts'"
},
```

y en `.eslintrc.json` adecuado:
Integrar esto con ESlint puede ser un problema. Todavía no hemos escrito mucho sobre esto, por favor contribuya si tiene una opinión firme. [Aquí hay un gist útil.](https://gist.github.com/JirkaVebr/519c7597517e4ba756d5b89e7cb4cc0e)

```json
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "eslint:recommended",
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"no-console": "warn",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": [
"error",
{ "vars": "all", "args": "after-used", "ignoreRestSiblings": false }
],
"no-empty": "warn"
}
}
```

Esto está tomado de [el `tsdx` PR](https://github.com/palmerhq/tsdx/pull/70/files) que es para **bibliotecas**.
Esto está configurado para ti en [tsdx](https://github.com/palmerhq/tsdx/pull/45/files).

Más opciones de `.eslintrc.json` se pueden desear para **aplicaciones**:
## Testing

```json
{
"extends": [
"airbnb",
"prettier",
"prettier/react",
"plugin:prettier/recommended",
"plugin:jest/recommended",
"plugin:unicorn/recommended"
],
"plugins": ["prettier", "jest", "unicorn"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"jest": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"overrides": [
{
"files": ["**/*.ts", "**/*.tsx"],
"parser": "typescript-eslint-parser",
"rules": {
"no-undef": "off"
}
}
]
}
```
¡Sí, puedes probar tus tipos! No debe usarlo para TODO, pero puede ayudar a prevenir regresiones:

Puede leer una [guía de configuración más completa de TypeScript + ESLint aquí](https://blog.matterhorn.dev/posts/learn-typescript-linting-part-1/) de Matterhorn, en particular consulte https://github.com/MatterhornDev/learn-typescript-linting.
- https://github.com/azz/jest-runner-tsc
- https://github.com/SamVerschueren/tsd
- https://github.com/ikatyang/dts-jest ([Demo](https://codesandbox.io/s/dts-test-frozen-public-demo-iyorn))
- https://github.com/microsoft/dtslint ([Intro to dtslint](https://www.youtube.com/watch?v=nygcFEwOG8w&feature=share)

## Trabajar con bibliotecas que no son de TypeScript (escribe tu propio index.d.ts)

Expand Down
Loading