forked from labs42io/clean-code-typescript
-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathREADME.md
2984 lines (2206 loc) · 101 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 [](https://twitter.com/intent/tweet?text=Clean%20Code%20Typescript&url=https://github.com/labs42io/clean-code-typescript)
Концепции чистого кода адаптированные для TypeScript, вдохновленные [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript).
Оригинал на английском [clean-code-typescript](https://github.com/labs42io/clean-code-typescript)
*У переводчика не идеальные знания английского, указывайте пожалуйста на [ошибки](https://github.com/Real001/clean-code-typescript/issues/5)!*
## Содержание
1. [Введение](#введение)
2. [Переменные](#переменные)
3. [Функции](#функции)
4. [Объекты и структуры данных](#объекты-и-структуры-данных)
5. [Классы](#классы)
6. [SOLID](#solid)
7. [Тестирование](#тестирование)
8. [Асинхронность](#асинхронность)
9. [Обработка ошибок](#обработка-ошибок)
10. [Форматирование](#форматирование)
11. [Комментарии](#комментарии)
12. [Переводы](#переводы)
## Введение

Инженерные принципы ПО, из книги Robert C. Martin'
[*Clean Code*](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882),
адаптированные для TypeScript. Это не руководство по стилю. Это руководство по написанию
[читаемого, переиспользуемого и пригодного для рефакторинга](https://github.com/ryanmcdermott/3rs-of-software-architecture) кода на TypeScript.
Не каждый принцип описанный здесь должен строго соблюдаться и еще меньше получать
всеобщего признаний. Это принципы и ни чего более, оно они накапливались в течение
многих лет с опытом коллектива авторов *Чистого Кода*
Ремеслу по написанию программного обеспечения чуть более 50 лет, но мы все еще многому учимся.
Когда программная архитектура постареет до возрастра самой архитектуры, быть может тогда у нас
появятся жесткие правила которым необходимо следовать. А сейчас пусть это служит критериями,
с помощью которого вы будете оценивать качество вашего TypeScript кода и вашей команды.
И еще одна вещь: знание этих принципов не делает вас сразу лучшим разработчиком ПО, а их использование в
течение многих лет не гарантирует, что вы не будете совершать ошибки. Каждый кусок кода начинается как
черновик, как мокрый кусок глины который только постепенно приобретает свою форму. Не упрекайте себя при
первых набросках кода, которые нуждаются в улучшении. Улучшайте код вместо этого!
**[⬆ Вернуться в начало](#содержание)**
## Переменные
### Используйте выразительные имена переменных
Различайте имена таким образом, чтобы читатель знал что они означают.
**Плохо:**
```ts
function between<T>(a1: T, a2: T, a3: T): boolean {
return a2 <= a1 && a1 <= a3;
}
```
**Хорошо:**
```ts
function between<T>(value: T, left: T, right: T): boolean {
return left <= value && value <= right;
}
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте произносительные имена переменных
Если вы не можете произносить их, вы не можете обсуждать их не выглядя как идиот.
**Плохо:**
```ts
type DtaRcrd102 = {
genymdhms: Date;
modymdhms: Date;
pszqint: number;
}
```
**Хорошо:**
```ts
type Customer = {
generationTimestamp: Date;
modificationTimestamp: Date;
recordId: number;
}
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте один и тот же словарь для одних и тех же типов переменных
**Плохо:**
```ts
function getUserInfo(): User;
function getUserDetails(): User;
function getUserData(): User;
```
**Хорошо:**
```ts
function getUser(): User;
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте имена, доступные для поиска
Мы читаем больше кода, чем пишем. Это важно чтобы код, который мы пишем, был читаемым и доступным для поиска.
Не называйте переменные, которые в конечном итоге имеют смысл только для наших программ мы вредим нашим читателям.
Делайте ваши имена доступными для поиска.
Такие инструменты, как [TSLint](https://palantir.github.io/tslint/rules/no-magic-numbers/) и [ESLint](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-magic-numbers.md)
могут помочь идентифицировать не названные константы.
**Плохо:**
```ts
// What the heck is 86400000 for?
setTimeout(restart, 86400000);
```
**Хорошо:**
```ts
// Declare them as capitalized named constants.
const MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000;
setTimeout(restart, MILLISECONDS_IN_A_DAY);
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте объясняющие переменные
**Плохо:**
```ts
declare const users: Map<string, User>;
for (const keyValue of users) {
// iterate through users map
}
```
**Хорошо:**
```ts
declare const users: Map<string, User>;
for (const [id, user] of users) {
// iterate through users map
}
```
**[⬆ Вернуться в начало](#содержание)**
### Избегайте мысленного связывания
Явное лучше, чем неявное.
*Ясность - это король.*
**Плохо:**
```ts
const u = getUser();
const s = getSubscription();
const t = charge(u, s);
```
**Хорошо:**
```ts
const user = getUser();
const subscription = getSubscription();
const transaction = charge(user, subscription);
```
**[⬆ Вернуться в начало](#содержание)**
### Не добавляйте не нужный контекст
Если имя вашего класса/типа/объекта говорит само за себя, не повторяйте его в вашем имени переменной.
**Плохо:**
```ts
type Car = {
carMake: string;
carModel: string;
carColor: string;
}
function print(car: Car): void {
console.log(`${car.carMake} ${car.carModel} (${car.carColor})`);
}
```
**Хорошо:**
```ts
type Car = {
make: string;
model: string;
color: string;
}
function print(car: Car): void {
console.log(`${car.make} ${car.model} (${car.color})`);
}
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте аргументы по умолчанию вместо замыканий или вычислений
Аргументы по умолчанию часто чище, чем короткое вычисление.
**Плохо:**
```ts
function loadPages(count?: number) {
const loadCount = count !== undefined ? count : 10;
// ...
}
```
**Хорошо:**
```ts
function loadPages(count: number = 10) {
// ...
}
```
**[⬆ Вернуться в начало](#содержание)**
### Используйте enum для документирования
Enam'ы могут помочь документированию вашего кода. Например когда мы обеспокоены тем, что наши переменные
отличаются от значений.
**Плохо:**
```ts
const GENRE = {
ROMANTIC: 'romantic',
DRAMA: 'drama',
COMEDY: 'comedy',
DOCUMENTARY: 'documentary',
}
projector.configureFilm(GENRE.COMEDY);
class Projector {
// delactation of Projector
configureFilm(genre) {
switch (genre) {
case GENRE.ROMANTIC:
// some logic to be executed
}
}
}
```
**Хорошо:**
```ts
enum GENRE {
ROMANTIC,
DRAMA,
COMEDY,
DOCUMENTARY,
}
projector.configureFilm(GENRE.COMEDY);
class Projector {
// delactation of Projector
configureFilm(genre) {
switch (genre) {
case GENRE.ROMANTIC:
// some logic to be executed
}
}
}
```
**[⬆ Вернуться в начало](#содержание)**
## Функции
### Аргументы функции (идеально два или меньше)
Ограничение количества параметров функции невероятно важно, потому что это делает тестирование ваших
функций проще. Наличие более 3-х аргументов приводит к комбинаторному взрыву, где вы должны протестировать
множество вариантов с каждым отдельным аргументом
Один или два аргумента это идеальный случай, а три и более следует избегать, если это возможно.
Большое количество аргументов лучше объеденять. Обычно если вы используете более двух аргументов, то ваша функция пытается
делать слишком много. В случаях когда это не так, то лучше использовать объект верхнего уровня.
Подумайте о том чтобы использовать объектные литералы, если вам необходимо много аргументов.
Для того чтобы вы знали какие параметры ожидает функция, вы можете использовать
[синтаксис деструктуризации](https://basarat.gitbooks.io/typescript/docs/destructuring.html).
Он имеет несколько преимуществ:
1. Когда кто-то смотрит на синатуру функции, то сразу становится понятка какие свойства она использует.
2. Деструктуризация также клонирует примитивные значения аргумента-объекта переданного в функцию.
Это помогает избежать сайд эффекта. Заметка: объекты и массивы которые деструктурированы из аргумента-объекта не клонируются.
3. TypeScript предупреждает о неиспользуемых свойствах, это было бы не возможно без деструктуризации.
**Плохо:**
```ts
function createMenu(title: string, body: string, buttonText: string, cancellable: boolean) {
// ...
}
createMenu('Foo', 'Bar', 'Baz', true);
```
**Хорошо:**
```ts
function createMenu(options: { title: string, body: string, buttonText: string, cancellable: boolean }) {
// ...
}
createMenu({
title: 'Foo',
body: 'Bar',
buttonText: 'Baz',
cancellable: true
});
```
Вы можете еще больше повысить читаемость, если будете использовать [type aliases](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
});
```
**[⬆ back to top](#содержание)**
### Функции должны выполнять одну задачу
Это одно из самых важных правил в разработке ПО. Когда функции решают больше одной задачи,
их труднее объеденять, тестировать. Если вы сможете изолировать функцию так чтобы она выполняла только одну задачу,
в дальнейшем она может быть легко переработана, а ваш код будет чище. Если вы запомните только это правило из этого
руководства, то вы уже будете лучше многих разработчиков.
**Плохо:**
```ts
function emailClients(clients: Client[]) {
clients.forEach((client) => {
const clientRecord = database.lookup(client);
if (clientRecord.isActive()) {
email(client);
}
});
}
```
**Хорошо:**
```ts
function emailClients(clients: Client[]) {
clients.filter(isActiveClient).forEach(email);
}
function isActiveClient(client: Client) {
const clientRecord = database.lookup(client);
return clientRecord.isActive();
}
```
**[⬆ back to top](#содержание)**
### Название функций должны описывать что они делают
**Плохо:**
```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);
```
**Хорошо:**
```ts
function addMonthToDate(date: Date, month: number): Date {
// ...
}
const date = new Date();
addMonthToDate(date, 1);
```
**[⬆ back to top](#содержание)**
### Функции должны иметь один уровень абстракции
Если у вас больше одного уровня абстракции, то обычно эта функция делает слишком многое. Разделение функций дает возможность
переиспользования и простого тестирования.
**Плохо:**
```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...
});
}
```
**Хорошо:**
```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;
}
```
**[⬆ back to top](#содержание)**
### Удаляйте дублированный код
Делайте все возможное, чтобы избежать дублирования кода.
Дублирование кода плохо, тем что если вам придется править логику, её придется править в нескольких местах.
Представьте если вы открыли ресторан и ведете учет ваших продуктов: всех ваших томатов, лука, чеснока, специй и д.р..
Если у вас закажут блюда из томатов то вам придется вносить изменения во все ваши списки. Если список будет только один
то и править нужно будет только его.
Часто вы дублируете код из-за того что когда вам требуется реализовать два и более незначительно различающихся действий,
которые очень похожи, но их различия заставляют вас завести несколько функций, делающий практически одно и тоже. Удаление
дублирующихся частей кода, означает создание абстракции, обрабатывающий разную логику с помощью всего одной функции/модуля/класса.
Получение абстракции имеет важное значение, поэтому вы должны следовать принципам [SOLID](#solid). Плохие абстракции могут
оказаться хуже дублирующего кода, будьте осторожны! Если вы можете сделать хорошую абстракцию делайте. Не повторяйте себя
в противном случае вы можете обнаружить себя вносящим изменения в разные места, для одной единственной логики.
**Плохо:**
```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);
});
}
```
**Хорошо:**
```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);
});
}
```
Вы должны критически относиться к дублированию кода. Иногда существует компромисс между дублированием кода и увеличением
сложности, вводя новую абстракцию. Когда две реализации из двух разных модулей выглядят одинаково, но существуют в разных
доменах, дублирование может быть приемлемым и предпочтительным вариантом, нежели объединений в общий код. Перенос логики
в общий код, вводит косвенную зависимость между двумя модулями.
**[⬆ back to top](#содержание)**
### Устанавливайте объекты по умолчанию с помощью Object.assign или деструктуризации
**Плохо:**
```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' });
```
**Хорошо:**
```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' });
```
Кроме того можно использовать деструктуризацию со значениями по умолчанию:
```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' });
```
Чтобы избежать каких-либо побочных эффектов и неожиданного поведения передавая явно `undefined` или `null` вы можете сказать
компилятору TypeScript чтобы он не разрешал этого.
Смотрите [`--strictNullChecks`](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#--strictnullchecks) опция для TypeScript.
**[⬆ back to top](#содержание)**
### Не используйте флаги в качестве параметров функции
Флаги говорят пользователю, что функция совершает более одного действия. Функция должна решать одну задачу.
Разделяйте функции, если они исполняют различные варианты кода на основе логического значения.
**Плохо:**
```ts
function createFile(name: string, temp: boolean) {
if (temp) {
fs.create(`./temp/${name}`);
} else {
fs.create(name);
}
}
```
**Хорошо:**
```ts
function createTempFile(name: string) {
createFile(`./temp/${name}`);
}
function createFile(name: string) {
fs.create(name);
}
```
**[⬆ back to top](#содержание)**
### Избегайте побочных эффектов (часть 1)
Функция производит побочный эффект, если она совершает какое-либо действие помимо получения значения и
возврата другого значения или значений. Побочный эффект может быть записью в файл, изменением каких-то
глобальных переменных или случайным переводом всех ваших денег неизвестным лицам.
Впрочем, побочные эффекты в программе необходимы. Пусть, как и в предыдущем примере, вам требуется запись в файл.
Опишите то, что вы хотите сделать, строго в одном месте. Не создавайте несколько функций и классов, которые пишут что-то
в конкретный файл. Создайте один сервис, который всем этим занимается. Один и только один.
Суть в том, чтобы избегать распространенных ошибок, таких как, например, передача состояния между объектами
без какой-либо структуры, с помощью изменяемых данных, которые может перезаписывать кто угодно, в обход
централизованного места применения побочных эффектов. Если научитесь так делать, вы станете счастливее, чем подавляющее
большинство других программистов.
**Плохо:**
```ts
// Global variable referenced by following function.
let name = 'Robert C. Martin';
function toBase64() {
name = btoa(name);
}
toBase64();
// If we had another function that used this name, now it'd be a Base64 value
console.log(name); // expected to print 'Robert C. Martin' but instead 'Um9iZXJ0IEMuIE1hcnRpbg=='
```
**Хорошо:**
```ts
const name = 'Robert C. Martin';
function toBase64(text: string): string {
return btoa(text);
}
const encodedName = toBase64(name);
console.log(name);
```
**[⬆ back to top](#содержание)**
### Избегайте побочных эффектов (Часть 2)
В JavaScript примитивы передаются по значению, а объекты и массивы передаются по ссылке. В случае объектов или массивов,
если ваша функция вносит изменения в корзину покупок(массив), например при добавлении элемента в массив, то любая другая
функция использующая `корзину` массив будет зависеть от этого добавления. Это может быть как хорошо, так и плохо. Давайте
представим плохую ситуации:
Пользователь нажимает кнопку "Купить" вызывающую функцию `purchase` которая делает сетевой запрос и отправляет `корзину`
массив на сервер. Если происходит плохое подключение к сети функция должна отправить повторный запрос. Теперь, если пользователь
случайно нажимает на кнопку "Добавить в корзину", но пока не хочет покупать товар? Если это произойдет и в этот момент начнется
запрос на сервер, то функция purchase отправит случайно добавленный элемент, так как он имеет ссылку на корзину покупок,
котора была изменена функцией `addItemToCart`. Путем добавления нежелательного элемента.
Хорошим бы решением было бы что бы функция `addItemToCart` всегда клонировала бы массив `cart` редактировала его и
возвращала клон. Это бы гарантировало, что никакие другие функции, использующие ссылку на массив корзины покупок,
не будут затронуты какими-либо изменениями.
Два предостережения по-поводу такого подхода:
1. Возможны случаи, когда вы на самом деле хотите изменить объект по ссылке, но такие случаи крайне редки.
Большинство функций могут быть объявлены без сайд эффектов! (Смотрите [pure function](https://en.wikipedia.org/wiki/Pure_function))
2.Клонирование больших объектов может быть очень нагрузочным и влиять на производительность. К счастью, это не является
большой проблемой на практике, потому что есть отличные библиотеки, которые позволяют клонировать объекты с меньшей
нагрузкой на память в отличии от клонирования вручную.
**Плохо:**
```ts
function addItemToCart(cart: CartItem[], item: Item): void {
cart.push({ item, date: Date.now() });
};
```
**Хорошо:**
```ts
function addItemToCart(cart: CartItem[], item: Item): CartItem[] {
return [...cart, { item, date: Date.now() }];
};
```
**[⬆ back to top](#содержание)**
### Не пишите глобальные функции
Загрязнение глобальных переменных — плохая практика в JavaScript, так как может породить конфликты с другой библиотекой,
и пользователь вашего API не увидит ошибок, пока не получит исключение в продакшене. Давайте рассмотрим пример:
что если вы хотите расширить стандартный метод Array JavaScript, имея метод `diff` который бы вычислял различие между
двумя массивами? Вы должны были бы записать новую функцию в `Array.prototype`, но тогда она может войти в конфликт
с другой библиотекой, которая пыталась сделать то же самое. Что если другая библиотека использовала метод `diff`,
чтобы найти разницу между первым и последним элементами массива? В этом случае лучше использовать классы и просто
сделать наследование от глобального `Array`.
**Плохо:**
```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));
};
}
```
**Хорошо:**
```ts
class MyArray<T> extends Array<T> {
diff(other: T[]): T[] {
const hash = new Set(other);
return this.filter(elem => !hash.has(elem));
};
}
```
**[⬆ back to top](#содержание)**
### Предпочтение функциональное программирование над императивным
Отдавайте предпочтение этому стилю программирования, когда можете.
**Плохо:**
```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;
}
```
**Хорошо:**
```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);
```
**[⬆ back to top](#содержание)**
### Инкапсулируйте условия
**Плохо:**
```ts
if (subscription.isTrial || account.balance > 0) {
// ...
}
```
**Хорошо:**
```ts
function canActivateService(subscription: Subscription, account: Account) {
return subscription.isTrial || account.balance > 0
}
if (canActivateService(subscription, account)) {
// ...
}
```
**[⬆ back to top](#содержание)**
### Избегайте негативных условий
**Плохо:**
```ts
function isEmailNotUsed(email: string): boolean {
// ...
}
if (isEmailNotUsed(email)) {
// ...
}
```
**Хорошо:**
```ts
function isEmailUsed(email): boolean {
// ...
}
if (!isEmailUsed(node)) {
// ...
}
```
**[⬆ back to top](#содержание)**
### Избегайте условных операторов
Эта задача кажется невозможной. Большинство людей, впервые услышав это, говорят, "как я должен делать что-либо без
выражения `if`?". Ответ заключается в том, что во многих случаях для достижения тех же целей можно использовать
полиморфизм. Второй вопрос обычно, "хорошо, замечательно, но почему я должен их избегать?" Ответ, предыдущая концепция
чистого кода, которую вы узнали: функция должна выполнять только одну задачу. Когда у вас есть классы и функции,
содержащие конструкцию `if`, вы говорите своему пользователю, что ваша функция выполняет больше одной задачи.
Запомните, делать только одну задачу.
**Плохо:**
```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 {
// ...
}
}
```
**Хорошо:**
```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();
}
}
```
**[⬆ back to top](#содержание)**
### Избегайте проверки типов
TypeScript является надмножеством синтаксиса JavaScript и добавляют дополнительные статические проверки типов для языка.
Всегда предпочитайте указывать типы переменных, параметров и возвращаемых значений, чтобы использовать