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
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
190
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
2
11k
20250704_教育事業におけるアジャイルなデータ基盤構築
Avatar for Uchide Hiroki(ucchi-) hanon52_
5
880
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
840
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
580
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
16
12k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
Avatar for 岡本秀明 h_okkah
0
190
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
990
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
800
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
260
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
Avatar for Yusuke Suto sutochin26
1
6.5k
What's new in AppKit on macOS 26
Avatar for 1024jp 1024jp
0
130

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
510
Designing for Performance
Avatar for Lara Hogan lara
610
69k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Done Done
Avatar for chrislema chrislema
184
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
830
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k

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