Type systems like TypeScript are the next thing when developing JavaScript applications. They make sure that your props are passed in the correct form and shape throughout your application. Together with GraphQLs query language based on types, you can create the web application of the future!

1. Web applications of the future
with TypeScript and GraphQL

2. Who is this for?
@gethackteam

3. @gethackteam

4. @gethackteam

5. That’s why you need
type systems! ✅ ❌
@gethackteam

6. A little bit about
myself first…
@gethackteam

7. Roy Derks
@gethackteam

8. What do you already know
about TypeScript? .
@gethackteam

9. TypeScript is a typed superset of
JavaScript
@gethackteam
That compiles to plain
JavaScript
And uses the latest ECMAScript
features

10. @gethackteam
superset. [′sü·pər‚set] (computer science)
A programming language that contains all
the features of a given language and has
been expanded or enhanced to include
other features as well.
- the internet

11. @gethackteam
superset. [′sü·pər‚set] (computer science)
A programming language that contains all
the features of a given language and has
been expanded or enhanced to include
other features as well.
- the internet

12. @gethackteam

13. @gethackteam
function with one
parameter

14. This will also run in
TypeScript
@gethackteam

15. @gethackteam

16. But not in “strict” mode
@gethackteam

17. As TypeScript has optional
static type checking
@gethackteam

18. @gethackteam

19. @gethackteam
Enable all strict type-
checking options

20. This will also run in
TypeScript
@gethackteam

21. This will also run in
TypeScript
@gethackteam

22. @gethackteam

23. @gethackteam
Will give a compile
error

24. Compile error?
@gethackteam

26. TypeScript is a typed superset of
JavaScript
@gethackteam
That compiles to plain
JavaScript
And uses the latest ECMAScript
features

27. @gethackteam
Compiler

28. @gethackteam

29. @gethackteam
Define how it’s compiled to
JavaScript

30. @gethackteam
Define how it’s compiled to
JavaScript

31. @gethackteam

32. @gethackteam
Compiles to ES5

33. So it can run in the browser
@gethackteam

34. @gethackteam

35. Back to compile errors
@gethackteam

36. @gethackteam

37. @gethackteam
Enable all strict type-
checking options

38. @gethackteam
Compile errors

39. @gethackteam
Compile errors
No type defined for ‘array’ and ‘item’

40. @gethackteam

41. @gethackteam
No type defined for ‘array’
and ‘item’

42. So you’d need to define types
@gethackteam

43. @gethackteam

44. @gethackteam
If you’re lazy,
just add ‘any’

45. But why use TypeScript then?
@gethackteam

46. Let's add some types
@gethackteam

47. @gethackteam

48. @gethackteam
Also, there’s some inference

49. There are multiple ways to
define types
@gethackteam

50. @gethackteam

51. @gethackteam

52. TypeScript is a typed superset of
JavaScript
@gethackteam
That compiles to plain
JavaScript
And uses the latest ECMAScript
features

53. @gethackteam

54. JavaScript that scales 🚀
@gethackteam

55. Want to learn more about
TypeScript?
@gethackteam

56. @gethackteam
https://www.typescriptlang.org/docs/

57. @gethackteam
https://www.typescriptlang.org/docs/

58. You know what else has types?
@gethackteam

59. You know what else has types?
GraphQL!
@gethackteam

60. @gethackteam
If you aren’t familiar with
GraphQL .

61. GraphQL is a query language for
APIs
@gethackteam
That offers a single endpoint for
multiple resources
And is based on a type system

62. @gethackteam

63. @gethackteam
Ask what you need, get exactly that

64. GraphQL is a query language for
APIs
@gethackteam
That offers a single endpoint for
multiple resources
And is based on a type system

65. @gethackteam

66. @gethackteam
Define nested relationships

67. GraphQL is a query language for
APIs
@gethackteam
That offers a single endpoint for
multiple resources
And is based on a type system

68. @gethackteam
Type system

69. @gethackteam
Type system

70. And they aren’t too different
@gethackteam

71. @gethackteam

72. @gethackteam
Both have basic “scalar” types

73. @gethackteam

74. @gethackteam
Can relate to other types

75. @gethackteam

76. @gethackteam
And have required/optional flags

77. @gethackteam
Let’s look at a GraphQL Server

78. @gethackteam
http://bit.ly/32HRSJG
GraphQL server
with Apollo

79. @gethackteam
So how can we combine
TypeScript and GraphQL?

80. @gethackteam
By using

81. @gethackteam
A CLI tool that generates
TypeScript types from a
GraphQL schema.

82. @gethackteam
Remember both the type
definitions?

83. @gethackteam

84. @gethackteam
The GraphQL schema is used to
generate TypeScript types

85. @gethackteam

86. @gethackteam
Generate TypeScript types

87. @gethackteam
How does this work?

88. @gethackteam
GraphQL Code Generator

89. @gethackteam
GraphQL Code Generator
Use a wizard to setup

90. @gethackteam
Or define your own settings

91. @gethackteam
GraphQL Code Generator

92. @gethackteam
GraphQL Code Generator
Generates TypeScript types

93. @gethackteam

94. @gethackteam
Generate TypeScript types

95. @gethackteam

96. @gethackteam

97. @gethackteam
Map basic TypeScript types
to scalar types of GraphQL

98. @gethackteam

99. @gethackteam
Keep relation to
non-scalar types

100. Opens the door to end-to-end
type safety
@gethackteam

101. And you can automatically
generate Apollo components
@gethackteam

102. So should I start converting to
TypeScript right away? 🧐
@gethackteam

103. @gethackteam

104. But definitely start using a
type system!!
@gethackteam

105. Want to learn more?
Search: Roy Derks@gethackteam
https://www.typescriptlang.org/docs/
https://graphql.org/learn/
https://graphql-code-generator.com/