SlideShare a Scribd company logo
Practical TypeScript
... how to make better mistakes
and why I don't handwrite more
TypeScript
is a Microsoft-owned superset of
Javascript.
Most* modern web frontend
work is done via compiling
standards that don't yet exist in
older browsers to cross-platform
JavaScript.
* citation needed
Practical TypeScript
TypeScript provides a compiler
that can handle standard
JavaScript, and prepare it for older
targets.
It also understands some of its
own syntax to add compile-time
checks.
Practical TypeScript
Practical TypeScript
Great solutions exist for using
TypeScript in React applications
among other destinations.
Why do I like it so much?
Reasons I like TypeScript:
The compiler is smarter
than me
// using strict null checking...
function fooify(thing: string) {
return thing.toUpperCase();
}
fooify(undefined);
// ^^^^^^^^^
// [ts] Argument of type 'undefined' is not assignable
// to parameter of type 'string'.
Can't pass an unde ned to a
string parameter.
const stringOrFalse = (returnString: boolean) =>
(returnString) ? "hi" : false;
const fooify = (thing: string) => thing.toUpperCase();
const value = stringOrFalse(true);
fooify(value);
// ^^^^^
// [ts] Argument of type 'false | "hi"' is not
// assignable to parameter of type 'string'.
// Type 'false' is not assignable to type 'string'.
Value could be false.
const stringOrFalse = (returnString: boolean) =>
(returnString) ? "hi" : false;
const fooify = (thing: string) => thing.toUpperCase();
const value = stringOrFalse(true);
if (value) {
// value can't be 'false', so no error
fooify(value);
}
Compiler is smart enough to nd
conditions that narrow a value.
type Eel = string | 7;
type SwallowType = 'African' | 'European';
enum FavouriteColour {
blue = '#0000ff',
yellow = '#ffff00',
}
interface IHovercraft {
contents: Eel[],
}
Most types are very exible.
interface IUser {
name: string,
isAdmin: boolean,
}
const addUser = (user: IUser) => true;
addUser({name: 'Jesse Doe', isAdmin: true});
Most types are picked up without
needing to annotate them.
addUser({name: 'Alex Nguyen'});
// ^^^^^^^^^^^^^^^^^^^^^
// [ts] Argument of type '{ name: string; }' is not
// assignable to parameter of type 'User'.
// Property 'isAdmin' is missing in type
// '{ name: string; }'.
Error messages tell you why the
type doesn't work here.
interface IFeatureFlagList { [k: string]: boolean };
const makeFlagTester = (flags: IFeatureFlagList) =>
(flag: keyof IFeatureFlagList) =>
flags[flag];
const testFlag = makeFlagTester({
hasBakedBeans: false,
// error due to value
invasiveTracking: 'always!',
// error due to key
true: false,
});
interface IFeatureFlagList { [k: string]: boolean };
const makeFlagTester = (flags: IFeatureFlagList) =>
(flag: keyof IFeatureFlagList) =>
flags[flag];
const testFlag = makeFlagTester({});
// error: true can never be a key of
// IFeatureFlagList
testFlag(true);
// error: boolean doesn't have `toUpperCase`
testFlag('gamification').toUpperCase();
Reasons I like TypeScript:
The community
Using types safely with untyped
libraries involves manually writing
extra declarations.
De nitelyTyped is a community
project that covers 4,924 external
libraries, at time of writing.
yarn add react-router-dom
yarn add -D @types/react-router-dom
declare module "markdown-it/lib/presets/commonmark" {
import { Options } from 'markdown-it';
export default Options;
}
Not particularly onerous to add
missing types if necessary.
Reasons I (sorta) like TypeScript:
It's still JavaScript
Practical TypeScript
Still no ?. operator, for example.
Practical TypeScript
Add TypeScript support now,
migrate whenever you want.
Valid JavaScript is valid*
TypeScript.
Completely fair
comparison
Practical TypeScript
Practical TypeScript
Fin.
Liam Dawson
@liamdaws

