TypeScript na przestrzeni lat udowodnił że da się okiełznać dużą część problemów wynikających z dynamiczności języka JavaScript. Strukturalne typowanie które oferuje potrafi w miarę nieinwazyjnie pomóc w wykrywaniu pułapek, w które wpadlibyśmy, pisząc w czystym JS. Co jednak w przypadku gdy coś kwacze jak kaczka ale nią nie jest? Czy da się zabezpieczyć developera przed pomieszaniem dwóch różnych jednostek, które w historii doprowadziły do nie jednej katastrofy? Na prelekcji przejdziemy przez różne case study i zastanowimy się jak pomóc TypeScriptowi w ostrzeganiu nas przed pułapkami których nie zawsze da się uniknąć w pierwotnym typowaniu strukturalnym.

1. Nominalne typowanie
w TypeScript
Wiktor Toporek

2. O mnie

3. 💼 Senior Frontend Developer
w The Software House
O mnie

4. 💼 Senior Frontend Developer
w The Software House
Fullstack
O mnie

5. 💼 Senior Frontend Developer
w The Software House
Fullstack
Elm
O mnie

6. 💼 Senior Frontend Developer
w The Software House
Fullstack
Elm
λ Functional Programming
O mnie

7. 💼 Senior Frontend Developer
w The Software House
Fullstack
Elm
λ Functional Programming
🪨 Static typing
O mnie

8. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}

9. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}
getInvoiceTotal(testInvoice) ===

10. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}
getInvoiceTotal(testInvoice) === '100169.99undefined'

11. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}
getInvoiceTotal(testInvoice) === '100169.99undefined'

12. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}
getInvoiceTotal(testInvoice) === '100169.99undefined'

13. const testInvoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}
function getInvoiceTotal(invoice) {
return invoice.positions.reduce(
(lastTotal, currentPosition) => lastTotal + currentPosition.price,
0
);
}
getInvoiceTotal(testInvoice) === '100169.99undefined'

15. type Invoice = {
positions: InvoicePosition[];
}

16. type Invoice = {
positions: InvoicePosition[];
}
type InvoicePosition = {
productName: string;
price: number;
}

17. type Invoice = {
positions: InvoicePosition[];
}
type InvoicePosition = {
productName: string;
price: number;
}
const testInvoice: Invoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}

18. type Invoice = {
positions: InvoicePosition[];
}
type InvoicePosition = {
productName: string;
price: number;
}
const testInvoice: Invoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}

19. type Invoice = {
positions: InvoicePosition[];
}
type InvoicePosition = {
productName: string;
price: number;
}
const testInvoice: Invoice = {
positions: [
{ productName: "JavaScript: The Good Parts", price: 100 },
{ productName: "CSS in Depth", price: "169.99" },
{ productName: "Functional Programming in JavaScript", prince: 150.50 },
],
}

20. OO w JS

21. function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};

22. Object.prototype
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};

24. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}

25. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}

26. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");

27. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");

28. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");

29. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(

30. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(s
s
s
s
s
s
s
s
);

31. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(s
s
s
s
s
s
s
s
);
✅

32. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(s
s
s
s
s
s
s
s
);

33. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(

34. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook("12345");

35. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(3.14);

36. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(undefined);

37. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(z
z
z
z
z
);

38. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(z
z
z
z
z
);

39. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(z
z
z
z
z
);

40. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(

41. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(user1);

42. const user1 = new User("123-123-123", "John Doe", "john@doe.com");
const someBook = new Book("12345", "JavaScript: The Good Parts");
user1.addFavoriteBook(user1);
😬

44. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}

45. class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}

46. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}

47. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book

48. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

49. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

50. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

51. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

52. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

53. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book ⊄ User

54. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book User

55. type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
Book
User

56. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
User Book

57. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
User Book

58. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
User Book

59. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
User Book

60. class Book {
constructor(
public id: string,
public name: string,
public isbn?: string
) {}
}
class User {
favoriteBooks: Book[] = [];
constructor(
public id: string,
public name: string,
public email: string
) {}
addFavoriteBook(book: Book) {
this.favoriteBooks.push(book);
}
}
type Book = {
id: string;
name: string;
isbn?: string;
}
type User = {
id: string;
name: string;
email: string;
favoriteBooks: Book[];
addFavoriteBook: (book: Book) => void;
}
User ⊂ Book

