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
730

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
110
How to Learn 3
Avatar for Toby Ho airportyh
2
86
How to Learn 2
Avatar for Toby Ho airportyh
0
100
How To Learn
Avatar for Toby Ho airportyh
7
1.5k
Test-Driven Development that Feels Great
Avatar for Toby Ho airportyh
0
8.8k

Other Decks in Programming

See All in Programming
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
310
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
1.2k
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
9k
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
750
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
Avatar for Hiroyuki Mori hiroyukimori
PRO
0
100
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
170
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
790
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
990

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
290
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
49
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110

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