More Related Content

What's hot (20)

PPTX
What JS? Itself
Lucio Martinez
 
PPTX
Ruby Blocks
Sarah Allen
 
PPT
My programming final proj. (1)
aeden_brines
 
DOC
Modify the bouncing ball example demonstrated/tutorialoutlet
Cleasbyz
 
PPT
C++ basics
husnara mohammad
 
PPTX
Typescript tips & tricks
Ori Calvo
 
PPTX
Python Programming Essentials - M5 - Variables
P3 InfoTech Solutions Pvt. Ltd.
 
PDF
Wade not in unknown waters. Part one.
PVS-Studio
 
PDF
Linux shell
Kenny (netman)
 
PDF
Protocol in Swift
Yusuke Kita
 
PDF
Angular 2.0: Brighter future?
Eugene Zharkov
 
PPTX
Lesson 2 starting output
WayneJones104
 
PPTX
Python Programming Essentials - M11 - Comparison and Logical Operators
P3 InfoTech Solutions Pvt. Ltd.
 
PPTX
Property based testing
MSDEVMTL
 
PPT
Function
mussawir20
 
PPTX
Python Training in Bangalore | Python Introduction Session | Learnbay
Learnbayin
 
PDF
Design patterns in javascript
Abimbola Idowu
 
PPTX
Javascript conditional statements
nobel mujuji
 
PPT
Introduction to Javascript
Amit Tyagi
 
PDF
Javascript Styles and some tips
Vítor Baptista
 
What JS? Itself
Lucio Martinez
 
Ruby Blocks
Sarah Allen
 
My programming final proj. (1)
aeden_brines
 
Modify the bouncing ball example demonstrated/tutorialoutlet
Cleasbyz
 
C++ basics
husnara mohammad
 
Typescript tips & tricks
Ori Calvo
 
Python Programming Essentials - M5 - Variables
P3 InfoTech Solutions Pvt. Ltd.
 
Wade not in unknown waters. Part one.
PVS-Studio
 
Linux shell
Kenny (netman)
 
Protocol in Swift
Yusuke Kita
 
Angular 2.0: Brighter future?
Eugene Zharkov
 
Lesson 2 starting output
WayneJones104
 
Python Programming Essentials - M11 - Comparison and Logical Operators
P3 InfoTech Solutions Pvt. Ltd.
 
Property based testing
MSDEVMTL
 
Function
mussawir20
 
Python Training in Bangalore | Python Introduction Session | Learnbay
Learnbayin
 
Design patterns in javascript
Abimbola Idowu
 
Javascript conditional statements
nobel mujuji
 
Introduction to Javascript
Amit Tyagi
 
Javascript Styles and some tips
Vítor Baptista
 

Similar to Practical TypeScript (20)

PPTX
Introduction to TypeScript
KeithMurgic
 
PPTX
Type script is awesome
KeithMurgic
 
PDF
Typescript is the best
GlobalLogic Ukraine
 
PDF
Typescript is the best by Maxim Kryuk
GlobalLogic Ukraine
 
PPTX
Type script - advanced usage and practices
Iwan van der Kleijn
 
PDF
An Introduction to TypeScript
WrapPixel
 
PDF
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
MobMaxime
 
PDF
Flow or Type - how to React to that?
Krešimir Antolić
 
PPTX
Introduction to TypeScript
Tomas Corral Casas
 
PDF
TypeScript Interview Questions PDF By ScholarHat
Scholarhat
 
PDF
Types For Frontend Developers
Jesse Williamson
 
PDF
Introduction to typescript
Mario Alexandro Santini
 
PDF
Power Leveling your TypeScript
Offirmo
 
PPTX
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
PDF
Introduction to TypeScript
NexThoughts Technologies
 
PDF
JavaScript, TypeScipt and React Native
Mitchell Tilbrook
 
PPTX
TypeScript: Basic Features and Compilation Guide
Nascenia IT
 
PPTX
Why TypeScript?
FITC
 