61. “if it looks like a duck, swims like a
duck, and quacks like a duck, then it
probably is a duck”
Duck typing

62. “if it looks like a duck, swims like a
duck, and quacks like a duck, then it
probably is a duck”
Duck typing
~JavaScript

64. Case study 1:
🪪 ID encji

65. function addBookToUserFavorites(userId: string, bookId: string) {
// ...
}
addBookToUserFavorites(
,
,
);
'716fccd0-73fd-4fbf-be44-7c3176242962'
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2'

66. function addBookToUserFavorites(userId: string, bookId: string) {
// ...
}
addBookToUserFavorites(
,
,
);
'716fccd0-73fd-4fbf-be44-7c3176242962'
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2'

67. Nazwane parametry

68. function addBookToUserFavorites(userId: string, bookId: string) {
// ...
}

69. function addBookToUserFavorites(userId: string, bookId: string) {
// ...
}
function addBookToUserFavorites({ userId, bookId }: { userId: string, bookId: string }) {
// ...
}

70. function addBookToUserFavorites(userId: string, bookId: string) {
// ...
}
function addBookToUserFavorites({ userId, bookId }: { userId: string, bookId: string }) {
// ...
}
addBookToUserFavorites({
bookId: 'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
userId: '716fccd0-73fd-4fbf-be44-7c3176242962',
);

71. Value Object

72. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}

73. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}

74. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
const userId = new UserId('716fccd0-73fd-4fbf-be44-7c3176242962');
const bookId = new BookId('a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2');
addBookToUserFavorites(bookId, userId);

75. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
const userId = new UserId('716fccd0-73fd-4fbf-be44-7c3176242962');
const bookId = new BookId('a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2');
addBookToUserFavorites(bookId, userId);

76. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
private type = 'user';
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
const userId = new UserId('716fccd0-73fd-4fbf-be44-7c3176242962');
const bookId = new BookId('a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2');
addBookToUserFavorites(bookId, userId);

77. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
private type = 'user';
private type = 'book';
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
const userId = new UserId('716fccd0-73fd-4fbf-be44-7c3176242962');
const bookId = new BookId('a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2');
addBookToUserFavorites(bookId, userId);

78. class UserId {
constructor(public id: string) {}
}
class BookId {
constructor(public id: string) {}
}
private type = 'user';
private type = 'book';
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
const userId = new UserId('716fccd0-73fd-4fbf-be44-7c3176242962');
const bookId = new BookId('a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2');
addBookToUserFavorites(bookId, userId);

79. Case study 2:
🕑 Czas

80. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}

81. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}
const delay = (timeInterval: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);

82. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}
const delay = (timeInterval: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

83. https://www.simscale.com/blog/nasa-mars-climate-orbiter-metric/

86. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}
const delay = (timeInterval: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);

87. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}
const delay = (timeInterval: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);
const delay = (timeIntervalInMilliseconds: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);

88. Value Object!

89. class TimeInterval {
}

90. class TimeInterval {
}
private value: number;

91. class TimeInterval {
}
private value: number;
private constructor(milliseconds: number) {
this.value = milliseconds;
}

92. class TimeInterval {
}
private value: number;
private constructor(milliseconds: number) {
this.value = milliseconds;
}
static fromMilliseconds(milliseconds: number) {
return new TimeInterval(milliseconds);
}

93. class TimeInterval {
}
private value: number;
private constructor(milliseconds: number) {
this.value = milliseconds;
}
static fromMilliseconds(milliseconds: number) {
return new TimeInterval(milliseconds);
}
static fromSeconds(seconds: number) {
return new TimeInterval(seconds * 1000);
}

94. class TimeInterval {
}
private value: number;
private constructor(milliseconds: number) {
this.value = milliseconds;
}
static fromMilliseconds(milliseconds: number) {
return new TimeInterval(milliseconds);
}
static fromSeconds(seconds: number) {
return new TimeInterval(seconds * 1000);
}
toMilliseconds() {
return this.value;
}

