Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Non-Zero Number of TypeScript Tips

A333869fa8934ab32efb4e78e7c1dff1?s=47 Toby Ho
August 20, 2018
Programming
0
380

A Non-Zero Number of TypeScript Tips

An introduction to TypeScript.

A333869fa8934ab32efb4e78e7c1dff1?s=128

Toby Ho

August 20, 2018
Tweet

More Decks by Toby Ho

See All by Toby Ho
Debugging Ajax Calls
A333869fa8934ab32efb4e78e7c1dff1?s=48 airportyh
0
71
How to Learn 3
A333869fa8934ab32efb4e78e7c1dff1?s=48 airportyh
2
62
How to Learn 2
A333869fa8934ab32efb4e78e7c1dff1?s=48 airportyh
0
66
How To Learn
A333869fa8934ab32efb4e78e7c1dff1?s=48 airportyh
7
1.2k
Test-Driven Development that Feels Great
A333869fa8934ab32efb4e78e7c1dff1?s=48 airportyh
0
8.8k

Other Decks in Programming

See All in Programming
Atomic Design とテストの○○な話
Fd3e212c7b5255c6164d7d52bfe79dfb?s=48 takfjp
2
790
CakePHPの内部実装 から理解するPSR-7
750703459030ae520b26376f236f6cdd?s=48 boro1234
0
340
プロダクトの成長とSREと
5a9fb3b80c517e51e4e95a27b63c6a67?s=48 takuyatezuka
0
110
kintoneでランダム取得を作ってみた（imoniCamp 2022-07-27)
F9904a15202c8ead8e638fc6fa659e33?s=48 shokun1108
0
130
実践的！FPGA開発セミナー vol.11
Bbf28bf908ac83e5b85b52a675641641?s=48 fixstars
0
110
夕食断食にTRY!/for-lt-12th
82492720940b57cec5072e190213ba3a?s=48 pachikuriii
0
230
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
00766b8e1f9c2665cf7fd29f9cf558df?s=48 odanado
PRO
0
180
20220706_Google Apps Scriptを実演で学ぶ～ GAS × Slack ～
C983c1e22d0d19f21590b83884d9b754?s=48 apachan
2
610
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
33ef4c1ebe619115b552db9a9f9a3509?s=48 sadnessojisan
2
1.2k
WindowsコンテナDojo：第6回 Red Hat OpenShift入門
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
120
FutureCon 2022 FlutterアプリのPerformance測定
4affdb6a9878e509da7ca41a87051352?s=48 harukafujita
0
130
Register-based calling convention for Go functions
86d54dc23ace2b5920f7d5777949ed8f?s=48 cjamhe01385
0
380

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.4k
Build your cross-platform service in a week with App Engine
5f83ef806155b403c3393160ce51f955?s=48 jlugia
219
17k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.2k
Gamification - CAS2011
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
21
1.4k
Fight the Zombie Pattern Library - RWD Summit 2016
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
226
15k
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.6k
Fashionably flexible responsive web design (full day workshop)
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
396
62k
Fontdeck: Realign not Redesign
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
73
4.1k
The Web Native Designer (August 2011)
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
75
2k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
62
10k

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

  16. None
  17. None

  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