PDF
TypeScript introduction to scalable javascript application
Andrea Paciolla
 
PPTX
Typescript: Beginner to Advanced
Talentica Software
 
Introduction to TypeScript
KeithMurgic
 
Type script is awesome
KeithMurgic
 
Typescript is the best
GlobalLogic Ukraine
 
Typescript is the best by Maxim Kryuk
GlobalLogic Ukraine
 
Type script - advanced usage and practices
Iwan van der Kleijn
 
An Introduction to TypeScript
WrapPixel
 
Reasons to Use Typescript for Your Next Project Over Javascript.pdf
MobMaxime
 
Flow or Type - how to React to that?
Krešimir Antolić
 
Introduction to TypeScript
Tomas Corral Casas
 
TypeScript Interview Questions PDF By ScholarHat
Scholarhat
 
Types For Frontend Developers
Jesse Williamson
 
Introduction to typescript
Mario Alexandro Santini
 
Power Leveling your TypeScript
Offirmo
 
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Introduction to TypeScript
NexThoughts Technologies
 
JavaScript, TypeScipt and React Native
Mitchell Tilbrook
 
TypeScript: Basic Features and Compilation Guide
Nascenia IT
 
Why TypeScript?
FITC
 
TypeScript introduction to scalable javascript application
Andrea Paciolla
 
Typescript: Beginner to Advanced
Talentica Software
 
Ad

Recently uploaded (20)

PDF
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
PPTX
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
PPTX
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
PDF
Revenue streams of the Wazirx clone script.pdf
aaronjeffray
 
PPT
MergeSortfbsjbjsfk sdfik k
RafishaikIT02044
 
PDF
Understanding the Need for Systemic Change in Open Source Through Intersectio...
Imma Valls Bernaus
 
PDF
Streamline Contractor Lifecycle- TECH EHS Solution
TECH EHS Solution
 
PPTX
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
PDF
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
PPTX
The Role of a PHP Development Company in Modern Web Development
SEO Company for School in Delhi NCR
 
PDF
Efficient, Automated Claims Processing Software for Insurers
Insurance Tech Services
 
PDF
유니티에서 Burst Compiler+ThreadedJobs+SIMD 적용사례
Seongdae Kim
 
PDF
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
PDF
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
PPTX
An Introduction to ZAP by Checkmarx - Official Version
Simon Bennetts
 
PPTX
Fundamentals_of_Microservices_Architecture.pptx
MuhammadUzair504018
 
PPTX
MailsDaddy Outlook OST to PST converter.pptx
abhishekdutt366
 
PDF
GetOnCRM Speeds Up Agentforce 3 Deployment for Enterprise AI Wins.pdf
GetOnCRM Solutions
 
PDF
Capcut Pro Crack For PC Latest Version {Fully Unlocked} 2025
hashhshs786
 
PDF
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
Linux Certificate of Completion - LabEx Certificate
VICTOR MAESTRE RAMIREZ
 
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
Revenue streams of the Wazirx clone script.pdf
aaronjeffray
 
MergeSortfbsjbjsfk sdfik k
RafishaikIT02044
 
Understanding the Need for Systemic Change in Open Source Through Intersectio...
Imma Valls Bernaus
 
Streamline Contractor Lifecycle- TECH EHS Solution
TECH EHS Solution
 
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
iTop VPN With Crack Lifetime Activation Key-CODE
utfefguu
 
The Role of a PHP Development Company in Modern Web Development
SEO Company for School in Delhi NCR
 
Efficient, Automated Claims Processing Software for Insurers
Insurance Tech Services
 
유니티에서 Burst Compiler+ThreadedJobs+SIMD 적용사례
Seongdae Kim
 
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
An Introduction to ZAP by Checkmarx - Official Version
Simon Bennetts
 
Fundamentals_of_Microservices_Architecture.pptx
MuhammadUzair504018
 
MailsDaddy Outlook OST to PST converter.pptx
abhishekdutt366
 