95. class TimeInterval {
}
private value: number;
private constructor(milliseconds: number) {
this.value = milliseconds;
}
static fromMilliseconds(milliseconds: number) {
return new TimeInterval(milliseconds);
}
static fromSeconds(seconds: number) {
return new TimeInterval(seconds * 1000);
}
toMilliseconds() {
return this.value;
}
toSeconds() {
return this.value / 1000;
}

96. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, timeInterval.toMilliseconds())
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

97. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, timeInterval.toMilliseconds())
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

98. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, timeInterval.toMilliseconds())
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

99. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, timeInterval.toMilliseconds())
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}
async function delayedHelloWorld() {
await delay(TimeInterval.fromSeconds(1));
console.log('Hello World');
}

100. Case study 3:
💵 Pieniądze

101. { price: 100 }

102. { price: 100 }

103. { price: 100 }

104. { price: 100 }

105. Value Object!

106. class Money {
constructor(
public amount: number,
public currency: string,
) {}
}

107. class Money {
constructor(
public amount: number,
public currency: string,
) {}
}
add(money: Money): Money {
return new Money(this.amount + money.amount, this.currency);
}

108. class Money {
constructor(
public amount: number,
public currency: string,
) {}
}
add(money: Money): Money {
if (this.currency !== money.currency) {
throw new Error("Cannot add different currencies");
}
return new Money(this.amount + money.amount, this.currency);
}

109. class Money<T extends string> {
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}

110. class Money<T extends string> {
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);

111. class Money<T extends string> {
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);

112. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs: Money<string> = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);
<T e
e
e
e
e
e
e
e
e
e
e
e
e
>
>

113. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs: Money<string> = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);

114. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs: Money<string> = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);
<in out T extends string> {

115. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs: Money<string> = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);
<in out T extends string> {

116. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs: Money<string> = new Money(100, 'PLN');
const someEuros = new Money(100, 'EUR');
somePLNs.add(someEuros);
<in out T extends string> {

117. class Money
constructor(
public amount: number,
public currency: T,
) {}
add(money: Money<T>): Money<T> {
return new Money(this.amount + money.amount, this.currency);
}
}
const somePLNs = new Money(100, 'PLN' as string);
const someEuros = new Money(100, 'EUR' as string);
somePLNs.add(someEuros);
<T extends string> {
<in out T extends string> {

118. A co z Functional
Programming?

122. Nominal Typing?
🤔

127. Opaque types

128. Opaque types
Branded types

129. Opaque types
Branded types
Nominal types

130. https://flow.org/en/

131. https://flow.org/en/docs/types/opaque-types/

132. Case study 1:
🪪 ID encji

134. function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}

135. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}

136. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;

137. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);

138. TypeScript nie istnieje w runtime

139. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);

140. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };

141. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };
type BookId = string & { _type: 'book_id' };

142. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };
type BookId = string & { _type: 'book_id' };

143. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };
type BookId = string & { _type: 'book_id' };

144. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };
type BookId = string & { _type: 'book_id' };

145. type UserId = string;
function addBookToUserFavorites(userId: UserId, bookId: BookId) {
// ...
}
type BookId = string;
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962',
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2',
);
type UserId = string & { _type: 'user_id' };
type BookId = string & { _type: 'book_id' };
addBookToUserFavorites(
'716fccd0-73fd-4fbf-be44-7c3176242962' as UserId,
'a2db2ce5-6ad3-4b01-8f7e-8f435d9d30b2' as BookId,
);

146. type UserId = string & { _type: 'user_id' };

147. type UserId = string & { _type: 'user_id' };

148. type UserId = string & { _type: 'user_id' };
type Property = keyof any;

149. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string

150. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']

151. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number

152. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number array[0]

153. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number array[0]
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

154. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number array[0]

155. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number array[0]
| symbol

156. type UserId = string & { _type: 'user_id' };
type Property = keyof any;
| string object['_type']
| number array[0]
| symbol object[Symbol('a')] = 'a';

157. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

158. https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html

159. type UserId = string & { _type: 'user_id' };

160. type UserId = string & { _type: 'user_id' };
declare const Nominal: unique symbol;

161. type UserId = string & { _type: 'user_id' };
declare const Nominal: unique symbol;
type UserId = string & { [Nominal]: 'user_id' };

