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
130
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
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
12
19k
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
470
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
560
リアルな遅延を測る仕様
Avatar for kota-yata kota_yata
1
120
PHP に部分適用が来るぞ！……ところで何それ？おいしいの？ #phpcon / phpcon-2026
Avatar for shogogg shogogg
0
690
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
Avatar for sumihiro3 sumihiro3
1
700
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計｜Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
Avatar for Tomohisa Takaoka tomohisa
1
1k
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
240
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
570
Building a Meta Ray-Ban display app
Avatar for Akio Itaya akkeylab
0
160
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
3.7k
生成AIで帳票OCRが「簡単に」作れる時代になった？
Avatar for Shohei Kondo kon_shou
0
1.1k

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.4k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
340
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
370
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
470
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k

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