GetOnCRM Speeds Up Agentforce 3 Deployment for Enterprise AI Wins.pdf
GetOnCRM Solutions
 
Capcut Pro Crack For PC Latest Version {Fully Unlocked} 2025
hashhshs786
 
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
Ad

Practical TypeScript

  • 1. Practical TypeScript ... how to make better mistakes and why I don't handwrite more
  • 2. TypeScript is a Microsoft-owned superset of Javascript.
  • 3. Most* modern web frontend work is done via compiling standards that don't yet exist in older browsers to cross-platform JavaScript. * citation needed
  • 5. TypeScript provides a compiler that can handle standard JavaScript, and prepare it for older targets. It also understands some of its own syntax to add compile-time checks.
  • 8. Great solutions exist for using TypeScript in React applications among other destinations. Why do I like it so much?
  • 9. Reasons I like TypeScript: The compiler is smarter than me
  • 10. // using strict null checking... function fooify(thing: string) { return thing.toUpperCase(); } fooify(undefined); // ^^^^^^^^^ // [ts] Argument of type 'undefined' is not assignable // to parameter of type 'string'. Can't pass an unde ned to a string parameter.
  • 11. const stringOrFalse = (returnString: boolean) => (returnString) ? "hi" : false; const fooify = (thing: string) => thing.toUpperCase(); const value = stringOrFalse(true); fooify(value); // ^^^^^ // [ts] Argument of type 'false | "hi"' is not // assignable to parameter of type 'string'. // Type 'false' is not assignable to type 'string'. Value could be false.
  • 12. const stringOrFalse = (returnString: boolean) => (returnString) ? "hi" : false; const fooify = (thing: string) => thing.toUpperCase(); const value = stringOrFalse(true); if (value) { // value can't be 'false', so no error fooify(value); } Compiler is smart enough to nd conditions that narrow a value.
  • 13. type Eel = string | 7; type SwallowType = 'African' | 'European'; enum FavouriteColour { blue = '#0000ff', yellow = '#ffff00', } interface IHovercraft { contents: Eel[], } Most types are very exible.
  • 14. interface IUser { name: string, isAdmin: boolean, } const addUser = (user: IUser) => true; addUser({name: 'Jesse Doe', isAdmin: true}); Most types are picked up without needing to annotate them.
  • 15. addUser({name: 'Alex Nguyen'}); // ^^^^^^^^^^^^^^^^^^^^^ // [ts] Argument of type '{ name: string; }' is not // assignable to parameter of type 'User'. // Property 'isAdmin' is missing in type // '{ name: string; }'. Error messages tell you why the type doesn't work here.
  • 16. interface IFeatureFlagList { [k: string]: boolean }; const makeFlagTester = (flags: IFeatureFlagList) => (flag: keyof IFeatureFlagList) => flags[flag]; const testFlag = makeFlagTester({ hasBakedBeans: false, // error due to value invasiveTracking: 'always!', // error due to key true: false, });
  • 17. interface IFeatureFlagList { [k: string]: boolean }; const makeFlagTester = (flags: IFeatureFlagList) => (flag: keyof IFeatureFlagList) => flags[flag]; const testFlag = makeFlagTester({}); // error: true can never be a key of // IFeatureFlagList testFlag(true); // error: boolean doesn't have `toUpperCase` testFlag('gamification').toUpperCase();
  • 18. Reasons I like TypeScript: The community
  • 19. Using types safely with untyped libraries involves manually writing extra declarations.
  • 20. De nitelyTyped is a community project that covers 4,924 external libraries, at time of writing.
  • 21. yarn add react-router-dom yarn add -D @types/react-router-dom
  • 22. declare module "markdown-it/lib/presets/commonmark" { import { Options } from 'markdown-it'; export default Options; } Not particularly onerous to add missing types if necessary.
  • 23. Reasons I (sorta) like TypeScript: It's still JavaScript
  • 25. Still no ?. operator, for example.
  • 27. Add TypeScript support now, migrate whenever you want. Valid JavaScript is valid* TypeScript.