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
750
0

A Non-Zero Number of TypeScript Tips

An introduction to TypeScript.

Avatar for Toby Ho

Toby Ho

August 20, 2018

More Decks by Toby Ho

See All by Toby Ho
Debugging Ajax Calls
Avatar for Toby Ho airportyh
0
120
How to Learn 3
Avatar for Toby Ho airportyh
2
110
How to Learn 2
Avatar for Toby Ho airportyh
0
110
How To Learn
Avatar for Toby Ho airportyh
7
1.6k
Test-Driven Development that Feels Great
Avatar for Toby Ho airportyh
0
8.9k

Other Decks in Programming

See All in Programming
変わらないものが、変わるものを決める — 意図駆動開発 × イベントソーシング × イミュータブル | What Doesn't Change Decides What Can — IDD × Event Sourcing × Immutability
Avatar for Tomohisa Takaoka tomohisa
0
600
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
200
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
Avatar for nori se4weed
1
120
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
Avatar for HideyukiKitao panda728
PRO
2
170
Claude Opus 4.6以後の受託開発エンジニアの変化(Claude Code開発ノウハウ大公開スペシャルbyクラスメソッド)
Avatar for t-iida iidatakuma
1
890
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
220
吝嗇家のためのAI活用 / AI development for miser - ChatGPT + Issue Driven Development
Avatar for philomagi tooppoo
0
200
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.6k
Terraform標準の組織で AWS CDKをどう使うか
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
1
400
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
3
160
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
110
Haskell/Servantを通してWebミドルウェアを捉え直す
Avatar for pizzacat83 pizzacat83
1
620

Featured

See All Featured
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
220
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
1.9k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
230
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.4k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
420
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
160
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.3k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.4k

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