forked from labs42io/clean-code-typescript
-
Notifications
You must be signed in to change notification settings - Fork 1
/
README.md
2921 lines (2249 loc) · 79.7 KB
/
README.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
# clean-code-typescript [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Clean%20Code%20Typescript&url=https://github.com/labs42io/clean-code-typescript)
Conceptos del "Clean Code (código limpio)" adaptados a TypeScript.
Inspirado del repositorio [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript).
Traducción del repositorio [clean-code-typescript](https://github.com/labs42io/clean-code-typescript).
## Tabla de contenidos
1. [Introducción](#introducción)
2. [Variables](#variables)
3. [Funciones](#funciones)
4. [Objetos y Estructura de Datos](#objetos-y-estructura-de-datos)
5. [Clases](#clases)
6. [Principios SOLID](#principios-solid)
7. [Pruebas](#pruebas)
8. [Concurrencia](#concurrencia)
9. [Manejo de Errores](#manejo-de-errores)
10. [Formato](#formato)
11. [Comentarios](#comentarios-todo)
12. [Traducciones](#traducciones)
## Introducción
![Humorous image of software quality estimation as a count of how many expletives
you shout when reading code](https://www.osnews.com/images/comics/wtfm.jpg)
"Principios de la ingeniería de software", extraídos del libro de Robert C. Martin's
[_Clean Code_](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882),
adaptados a TypeScript. Esta no es una guía de estilos. Es una guía para hacer softwares
[legibles, reusables y refactorizables](https://github.com/ryanmcdermott/3rs-of-software-architecture) utilizando TypeScript.
No todos los principios aquí mencionados tienen que ser estrictamente seguidos, menos aún tienen
que ser aceptados universalmente. Estas son tan solo directrices.
Directrices que se han definido a lo largo de muchos años de experiencia colectiva por los autores de
_Clean Code_.
Nuestro trabajo como ingenieros de software tiene poco más de 50 años. Aún seguimos
aprendiendo muchas cosas. Cuando la arquitectura de software sea tan antigua como
lo es la misma arquitectura, tal vez tendremos que seguir directrices más duras. Por ahora,
dejemos que estas directrices funcionen como punto para evaluar la calidad del
código de TypeScript que tú y tu equipo producen.
Una cosa más: saber esto no te hará un mejor desarrollador de software y haber
trabajado con esta tecnología por muchos años no quiere decir que no cometerás
errores. Cada pieza de código comienza como un borrador, como arcilla mojada
que se transforma luego en la forma deseada. Finalmente, limpiamos las imperfecciones
cuando las identificamos con la ayuda de nuestro equipo. No te mortifiques por códigos
en borrador que necesiten mejoras. En vez de eso, ¡enfócate en mejorar el código!
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Variables
### Usa nombres de variables que tengan sentido
Distingue los nombres de las variables para que el lector sepa a qué se refieren.
**Mal:**
```ts
function between<T>(a1: T, a2: T, a3: T): boolean {
return a2 <= a1 && a1 <= a3;
}
```
**Bien:**
```ts
function between<T>(value: T, left: T, right: T): boolean {
return left <= value && value <= right;
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Usa nombres de variables que sean pronunciables
Si no puedes pronunciarlo, no puedes discutir sobre la variable sin sonar como idiota.
**Mal:**
```ts
type DtaRcrd102 = {
genymdhms: Date;
modymdhms: Date;
pszqint: number;
};
```
**Bien:**
```ts
type Customer = {
generationTimestamp: Date;
modificationTimestamp: Date;
recordId: number;
};
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Usa el mismo vocabulario para el mismo tipo de variable
**Mal:**
```ts
function getUserInfo(): User;
function getUserDetails(): User;
function getUserData(): User;
```
**Bien:**
```ts
function getUser(): User;
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Usa nombres fáciles de encontrar
Leeremos más código del que escribiremos. Es importante que el código que escribamos sea legible y pueda ser encontrado con facilidad. Cuando nombramos variables con nombres sin sentido o que son difíciles de encontrar, nuestros lectores sufren. Elige un nombre que sea fácil de encontrar. Herramientas como [Elllnt](https://typescript-eslint.io/) pueden ayudar a identificar constantes.
(También conocidas como cadenas mágicas y números mágicos)
**Mal:**
```ts
// Que significa este numero 86400000?
setTimeout(restart, 86400000);
```
**Bien:**
```ts
// Decláralas como constantes con nombre en mayúsculas.
const MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000;
setTimeout(restart, MILLISECONDS_IN_A_DAY);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Usa nombres de variables explicativas
**Mal:**
```ts
declare const users: Map<string, User>;
for (const keyValue of users) {
// iterar el mapa de usuarios
}
```
**Bien:**
```ts
declare const users: Map<string, User>;
for (const [id, user] of users) {
// iterar el mapa de usuarios
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita el mapeo mental
Lo explícito es mejor que lo implícito.
_La claridad es escencial._
**Mal:**
```ts
const u = getUser();
const s = getSubscription();
const t = charge(u, s);
```
**Bien:**
```ts
const user = getUser();
const subscription = getSubscription();
const transaction = charge(user, subscription);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### No agregar contexto innecesario
Si el nombre de tu clase/tipo/objeto expresa algo, no lo repitas en el nombre de tu variable.
**Mal:**
```ts
type Car = {
carMake: string;
carModel: string;
carColor: string;
};
function print(car: Car): void {
console.log(`${car.carMake} ${car.carModel} (${car.carColor})`);
}
```
**Bien:**
```ts
type Car = {
make: string;
model: string;
color: string;
};
function print(car: Car): void {
console.log(`${car.make} ${car.model} (${car.color})`);
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Usa argumentos por defecto en lugar de condicionales
Los argumentos por defecto son generalmente más legibles que las condicionales.
**Mal:**
```ts
function loadPages(count?: number) {
const loadCount = count !== undefined ? count : 10;
// ...
}
```
**Bien:**
```ts
function loadPages(count: number = 10) {
// ...
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Utilizar enumeraciones (enum) para darle sentido al código
Los "enums" pueden ayudar a darle sentido al código. Por ejemplo, cuando nos preocupa que algunos valores sean
diferentes en lugar de que tengan el valor exacto.
**Mal:**
```ts
const GENRE = {
ROMANTIC: 'romantic',
DRAMA: 'drama',
COMEDY: 'comedy',
DOCUMENTARY: 'documentary',
};
projector.configureFilm(GENRE.COMEDY);
class Projector {
// declaracion del proyector
configureFilm(genre) {
switch (genre) {
case GENRE.ROMANTIC:
// alguna logica a ser ejecutada
}
}
}
```
**Bien:**
```ts
enum GENRE {
ROMANTIC,
DRAMA,
COMEDY,
DOCUMENTARY,
}
projector.configureFilm(GENRE.COMEDY);
class Projector {
// declaration of Projector
configureFilm(genre) {
switch (genre) {
case GENRE.ROMANTIC:
// alguna logica a ser ejecutada
}
}
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
## Funciones
### Argumentos de las funciones (2 o menos idealmente)
Limitar la cantidad de los parámetros de las funciones es increíblemente importante porque hace que sea más fácil probar tus funciones.
Tener más de tres conduce a una explosión combinatoria donde tienes que probar una cantidad muy grande de casos diferentes con cada
argumento por separado.
Uno o dos argumentos es lo ideal. Deberías evitar tres argumentos en la medida de lo posible. Cualquier cosa más que eso debería ser
consolidada.
Usualmente, si tienes más de dos argumentos, tu función está intendando hacer más de lo que puede.
En casos en los que no sea así, la mayoría de las veces bastará como un objeto de nivel superior como argumento.
Considera el uso de objetos literales si necesitas muchos argumentos.
Para que sea obvio cuales propiedades son las que la función espera, puedes usar la sintaxis ["destructuring (destructuración)"](https://basarat.gitbook.io/typescript/future-javascript/destructuring).
Esto tiene algunas ventajas:
1. Cuando alguien lee la firma de una función, inmediatamente queda claro qué propiedades se están utilizando.
2. Puede ser utilizado para simular parámetros con nombres.
3. La destructuración también clona los valores del primitivo específico del objeto del argumento pasado en la función. Esto ayuda a prevenir efectos secundarios. Nota: los objetos y los arreglos que son destructurados del objeto del argumento NO SON clonados.
4. TypeScript te avisa sobre propiedades no utilizadas, cosa que sería imposible sin la destructuración.
**Mal:**
```ts
function createMenu(
title: string,
body: string,
buttonText: string,
cancellable: boolean,
) {
// ...
}
createMenu('Foo', 'Bar', 'Baz', true);
```
**Bien:**
```ts
function createMenu(options: {
title: string;
body: string;
buttonText: string;
cancellable: boolean;
}) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true,
});
```
Puedes mejorar aún más la legibilidad utilizando ["type aliases (tipos de alias)"](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases):
```ts
type MenuOptions = {
title: string;
body: string;
buttonText: string;
cancellable: boolean;
};
function createMenu(options: MenuOptions) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true,
});
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Las funciones deben realizar solo una cosa
Esta es sin duda la regla más importante en la ingeniería de software. Cuando las funciones realizan más de una cosa, se vuelven más difíciles de componer, probar y razonar. Cuando puedes aislar una función a una sola cosa, esta puede ser fácilmente refactorizada y tu código se verá mucho más limpio. Si tan solo tomaras esta declaración de esta guía, estarías por delante de muchos desarrolladores.
**Mal:**
```ts
function emailActiveClients(clients: Client[]) {
clients.forEach((client) => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
```
**Bien:**
```ts
function emailActiveClients(clients: Client[]) {
clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client: Client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Los nombres de las funciones deben expresar qué accion ejercen
**Mal:**
```ts
function addToDate(date: Date, month: number): Date {
// ...
}
const date = new Date();
// It's hard to tell from the function name what is added
addToDate(date, 1);
```
**Bien:**
```ts
function addMonthToDate(date: Date, month: number): Date {
// ...
}
const date = new Date();
addMonthToDate(date, 1);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Las funciones deben ser de solo un nivel de abstracción
Cuando tienes más de un nivel de abstracción tu función usualmente estará sobrecargada. Partir las funciones provee reutilización y a la vez son más fáciles de probar.
**Mal:**
```ts
function parseCode(code: string) {
const REGEXES = [
/* ... */
];
const statements = code.split(' ');
const tokens = [];
REGEXES.forEach((regex) => {
statements.forEach((statement) => {
// ...
});
});
const ast = [];
tokens.forEach((token) => {
// lex...
});
ast.forEach((node) => {
// parse...
});
}
```
**Bien:**
```ts
const REGEXES = [
/* ... */
];
function parseCode(code: string) {
const tokens = tokenize(code);
const syntaxTree = parse(tokens);
syntaxTree.forEach((node) => {
// parse...
});
}
function tokenize(code: string): Token[] {
const statements = code.split(' ');
const tokens: Token[] = [];
REGEXES.forEach((regex) => {
statements.forEach((statement) => {
tokens.push(/* ... */);
});
});
return tokens;
}
function parse(tokens: Token[]): SyntaxTree {
const syntaxTree: SyntaxTree[] = [];
tokens.forEach((token) => {
syntaxTree.push(/* ... */);
});
return syntaxTree;
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Elimina código que esté duplicado
Enfócate en evitar código duplicado.
El código que está duplicado es malo ya que hay un trozo de código más que modificar si necesitas cambiar algo.
Imagina que tienes un restaurante y controlas tu inventario: todos los tomates, las cebollas, las especias, etc.
Si tienes múltiples listas en las que está esta información, tendrás que actualizarlas todas cuando sirves un plato con tomates.
Si solo tienes una lista, ¡solo tendrás que actualizarla en un mismo lugar!
A veces tienes piezas de código duplicado porque difieren en pequeñas cosas, que comparten mucho en común, pero que sus diferencias te fuerzan a tener dos o más funciones separadas que hacen mucho de las mismas cosas. Eliminar el código duplicado significa crear una abstracción que pueda soportar este conjunto de cosas diferentes con tan solo una función, módulo o clase.
Tener la abstracción correcta es escencial, es por esto que deberías seguir los principios ["Solid (sólido)"](#principios-solid). Las malas abstracciones pueden ser peores que el código duplicado, así que, ¡ten cuidado! Habiendo dicho esto, si puedes hacer una buena abstracción, ¡hazlo! No repitas el código, si no, te encontrarás teniendo que actualizar el código en diferentes lugares cada vez que quieras cambiar tan solo una cosa.
**Mal:**
```ts
function showDeveloperList(developers: Developer[]) {
developers.forEach((developer) => {
const expectedSalary = developer.calculateExpectedSalary();
const experience = developer.getExperience();
const githubLink = developer.getGithubLink();
const data = {
expectedSalary,
experience,
githubLink,
};
render(data);
});
}
function showManagerList(managers: Manager[]) {
managers.forEach((manager) => {
const expectedSalary = manager.calculateExpectedSalary();
const experience = manager.getExperience();
const portfolio = manager.getMBAProjects();
const data = {
expectedSalary,
experience,
portfolio,
};
render(data);
});
}
```
**Bien:**
```ts
class Developer {
// ...
getExtraDetails() {
return {
githubLink: this.githubLink,
};
}
}
class Manager {
// ...
getExtraDetails() {
return {
portfolio: this.portfolio,
};
}
}
function showEmployeeList(employee: Developer | Manager) {
employee.forEach((employee) => {
const expectedSalary = employee.calculateExpectedSalary();
const experience = employee.getExperience();
const extra = employee.getExtraDetails();
const data = {
expectedSalary,
experience,
extra,
};
render(data);
});
}
```
También puede considerar añadir un tipo de unión, o una clase padre común si se adapta a su abstracción.
```ts
class Developer {
// ...
}
class Manager {
// ...
}
type Employee = Developer | Manager
function showEmployeeList(employee: Employee[]) {
// ...
});
}
```
Deberías ser crítico sobre el código duplicado. A veces hay más intercambio entre código duplicado y se vuelve más complejo cuando introduces una abstracción innecesaria. Cuando dos implementaciones de dos módulos diferentes se ven similares pero se encuentran en diferentes dominios, duplicar el código es aceptado y preferible a la extracción del código común. El código común extraído en este caso introduce una dependencia indirecta entre los dos módulos.
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Establece objetos predeterminados con "Object.assign" o destructurando
**Mal:**
```ts
type MenuConfig = {
title?: string;
body?: string;
buttonText?: string;
cancellable?: boolean;
};
function createMenu(config: MenuConfig) {
config.title = config.title || 'Foo';
config.body = config.body || 'Bar';
config.buttonText = config.buttonText || 'Baz';
config.cancellable =
config.cancellable !== undefined ? config.cancellable : true;
// ...
}
createMenu({ body: 'Bar' });
```
**Bien:**
```ts
type MenuConfig = {
title?: string;
body?: string;
buttonText?: string;
cancellable?: boolean;
};
function createMenu(config: MenuConfig) {
const menuConfig = Object.assign(
{
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true,
},
config,
);
// ...
}
createMenu({ body: 'Bar' });
```
O, podrias usar el "spread operator" (operador de dispersión)
```ts
function createMenu(config: MenuConfig) {
const menuConfig = {
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true,
...config,
};
// ...
}
```
Alternativamente, puedes destructurar con valores por defecto:
```ts
type MenuConfig = {
title?: string;
body?: string;
buttonText?: string;
cancellable?: boolean;
};
function createMenu({
title = 'Foo',
body = 'Bar',
buttonText = 'Baz',
cancellable = true,
}: MenuConfig) {
// ...
}
createMenu({ body: 'Bar' });
```
Para evitar cualquier efecto secundario o comportamiento inesperado pasando explícitamente el valor `undefined` o `null`, puedes decirle al compilador de TypeScript que no lo permita.
Lee la opción [`--strictNullChecks`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#--strictnullchecks) en TypeScript.
**[⬆ volver al inicio](#tabla-de-contenidos)**
### No uses indicadores como parámetros de funciones
Las indicaciones le dicen al usuario que una función hace más que una sola cosa.
Las funciones deben hacer solo una cosa. Divide tus funciones si siguen diferentes rutas de código basadas en boolean (booleano).
**Mal:**
```ts
function createFile(name: string, temp: boolean) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}
```
**Bien:**
```ts
function createTempFile(name: string) {
createFile(`./temp/${name}`);
}
function createFile(name: string) {
fs.create(name);
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita efectos secundarios (parte 1)
Una función produce un efecto secundario si no hace más que tomar un valor y devolver otro(s) valor(es).
Un efecto secundario pudiera ser: modificar un archivo, modificar una variable global o accidentalmente enviar todo tu dinero a un extraño.
Ahora, necesitas tener efectos secundarios en un programa en ciertas ocasiones. Al igual que el ejemplo anterior, tal vez tendrás que modificar un archivo. Lo ideal es centralizar dónde estás haciendo esto. No tengas demasiadas funciones y clases que modifiquen un archivo en particular.
Ten un servicio que lo haga. Solo uno.
El punto principal es evitar problemas como compartir el estado entre objetos sin ninguna estructura, usatilizando tipos de datos mutables que puedan ser escritos por cualquier cosa y no centralizar dónde ocurren los efectos secundarios. Si puedes hacer esto, serás más feliz que la gran mayoría de los demás programadores.
**Mal:**
```ts
// Variable global referenciada por la siguiente función.
let name = 'Robert C. Martin';
function toBase64() {
name = btoa(name);
}
toBase64();
// Si tuviéramos otra función que utilizara este nombre, ahora sería un valor en Base64
console.log(name); // espera imprimir 'Robert C. Martin' pero en su lugar imprime 'Um9iZXJ0IEMuIE1hcnRpbg=='
```
**Bien:**
```ts
const name = 'Robert C. Martin';
function toBase64(text: string): string {
return btoa(text);
}
const encodedName = toBase64(name);
console.log(name);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita efectos secundarios (parte 2)
Los navegadores y Node.js sólo procesan JavaScript, por lo que cualquier código TypeScript tiene que ser compilado antes de ejecutarse o depurarse. En JavaScript, algunos valores son inmutables y otros son mutables. Los objetos y las matrices son dos tipos de valores mutables, por lo que es importante manejarlos con cuidado cuando se pasan como parámetros a una función. Una función JavaScript puede cambiar las propiedades de un objeto o alterar el contenido de una matriz, lo que fácilmente podría causar errores en otro lugar.
Supongamos que hay una función que acepta como parámetro un array que representa un carrito de la compra. Si la función hace un cambio en ese array del carrito de la compra - añadiendo un artículo a comprar, por ejemplo - entonces cualquier otra función que utilice ese mismo array del carrito se verá afectada por esta adición. Eso puede ser genial, sin embargo también podría ser malo. Imaginemos una mala situación:
El usuario hace clic en el botón "Comprar", que llama a una función de compra que genera una solicitud de red y envía la matriz del carro al servidor. Debido a una mala conexión de red, la función de compra tiene que seguir reintentando la petición. Ahora bien, ¿qué ocurre si mientras tanto el usuario pulsa accidentalmente el botón "Añadir a la cesta" en un artículo que en realidad no quiere antes de que comience la solicitud de red? Si eso ocurre y la petición de red comienza, entonces esa función de compra enviará el artículo añadido accidentalmente porque el array del carrito fue modificado.
Una buena solución sería que la función addItemToCart clonara siempre el carrito, lo editara y devolviera el clon. Esto aseguraría que las funciones que todavía están utilizando el antiguo carro de la compra no se verían afectadas por los cambios.
Dos advertencias a mencionar sobre este enfoque:
1. Puede haber casos en los que realmente quieras modificar el objeto de entrada, pero cuando adoptes esta práctica de programación te darás cuenta de que esos casos son bastante raros. La mayoría de las cosas se pueden refactorizar para que no tengan efectos secundarios. (ver [función pura](https://en.wikipedia.org/wiki/Pure_function))
2. Clonar objetos grandes puede ser muy costoso en términos de rendimiento. Afortunadamente, esto no es un gran problema en la práctica porque hay [grandes bibliotecas](https://github.com/immutable-js/immutable-js) que permiten que este tipo de enfoque de programación sea rápido y no tan intensivo en memoria como lo sería para ti clonar manualmente objetos y arrays.
**Mal:**
```ts
function addItemToCart(cart: CartItem[], item: Item): void {
cart.push({ item, date: Date.now() });
}
```
**Bien:**
```ts
function addItemToCart(cart: CartItem[], item: Item): CartItem[] {
return [...cart, { item, date: Date.now() }];
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### No escribas a funciones globales
Contaminar las funciones globales es una mala práctica en JavaScript ya que podría interferir con otra librería y el usuario de tu API no sería el más afortunado hasta que consiga una excepción en la producción. Imaginemos un ejemplo: ¿qué pasa si quisieras extender el método de arreglo nativo de JavaScript para tener un método (`diff`) que pudiera mostrarte la diferencia entre dos arreglos? Podrías escribir una nueva función con `Array.prototype`, pero que esta pudiera interferir con otra librería que intentara hacer lo mismo. ¿Qué ocurre entonces si esa librería simplemente estuviera utilizando `diff` para encontrar la diferencia entre el primero y el último elemento dentro de un arreglo? Es por esto que sería mucho mejor tan solo utilizar clases y extender el `Array`(arreglo) global.
**Mal:**
```ts
declare global {
interface Array<T> {
diff(other: T[]): Array<T>;
}
}
if (!Array.prototype.diff) {
Array.prototype.diff = function <T>(other: T[]): T[] {
const hash = new Set(other);
return this.filter((elem) => !hash.has(elem));
};
}
```
**Bien:**
```ts
class MyArray<T> extends Array<T> {
diff(other: T[]): T[] {
const hash = new Set(other);
return this.filter((elem) => !hash.has(elem));
}
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Favorece a la programación funcional sobre la programación imperativa
Favorece este estilo de programación siempre que puedas.
**Mal:**
```ts
const contributions = [
{
name: 'Uncle Bobby',
linesOfCode: 500,
},
{
name: 'Suzie Q',
linesOfCode: 1500,
},
{
name: 'Jimmy Gosling',
linesOfCode: 150,
},
{
name: 'Gracie Hopper',
linesOfCode: 1000,
},
];
let totalOutput = 0;
for (let i = 0; i < contributions.length; i++) {
totalOutput += contributions[i].linesOfCode;
}
```
**Bien:**
```ts
const contributions = [
{
name: 'Uncle Bobby',
linesOfCode: 500,
},
{
name: 'Suzie Q',
linesOfCode: 1500,
},
{
name: 'Jimmy Gosling',
linesOfCode: 150,
},
{
name: 'Gracie Hopper',
linesOfCode: 1000,
},
];
const totalOutput = contributions.reduce(
(totalLines, output) => totalLines + output.linesOfCode,
0,
);
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Encapsula condicionales
**Mal:**
```ts
if (subscription.isTrial || account.balance > 0) {
// ...
}
```
**Bien:**
```ts
function canActivateService(subscription: Subscription, account: Account) {
return subscription.isTrial || account.balance > 0;
}
if (canActivateService(subscription, account)) {
// ...
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita condicionales negativas
**Mal:**
```ts
function isEmailNotUsed(email: string): boolean {
// ...
}
if (isEmailNotUsed(email)) {
// ...
}
```
**Bien:**
```ts
function isEmailUsed(email: string): boolean {
// ...
}
if (!isEmailUsed(node)) {
// ...
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita las condicionales
Esta parece una tarea imposible. Cuando las personas escuchan esto por primera vez, la mayoría dice, "¿cómo se supone que haga algo sin una declaración `if`?" La respuesta es: puedes utilizar el polimorfismo para lograr la misma tarea en muchos casos. La segunda pregunta es una muy usual, "bueno, eso suena bien, pero, ¿por qué lo haría así?" La respuesta es un concepto del código limpio que ya hemos aprendido anteriormente: las funciones deberían hacer una sola cosa. Cuando tienes clases y funciones que tienen declaraciones `if`, estás expresando que tu función hace más de una cosa. Recuerda, solo una cosa.
**Mal:**
```ts
class Airplane {
private type: string;
// ...
getCruisingAltitude() {
switch (this.type) {
case '777':
return this.getMaxAltitude() - this.getPassengerCount();
case 'Air Force One':
return this.getMaxAltitude();
case 'Cessna':
return this.getMaxAltitude() - this.getFuelExpenditure();
default:
throw new Error('Unknown airplane type.');
}
}
private getMaxAltitude(): number {
// ...
}
}
```
**Bien:**
```ts
abstract class Airplane {
protected getMaxAltitude(): number {
// shared logic with subclasses ...
}
// ...
}
class Boeing777 extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getPassengerCount();
}
}
class AirForceOne extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude();
}
}
class Cessna extends Airplane {
// ...
getCruisingAltitude() {
return this.getMaxAltitude() - this.getFuelExpenditure();
}
}
```
**[⬆ volver al inicio](#tabla-de-contenidos)**
### Evita la comprobación del tipo de letra
TypeScript es un superconjunto de JavaScript estricto sintácticamente que añade la comprobación del tipo de letra. Siempre es preferible especificar tipos de variables, parámetros y devolver valores para aprovechar la máxima potencia de las funcionalidades de TypeScript. Esto hace que la refactorización sea más simple.
**Mal:**
```ts
function travelToTexas(vehicle: Bicycle | Car) {
if (vehicle instanceof Bicycle) {
vehicle.pedal(currentLocation, new Location('texas'));
} else if (vehicle instanceof Car) {
vehicle.drive(currentLocation, new Location('texas'));
}
}