A Non-Zero Number of TypeScript Tips

An introduction to TypeScript.

Transcript

1. A non-zero number of TypeScript Tips
2. Agenda • What and why • Interfaces • Optional Properties • Class • Generic functions / methods • Strict Null Checks • VS Code Shortcuts
3. What is TypeScript?
4. What is TypeScript • Super set of JavaScript / EcmaScript • EcmaScript Future Proof
5. Why TypeScript?
6. Type Definitions
7. Interfaces the shape of an object
8. Interface
9. Interface
10. Interface
11. Interface
12. Implementing an Interface with a Class
13. Class Constructor Shorthand Equivalent shorthand to previous slide
14. Interface Extension
15. Optional Properties
18. Optional Properties This property is optional
19. Type assertion (or casting)
20. Type assertion (or casting) Don’t do this!!!
21. TypeScript Static type checking with loopholes.
22. Interface with Methods
23. Implementing an Interface with Methods
24. Generic Functions
25. Put a number in a list
26. Put a string in a list
27. Generic a thing in a list
28. Generic Function/Methods
29. Generic Function/Methods TypeScript knows!!!
30. Generic Types
31. Parameterized Types (generics) T is a type parameter
32. Parameterized Types
33. Parameterized Type: Promises
34. Promises Uses the fetch API
35. Promises
36. Promises Uses the fetch API
37. Generic Function with Generic Type!!!
38. Generic getItems
39. Generic getItems But what is articles? What is T?
40. Generic getItems
41. Generic getItems Define T explicitly
42. Generic getItems Or define related type and let TS infer what T is
43. Generic getItems T is inferred to be IArticle based on this related type declaration
44. Generic getItems
45. Strict Null Checks
46. Strict Null Checks This property is optional
47. Strict Null Checks tsconfig.json
48. Strict Null Checks
49. Strict Null Checks
50. Strict Null Checks
51. VS Code Help
52. VSCode Auto Import Helper
53. VSCode Auto Import Helper Click that!!!
54. VSCode Auto Import Helper
55. VSCode: Looking up type definitions Mac: Command+click Windows: Control+click Mac: Command+hover Windows: Control+hover Popup: Drilldown:
56. Popup
57. Drilldown
58. Summary • What and why • Interfaces • Optional Properties • Class • Generic functions / methods • Strict Null Checks • VS Code Shortcuts