2021-09-19 19:06:45 +00:00
# Las mejores prácticas de la base de código
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
## JavaScript en general
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
En la mayoría de los casos, nuestro [linter ](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready ) advertirá de cualquier formato que vaya en contra de la práctica definida de la base de código.
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
Se recomienda utilizar componentes funcionales en vez de componentes basados en clases.
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
## TypeScript específico
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
### Migrando un archivo JavaScript a TypeScript
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
#### Retención del historial de archivos Git
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
A veces, cambiar el archivo de `<filename>.js` a `<filename>.ts` (o `.tsx` ) causa que el archivo original se elimine, y crea uno nuevo. Otras veces, el nombre del archivo solo cambia - en términos de Git. Preferiblemente, queremos que el historial del archivo se conserve.
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
La mejor manera de lograr esto es:
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
1. Renombrar el archivo
2. Comenta con la etiqueta `--no-verify` para evitar que Husky se queje de los errores de lint
3. Refactoriza a TypeScript para la migración, en un commit separado
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
> [!NOTE] Es probable que los editores como VSCode te muestren que el archivo se ha eliminado y que se ha creado uno nuevo. Si utilizas CLI para `git add .`, entonces VSCode mostrará el archivo como renombrado en stage
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
### Convenciones de nomenclatura
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
#### Interfaces y Tipos
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
Por lo general, se recomienda utilizar declaraciones de interfaz en lugar de declaraciones de tipo.
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
Propiedades de componentes React - Sufijo de `Props`
2021-07-08 09:39:56 +00:00
```typescript
interface MyComponentProps {}
// type MyComponentProps = {};
const MyComponent = (props: MyComponentProps) => {};
```
2021-09-19 19:06:45 +00:00
Componentes React con Estado - sufijo con `State`
2021-07-08 09:39:56 +00:00
```typescript
interface MyComponentState {}
// type MyComponentState = {};
class MyComponent extends Component< MyComponentProps , MyComponentState > {}
```
2021-09-19 19:06:45 +00:00
Predeterminado - nombre del objeto en PascalCase
2021-07-08 09:39:56 +00:00
```typescript
interface MyObject {}
// type MyObject = {};
const myObject: MyObject = {};
```
<!-- #### Redux Actions -->
<!-- TODO: Once refactored to TS, showcase naming convention for Reducers/Actions and how to type dispatch funcs -->
## Redux
2021-09-19 19:06:45 +00:00
### Definición de acciones
2021-07-08 09:39:56 +00:00
```typescript
enum AppActionTypes = {
actionFunction = 'actionFunction'
}
export const actionFunction = (
arg: Arg
): ReducerPayload< AppActionTypes.actionFunction > => ({
type: AppActionTypes.actionFunction,
payload: arg
});
```
2021-09-19 19:06:45 +00:00
### Cómo reducir
2021-07-08 09:39:56 +00:00
```typescript
2021-09-27 17:50:01 +00:00
// Base reducer action without payload
2021-07-08 09:39:56 +00:00
type ReducerBase< T > = { type: T };
2021-09-27 17:50:01 +00:00
// Logic for handling optional payloads
2021-07-08 09:39:56 +00:00
type ReducerPayload< T extends AppActionTypes > =
T extends AppActionTypes.actionFunction
? ReducerBase< T > & {
payload: AppState['property'];
}
: ReducerBase< T > ;
// Switch reducer exported to Redux combineReducers
export const reducer = (
state: AppState = initialState,
action: ReducerPayload< AppActionTypes >
): AppState => {
switch (action.type) {
case AppActionTypes.actionFunction:
return { ...state, property: action.payload };
default:
return state;
}
};
```
2021-09-19 19:06:45 +00:00
### Cómo enviar
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
Dentro de un componente, importa las acciones y los selectores necesarios.
2021-07-08 09:39:56 +00:00
```tsx
// Add type definition
interface MyComponentProps {
actionFunction: typeof actionFunction;
}
// Connect to Redux store
const mapDispatchToProps = {
actionFunction
};
// Example React Component connected to store
const MyComponent = ({ actionFunction }: MyComponentProps): JSX.Element => {
const handleClick = () => {
// Dispatch function
actionFunction();
};
return < button onClick = {handleClick} > freeCodeCamp is awesome!< / button > ;
};
export default connect(null, mapDispatchToProps)(MyComponent);
```
<!-- ### Redux Types File -->
<!-- The types associated with the Redux store state are located in `client/src/redux/types.ts` ... -->
2021-09-19 19:06:45 +00:00
## Lectura Adicional
2021-07-08 09:39:56 +00:00
2021-09-19 19:06:45 +00:00
- [Documentos de TypeScript ](https://www.typescriptlang.org/docs/ )
- [TypeScript con hoja de trucos de React ](https://github.com/typescript-cheatsheets/react#readme )