162. type UserId = string & { _type: 'user_id' };
declare const Nominal: unique symbol;
type UserId = string & { [Nominal]: 'user_id' };
type NominalType<TType, TNominal extends string> = TType & { [Nominal]: TNominal };

163. type UserId = string & { _type: 'user_id' };
declare const Nominal: unique symbol;
type UserId = string & { [Nominal]: 'user_id' };
type NominalType<TType, TNominal extends string> = TType & { [Nominal]: TNominal };
type UserId = NominalType<string, 'user_id'>

164. type UserId = string & { _type: 'user_id' };
declare const Nominal: unique symbol;
type UserId = string & { [Nominal]: 'user_id' };
type NominalType<TType, TNominal extends string> = TType & { [Nominal]: TNominal };
type UserId = NominalType<string, 'user_id'>
type BookId = NominalType<string, 'book_id'>

166. Backend

167. Backend Frontend

168. Backend Frontend
Kontrakt

169. Backend Frontend
Kontrakt
GET /books
{ id: BookId }[]

170. Backend Frontend
Kontrakt
GET /books
{ id: BookId }[]
POST /favorites
{ id: BookId }

171. Case study 2:
🕑 Czas

172. async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}
const delay = (timeInterval: number) => new Promise(
resolve => setTimeout(resolve, timeInterval)
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

173. type TimeInterval = NominalType<number, 'TimeInterval'>;

174. type TimeInterval = NominalType<number, 'TimeInterval'>;
const milliseconds = (howMany: number) => howMany as TimeInterval;
const seconds = (howMany: number) => (howMany * 1000) as TimeInterval;

175. type TimeInterval = NominalType<number, 'TimeInterval'>;
const milliseconds = (howMany: number) => howMany as TimeInterval;
const seconds = (howMany: number) => (howMany * 1000) as TimeInterval;
const toMilliseconds = (timeInterval: TimeInterval) => timeInterval as number;
const toSeconds = (timeInterval: TimeInterval) => timeInterval / 1000;

176. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, toMilliseconds(timeInterval))
);

177. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, toMilliseconds(timeInterval))
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

178. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, toMilliseconds(timeInterval))
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

179. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, toMilliseconds(timeInterval))
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}

180. const delay = (timeInterval: TimeInterval) => new Promise(
resolve => setTimeout(resolve, toMilliseconds(timeInterval))
);
async function delayedHelloWorld() {
await delay(1);
console.log('Hello World');
}
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}

181. Case study 3:
💵 Pieniądze

182. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };

183. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Money<'EUR'>;

184. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Money<'EUR'>;
const somePLNs = moneyInPLN(100);
const someEuros = moneyInEUR(100);

185. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Money<'EUR'>;
const somePLNs = moneyInPLN(100);
const someEuros = moneyInEUR(100);
const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'EUR'> = somePLNs;

186. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Money<'EUR'>;
const somePLNs = moneyInPLN(100);
const someEuros = moneyInEUR(100);
const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'EUR'> = somePLNs;

187. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Money<'EUR'>;
const somePLNs = moneyInPLN(100);
const someEuros = moneyInEUR(100);
const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'EUR'> = somePLNs;

188. const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'PLN'> = somePLNs;
const sum = amount1 + amount2;

189. const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'PLN'> = somePLNs;
const sum = amount1 + amount2;
const sum = 1 + 1;

190. const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'PLN'> = somePLNs;
const sum = amount1 + amount2;
const sum = 1 + 1;
const sum = {} + {};

191. const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'PLN'> = somePLNs;
const sum = amount1 + amount2;
const sum = 1 + 1;
const sum = {} + {};

192. const amount1: Money<'EUR'> = someEuros;
const amount2: Money<'PLN'> = somePLNs;
const sum = amount1 + amount2;
const sum = 1 + 1;
const sum = {} + {};

193. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };

194. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
declare const Nominal: unique symbol;
type Money<TCurrency extends string> = Number & { [Nominal]: TCurrency };

195. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
declare const Nominal: unique symbol;
type Money<TCurrency extends string> = Number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Number as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Number as Money<'EUR'>;

196. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
declare const Nominal: unique symbol;
type Money<TCurrency extends string> = Number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Number as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Number as Money<'EUR'>;
const sum = someEuros + somePLNs;

197. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
declare const Nominal: unique symbol;
type Money<TCurrency extends string> = Number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Number as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Number as Money<'EUR'>;
const sum = someEuros + somePLNs;

198. declare const Nominal: unique symbol;
type Money<TCurrency extends string> = number & { [Nominal]: TCurrency };
declare const Nominal: unique symbol;
type Money<TCurrency extends string> = Number & { [Nominal]: TCurrency };
const moneyInPLN = (amount: number) => amount as Number as Money<'PLN'>;
const moneyInEUR = (amount: number) => amount as Number as Money<'EUR'>;
const sum = someEuros + somePLNs;

199. function addMoney<TMoney extends Money<string>>(amount1: TMoney, amount2: TMoney): TMoney {
return amount1 as any + amount2;
}

200. function addMoney<TMoney extends Money<string>>(amount1: TMoney, amount2: TMoney): TMoney {
return amount1 as any + amount2;
}
const sum = addMoney(somePLNs, someEuros)

201. function addMoney<TMoney extends Money<string>>(amount1: TMoney, amount2: TMoney): TMoney {
return amount1 as any + amount2;
}
const sum = addMoney(somePLNs, someEuros)

202. function addMoney<TMoney extends Money<string>>(amount1: TMoney, amount2: TMoney): TMoney {
return amount1 as any + amount2;
}
const sum = addMoney(somePLNs, someEuros)

203. Podsumowanie

204. Typowanie strukturalne + OO bywa pułapką

205. Typowanie strukturalne + OO bywa pułapką
user1.addFavoriteBook(user1);

206. Możliwa jest symulacja typów nominalnych w TS

207. Możliwa jest symulacja typów nominalnych w TS
declare const Nominal: unique symbol;

208. Możliwa jest symulacja typów nominalnych w TS
declare const Nominal: unique symbol;
type NominalType<TType, TNominal extends string> = TType & { [Nominal]: TNominal };

209. Możemy dodać prymitywnym typom nominały

210. Możemy dodać prymitywnym typom nominały
type UserId = NominalType<string, 'user_id'>
type BookId = NominalType<string, 'book_id'>

211. Case study z pieniędzmi to być może nie najlepsze zastosowanie,

212. Case study z pieniędzmi to być może nie najlepsze zastosowanie,
ale warto wiedzieć że w TS istnieje masa sztuczek ;-)

213. Case study z pieniędzmi to być może nie najlepsze zastosowanie,
ale warto wiedzieć że w TS istnieje masa sztuczek ;-)
Enkapsulacja operacji na prymitywnych typach

214. Case study z pieniędzmi to być może nie najlepsze zastosowanie,
ale warto wiedzieć że w TS istnieje masa sztuczek ;-)
Enkapsulacja operacji na prymitywnych typach
Opaque types

215. Typy nominalne mogą czuwać nad liczbami i jednostkami

216. Typy nominalne mogą czuwać nad liczbami i jednostkami
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}

217. Typy nominalne mogą czuwać nad liczbami i jednostkami
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}
Prymitywne typy pod spodem

218. Typy nominalne mogą czuwać nad liczbami i jednostkami
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}
Prymitywne typy pod spodem
Terser?

219. Typy nominalne mogą czuwać nad liczbami i jednostkami
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}
Prymitywne typy pod spodem
Terser?
Inlining przy kompilacji

220. Typy nominalne mogą czuwać nad liczbami i jednostkami
async function delayedHelloWorld() {
await delay(seconds(1));
console.log('Hello World');
}
Prymitywne typy pod spodem
Terser?
Inlining przy kompilacji
async function delayedHelloWorld() {
await delay(1000);
console.log('Hello World');
}

223. Dziękuje za uwagę!
Wiktor Toporek
Senior Frontend Developer
✉ wiktor.toporek@tsh.io
Twitter: @vViktorPL
tsh.io
✉ wtoporek@gmail.com
tsh.io/programowanko

224. Dziękuje za uwagę!
Wiktor Toporek
Senior Frontend Developer
✉ wiktor.toporek@tsh.io
Twitter: @vViktorPL
tsh.io
Q & A
✉ wtoporek@gmail.com
tsh.io/programowanko