#6 - Union Type in TypeScript — Transcript

Full transcript

1. 0:00hey guys this is Naia welcome back to
2. 0:01nav automation labs and back to our
3. 0:03typescript Series so so far in the
4. 0:06typescript what we have seen that we
5. 0:08have seen the basics of typescript in
6. 0:10the last session we have seen that uh
7. 0:12what do you mean by type what do you
8. 0:14mean by array what do you mean by enum
9. 0:17what do you mean by Tuple right so today
10. 0:20we are going to talk about one more data
11. 0:22type that we can use it with the
12. 0:25variables that is called the union type
13. 0:29Okay so let's create a new a file and
14. 0:32here I'm writing that Union concept. TS
15. 0:38I have changed the theme with the white
16. 0:39color tell me if you like it otherwise
17. 0:41we will continue with the black color
18. 0:42theme also so Union
19. 0:45means if let's see a particular variable
20. 0:48is there and I really want to give
21. 0:50multiple types of the same variable
22. 0:52let's see a variable can be numeric also
23. 0:55can be string also in that case I can
24. 0:58Define both of them right so for example
25. 1:00let's say I'm going to create a variable
26. 1:03and the variable name that I'm writing
27. 1:04that there is one user ID and this user
28. 1:06ID can be string also and can be a
29. 1:08numeric value right so either of them we
30. 1:10can write it so what you do you simply
31. 1:12put a bracket like this and then you
32. 1:14write a string or and then you can write
33. 1:18it could be a number also here like that
34. 1:21right and whatever the value that you
35. 1:22really want to Define you can Define it
36. 1:25here so this user ID can be string or
37. 1:27can be number so with this pipe operator
38. 1:30or you can say a union operator you can
39. 1:32use it here and N number of operators
40. 1:34you can give it let's see n number of
41. 1:36types you can give it user ID can be
42. 1:38Boolean also that Boolean also you can
43. 1:40write it here but Boolean does not make
44. 1:42any sense to with the user ID so let me
45. 1:44remove it from here so now let's see if
46. 1:46I'm assigning the user ID is equal to
47. 1:48let's see 1,000 or 10,000 1 and now I'm
48. 1:52writing the user ID could be some string
49. 1:54value that I'm writing let's see naven
50. 1:56automation is my user ID either of them
51. 1:59I can write here but if I'm writing the
52. 2:01user ID is equal to true it will give
53. 2:03you the error here because we have given
54. 2:05only two types either a string or number
55. 2:08so this is called Union type simple so
56. 2:12can we use this Union type for the
57. 2:14function parameters also of course you
58. 2:17can use that so for example let's see if
59. 2:19I'm creating the function and then I'm
60. 2:21saying that get user information that I
61. 2:25really want to fetch the user
62. 2:27information and then it's taking one
63. 2:29user ID or it's taking let's see one uh
64. 2:33customer ID or something so here I'm
65. 2:34creating let's see you give me the
66. 2:36customer ID and this customer ID could
67. 2:39be in any format so here I'm writing
68. 2:41that again you put a bracket and then it
69. 2:44could be a string also and then again
70. 2:46you write a pipe and then it could be a
71. 2:48number
72. 2:49also right so customer ID that you have
73. 2:52to give it to me and then I'm going to
74. 2:53give you some user information from here
75. 2:57right or let's say I really want to
76. 2:59print some user information here that
77. 3:01also we can do it here so for example
78. 3:03let's see I can write one if
79. 3:05condition and let's see I'm going to
80. 3:07call this method from here also so let's
81. 3:10call this method at the same time I'm
82. 3:12calling this and now I'm passing the
83. 3:14user ID is let's see
84. 3:1690001 so see I'm passing a numeric value
85. 3:19so this 90001 will be given to the
86. 3:21customer ID and now I'm checking that
87. 3:23what type of customer ID that you are
88. 3:25getting it so which operator we have to
89. 3:27use so here we have to use type of
90. 3:30we can use it here so I'm checking if
91. 3:34the type of customer ID is equal to
92. 3:37equal to equal to a number right so
93. 3:41remember type of operator we discussed
94. 3:42in the JavaScript also type of operator
95. 3:45will tell you that what is a type of a
96. 3:47specific variable so if I'm passing
97. 3:5090001 90001 is a numeric value or is a
98. 3:53number will be given to this so it will
99. 3:55tell you that okay the type of customer
100. 3:57ID is actually a number if it is a
101. 3:59number then I'm saying that okay fine
102. 4:01that you have to return some some number
103. 4:05right or let's see whatever that you
104. 4:06want to return so let's see here I'm
105. 4:08writing that some number 1,000 okay
106. 4:10whatever 9,000 some information that I'm
107. 4:13Printing and along with that I'm
108. 4:15printing the name also that okay the
109. 4:16username is naen here right something
110. 4:19like this let's see I'm assigning it
111. 4:21here in the form of return and then
112. 4:24again I'm writing another else if that
113. 4:27else if that uh if the type of again I'm
114. 4:33writing if the type of what if the type
115. 4:35of customer ID which is equal to equal
116. 4:37to uh string then in that case I'll say
117. 4:41that okay no it's just simple you have
118. 4:44to
119. 4:45return let's see underscore naven only
120. 4:48right so simple let's see a simple basic
121. 4:50function that I have return so if I'm
122. 4:52passing 90001 90001 will be given to
123. 4:55this guy and then uh customer ID could
124. 4:58be a string on number here I'm passing
125. 5:00that c checking that customer ID is
126. 5:02equal to number yes this time is equal
127. 5:04to number so return the customer ID that
128. 5:06you are passing so let's see whatever
129. 5:08the customer ID that you are giving to
130. 5:09me and then you append with naven or
131. 5:12with your username let's see underscore
132. 5:13naven or something and then you return
133. 5:15back so if I let's see print it on the
134. 5:18console directly so I'm just console.log
135. 5:21and I'm printing it so what will be the
136. 5:23output in that case right so let's
137. 5:26simple compile it first and then let's
138. 5:28see so here I'm going to compile with
139. 5:30the typescript compiler and the file
140. 5:33name is the union concept. TS and the
141. 5:36respective JS file will be created here
142. 5:39and uh then I'm writing what then I'm
143. 5:41writing the node and the union dot Js
144. 5:46concept. Js so you can say 901 unor
145. 5:49naven we are getting it here so at the
146. 5:52same time now I'm calling this
147. 5:53particular function with some value so
148. 5:56let's see here I'm passing the value the
149. 5:58customer ID
150. 6:00okay in the form of a string that I'm
151. 6:02passing so let's see here I'm passing
152. 6:05that automation all right so automation
153. 6:08is let's see my customer ID will be
154. 6:09given to this guy yes it's not giving me
155. 6:11any error at the compile time why
156. 6:13because customer ID could be string also
157. 6:16and then I can check customer ID type of
158. 6:18customer ID is number no type of
159. 6:20customer ID is a string yes so what will
160. 6:23you return I'm returning underscore
161. 6:25naven from here and then underscore
162. 6:27naven will be printed here so
163. 6:30so let's see so I'll do one thing let's
164. 6:32see whatever the customer Ida that you
165. 6:33are giving to me I'm just using and
166. 6:36appending it here that's it okay let's
167. 6:39compile it
168. 6:41again and uh run it again with the node
169. 6:43so here you can see automation uncore
170. 6:45naven we are getting it here simple but
171. 6:49at the same time if I'm calling this
172. 6:50particular function with some uh Boolean
173. 6:53value for example I'm passing a true it
174. 6:56is giving me the error why because this
175. 6:58get us user information can take the
176. 7:00customer ID in the form of a string and
177. 7:02the number only and that's it so that's
178. 7:05why the Boolean is not allowed here so
179. 7:08this is very flexible and uh very
180. 7:10flexibility given is uh uh in the
181. 7:14typescript that you can Define the type
182. 7:16sometimes you know your user ID customer
183. 7:19ID in alpha numeric form or alphabetic
184. 7:22form or a string form or number form
185. 7:24like this you can pass it here that's it
186. 7:27so I hope this is clear very simple
187. 7:28concept if you see the corresponding JS
188. 7:31file also in JS it will display like
189. 7:34that whatever the customer ID again is
190. 7:35checking the customer ID equal to equal
191. 7:37to number then return lve return with
192. 7:40this thing right but it is more readable
193. 7:42and then it's clearly visible that okay
194. 7:44yes that uh get user information you can
195. 7:47pass either a string or number here
196. 7:49other than that you cannot pass I hope
197. 7:52this is clear very simple concept very
198. 7:54small concept thank you so much