Learnings from 4 Years of TypeScript
如果无法正常显示，请先停止浏览器的去广告插件。
相关话题：
#zalando
1. Learnings from 4
Years of TypeScript
Zalando SE
Bastian Sieker
04.12.2019
2. Foreword
2
3. Table of Contents
●
●
●
●
●
●
3
Craftsmanship
The Last Programming Language
Functions
Classes
Discussing Code
The End
4. Craftsmanship
4
5. Any fool can write code that a computer can understand. Good
programmers write code that humans can understand.
Martin Fowler
6. Good Code: Characteristics
●
●
●
●
●
●
6
Craftsmanship
Functionality
Readability
Maintainability / Extensibility
Testability
Documentation
Efficiency
7. Good Code: Known Principles
●
●
●
7
Craftsmanship
Single Responsibility (SOLID)
Reuse code (DRY)
Keep it stupid simple (KISS)
8. The Last Programming
Language
8
9. A Case Against the Go To Statement
10. Less is More: Language Features
Avoiding (the right) feature can improve code:
●
●
Reduce complexity
Increase consistency
If you are interested in more:
•
•
https://blog.ploeh.dk/2015/04/13/less-is-more-language-features/
https://www.youtube.com/watch?v=ecIWPzGEbFc
10 The Last Programming Language
11. Less is More: Language Features
https://covers.oreillystatic.com/images/9780596517748/lrg.jpg
11
The Last Programming Language
12. Do Not Use `null`
// hidden complexity
typeof null === 'object';
// not so kiss
type validateEan =
(ean: string | undefined | null) => boolean;
12 The Last Programming Language
13. Functions
13
14. How to Define Functions #1
const isProduction = (env: string): boolean =>
env === 'production' ;
●
●
●
14 Functions
Reduce syntactic noise
Consistency
Return an expression
15. How to Define Functions #2
type isProduction = (env: string) => boolean;
const isProduction : isProduction = (env) =>
env === 'production' ;
●
●
●
15 Functions
Improve readability
Start with type signature
Reusable type definitions
16. How to Define Functions #3
type EnvPredicate = (env: string) => boolean;
const isDev: EnvPredicate = (env) =>
env === 'development' ;
const isTest: EnvPredicate = (env) =>
env === 'test';
const isValidNodeEnv : EnvPredicate = (env) =>
isDev(env) || isProduction (env) || isTest(env);
16 Functions
17. Use `type` over `interface`
// union and literal types
type Shape = Square | Rectangle | Circle;
type Answer = 'yes' | 'no';
// nicer and more consistent syntax for functions
type noopType = () => undefined;
interface noopInterface {
(): undefined;
};
17 Functions
18. Classes
18
19. Do Not Use `class` (and Prototype-Based Inheritance)
●
●
●
19 Classes
Hidden complexity
Encourage to use mutable state (not simple)
We do not need to
20. Handling State with Closures
type productsCacheFactory = () => (productId: string) => Product;
const productsCacheFactory : productsCacheFactory = () => {
const state: ProductMap = {};
// initial state
// ... cache implementation code
return (productId: string) => state[productId];
}
20 Classes
21. Discussing Code
21
22. Discussing Code
Ask yourself (or the team):
●
●
Why to solve a certain problem the way you do?
What do you like and dislike about the code you
write, and why?
22 The Last Programming Language
23. Discussing Code
Align in the team:
●
●
Indent: 2 tabs or 4 spaces?
○ You ALWAYS want [whatever you want]
Do the same on a higher level, ideas:
○ `Promise` vs `async/await`
○ Imperative vs declarative code
○ TypeScript vs JavaScript
23 The Last Programming Language
24. Discussing Code
Why is that a good idea?
●
●
●
Consistency
Helps onboarding new team members
Helps to understand what you are doing
24 The Last Programming Language
25. Putting it in Perspective
●
●
●
●
●
My examples are heavily simplified
○ There are downsides
○ There are exceptions
Automation may be difficult
Whole team must be onboard
Probably hard to maintain
https://github.com/labs42io/clean-code-typescript
25 The Last Programming Language
26. The End
●
●
●
26
Questions?
mail@bzums.de
github.com/bzums