2021-07-10 23:10:31 +00:00
# Buone pratiche per il codebase
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
## JavaScript generale
2021-07-08 09:39:56 +00:00
2021-08-27 16:23:06 +00:00
Nella maggior parte dei casi, il nostro [linter ](how-to-setup-freecodecamp-locally.md#follow-these-steps-to-get-your-development-environment-ready ) darà un avvertimento nel caso di un format che va contro le preferenze del nostro codebase.
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
Si incoraggia l'utilizzo di componenti funzionali invece di componenti basati su classi.
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
## TypeScript specifico
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
### Migrare un file da JavaScript a TypeScript
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
#### Mantenere la cronologia del file con Git
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
A volte cambiare il file da `<filename>.js` a `<filename>.ts` (o `.tsx` ) causa che il file originale viene cancellato e uno nuovo viene creato, altre volte è solo il nome del file a cambiare - per quanto riguarda Git. Idealmente, vogliamo che la storia del file sia conservata.
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
Il modo migliore per assicurarsene è:
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
1. Rinominare il file
2. Fare un commit con il flag `--no-verify` per prevenire gli avvertimenti di Husky per errori di lint
3. Fare il refactoring per la migrazione a TypeScript in un commit separato
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
> [!NOTE] Un editor come VSCode ha buona probabilità di mostrare comunque che un file è stato eliminato e uno nuovo è stato creato. Se usi la CLI (Command Line Interface) per eseguire `git add .`, allora VSCode mostrerà che il file è stato rinominato
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
### Convenzioni per i nomi
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
#### Interfacce e Tipi
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
Per la maggior parte, incoraggiamo l'uso di dichiarazioni di interfaccia piuttosto che di tipo.
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
Props di componenti React - suffissi con `Props`
2021-07-08 09:39:56 +00:00
```typescript
interface MyComponentProps {}
// type MyComponentProps = {};
const MyComponent = (props: MyComponentProps) => {};
```
2021-07-10 23:10:31 +00:00
Componenti React stateful - suffissi con `State`
2021-07-08 09:39:56 +00:00
```typescript
interface MyComponentState {}
// type MyComponentState = {};
class MyComponent extends Component< MyComponentProps , MyComponentState > {}
```
2021-07-10 23:10:31 +00:00
Default - nomi di oggetti in 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-07-10 23:10:31 +00:00
### Definizione di azioni
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-07-10 23:10:31 +00:00
### Come usare Reducer
2021-07-08 09:39:56 +00:00
```typescript
// Base reducer action without payload
type ReducerBase< T > = { type: T };
// Logic for handling optional payloads
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-07-10 23:10:31 +00:00
### Come fare il dispatch
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
Dentro un componente, importa le azioni e i selettori necessari.
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-07-10 23:10:31 +00:00
## Letture aggiuntive
2021-07-08 09:39:56 +00:00
2021-07-10 23:10:31 +00:00
- [Documentazione di TypeScript ](https://www.typescriptlang.org/docs/ )
- [CheatSheet di TypeScript con React ](https://github.com/typescript-cheatsheets/react#readme )