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

A Non-Zero Number of TypeScript Tips

Avatar for Toby Ho Toby Ho
August 20, 2018
Programming
0
720

A Non-Zero Number of TypeScript Tips

An introduction to TypeScript.

Avatar for Toby Ho

Toby Ho

August 20, 2018
Tweet

More Decks by Toby Ho

See All by Toby Ho
Debugging Ajax Calls
Avatar for Toby Ho airportyh
0
100
How to Learn 3
Avatar for Toby Ho airportyh
2
81
How to Learn 2
Avatar for Toby Ho airportyh
0
97
How To Learn
Avatar for Toby Ho airportyh
7
1.4k
Test-Driven Development that Feels Great
Avatar for Toby Ho airportyh
0
8.8k

Other Decks in Programming

See All in Programming
testingを眺める
Avatar for matumoto matumoto
1
130
Honoアップデート 2025年夏
Avatar for Yusuke Wada yusukebe
1
910
Namespace and Its Future
Avatar for Satoshi Tagomori tagomoris
6
690
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
2
820
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
0
270
OSS開発者という働き方
Avatar for ANDPAD inc andpad
5
1.7k
CSC305 Summer Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
130
Azure SRE Agentで運用は楽になるのか？
Avatar for KAMEGAWA Kazushi kkamegawa
0
1.3k
パッケージ設計の黒魔術/Kyoto.go#63
Avatar for kadota kyohei lufia
3
410
Ruby Parser progress report 2025
Avatar for yui-knk yui_knk
1
290
フロントエンドのmonorepo化と責務分離のリアーキテクト
Avatar for Takuma Kajikawa kajitack
2
160
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
19
4.6k

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.9k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k

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