Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

A Non-Zero Number of TypeScript Tips

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Toby Ho Toby Ho
August 20, 2018
Programming
760
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
120
How to Learn 2
Avatar for Toby Ho airportyh
0
120
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
Getting Started with Vibe Coding
Avatar for Michael Cheng miccheng
0
190
小さなアプリを作って公開するまで
Avatar for onozaty onozaty
0
140
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
1.6k
Distance field of Julia set
Avatar for kinakomoti-321 kinakomoti321
0
300
Kotlinize Is Not Just Converting to Kotlin
Avatar for Kazuki Chigita chigichan24
1
220
Long Living Tokens, Die, Die, Die! (or: The One Ring is Banned in Modern)
Avatar for sylph01 sylph01
0
410
Enforcing Your Architecture with Unit Tests in the AI Era (Swift Connection X)
Avatar for Stelios Frantzeskakis steliosf
PRO
1
150
React Native経験者が Flutterを30⽇間触って驚いたこと
Avatar for ryota_saito 3saito
0
160
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
Avatar for aoshi aoshi
0
630
Kawaiicon: Kubernetes, it's no longer cool, but let's secure it anyway!
Avatar for Bea Hughes barnbarn
0
110
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
220
オーケストレーション記述言語 Katari
Avatar for ゆきくらげ yukikurage
0
240

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
550
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.5k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
560
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
3
35k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
400
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
640
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k

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