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

A Non-Zero Number of TypeScript Tips

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.6k
MUSUBIXとは
Avatar for Hisaho nahisaho
0
140
AI & Enginnering
Avatar for codelynx codelynx
0
120
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
560
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
6
600
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
290
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
なるべく楽してバックエンドに型をつけたい！(楽とは言ってない)
Avatar for HIBIKI CUBE hibiki_cube
0
140
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k

Featured

See All Featured
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
240
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
110
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k

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