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
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
14
2.6k
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.6k
XP, Testing and ninja testing
Avatar for seki at druby.org m_seki
3
250
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
Avatar for Marco Roth marcoroth
2
370
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
690
なぜ「共通化」を考え、失敗を繰り返すのか
Avatar for Rinchoku rinchoku
1
650
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
3
490
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
280
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
Avatar for Mana Takada mana_takada
0
180
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
290
Azure AI Foundryではじめてのマルチエージェントワークフロー
Avatar for 瀬尾佳隆 seosoft
0
180
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
Avatar for Munetoshi Ishikawa munetoshi
0
180

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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