1
00:00:06,540 --> 00:00:08,190
- All the examples we've seen so far

2
00:00:08,190 --> 00:00:09,540
have been using JavaScript,

3
00:00:09,540 --> 00:00:11,550
but some developers,
many developers actually,

4
00:00:11,550 --> 00:00:13,530
prefer to use TypeScript.

5
00:00:13,530 --> 00:00:16,920
TypeScript gives you
greater type assurance.

6
00:00:16,920 --> 00:00:18,990
When you declare a variable in TypeScript,

7
00:00:18,990 --> 00:00:22,200
you'd say something
like let X colon number.

8
00:00:22,200 --> 00:00:24,700
And the compiler would then check

9
00:00:24,700 --> 00:00:26,730
that you've used it as
a number consistently.

10
00:00:26,730 --> 00:00:29,370
So, you have more faith
that your code is bug free.

11
00:00:29,370 --> 00:00:31,440
Another advantage of TypeScript is

12
00:00:31,440 --> 00:00:34,020
that it has language
features like interfaces

13
00:00:34,020 --> 00:00:36,750
and enums to help you be rigorous

14
00:00:36,750 --> 00:00:38,970
in your type specification.

15
00:00:38,970 --> 00:00:41,670
Okay so, what about tests in TypeScript?

16
00:00:41,670 --> 00:00:44,820
Jest lets you test TypeScript code,

17
00:00:44,820 --> 00:00:45,900
quite straightforward actually,

18
00:00:45,900 --> 00:00:48,540
but you have to give it some configuration

19
00:00:48,540 --> 00:00:51,600
to help it translate
TypeScript into JavaScript,

20
00:00:51,600 --> 00:00:52,920
and to perform the test end.

21
00:00:52,920 --> 00:00:55,200
So, we are going to see how
to do that in this section.

22
00:00:55,200 --> 00:00:57,210
So, have a quick look, and we'll dig

23
00:00:57,210 --> 00:01:00,360
into the code in a moment,
but here's a simple function.

24
00:01:00,360 --> 00:01:02,940
It's an a file called example.ts

25
00:01:02,940 --> 00:01:06,180
in the UsingTypeScript folder.

26
00:01:06,180 --> 00:01:09,150
I've written a simple add
function. It takes two numbers.

27
00:01:09,150 --> 00:01:12,600
A and B must be numbers,
and the return value

28
00:01:12,600 --> 00:01:13,770
is also a number. Okay?

29
00:01:13,770 --> 00:01:15,900
So, in my TypeScript code here,

30
00:01:15,900 --> 00:01:18,630
I'm specifying the types of the inputs

31
00:01:18,630 --> 00:01:20,070
and the type of the return value.

32
00:01:20,070 --> 00:01:20,943
And that's fine.

33
00:01:21,840 --> 00:01:24,360
You can also use TypeScript in your tests.

34
00:01:24,360 --> 00:01:26,133
So, have a look at this test here.

35
00:01:27,240 --> 00:01:30,090
I've declared a variable expected,

36
00:01:30,090 --> 00:01:32,580
and I specified it's going to be a number.

37
00:01:32,580 --> 00:01:34,650
Okay? So, that's TypeScript code as well.

38
00:01:34,650 --> 00:01:37,920
That the expected result
is going to be 30.

39
00:01:37,920 --> 00:01:39,660
And then when I call the add function,

40
00:01:39,660 --> 00:01:42,420
I've imported the add
function from that module,

41
00:01:42,420 --> 00:01:46,140
when I call the add function,
the result should be 30.

42
00:01:46,140 --> 00:01:49,503
So, I've used TypeScript
here in my test as well.

43
00:01:50,520 --> 00:01:53,280
Right. Now, if you wanna
use TypeScript in jest,

44
00:01:53,280 --> 00:01:56,010
that's fine, but you
have to, first of all,

45
00:01:56,010 --> 00:02:00,390
install some libraries for
the TypeScript transpilation.

46
00:02:00,390 --> 00:02:02,940
So, in the package.json file

47
00:02:02,940 --> 00:02:06,750
there are some devDependencies
that you need to add in.

48
00:02:06,750 --> 00:02:08,760
I don't know if you come across Babel.

49
00:02:08,760 --> 00:02:11,220
Babel is a very useful transpiler.

50
00:02:11,220 --> 00:02:13,590
It converts TypeScript into JavaScript.

51
00:02:13,590 --> 00:02:18,590
So, here I have the Babel
preset for TypeScript,

52
00:02:18,630 --> 00:02:19,980
so that it kind of knows

53
00:02:19,980 --> 00:02:22,860
that it is going to be
looking at TypeScript.

54
00:02:22,860 --> 00:02:25,050
I've added some type information, jest.

55
00:02:25,050 --> 00:02:27,030
If you run it in TypeScript,

56
00:02:27,030 --> 00:02:29,280
jest has to have some type information

57
00:02:29,280 --> 00:02:31,500
to keep the TypeScript compiler happy.

58
00:02:31,500 --> 00:02:34,680
And then, Babel jest
is the third dependency

59
00:02:34,680 --> 00:02:35,820
that I need to add in. Okay?

60
00:02:35,820 --> 00:02:39,132
So, you need to basically
add these dependencies,

61
00:02:39,132 --> 00:02:41,940
these devDependencies, into
your package fluctuation file,

62
00:02:41,940 --> 00:02:45,480
and then you need to run an
npm install or yarn install

63
00:02:45,480 --> 00:02:49,110
in your folder to actually
install those libraries

64
00:02:49,110 --> 00:02:50,040
into your directory.

65
00:02:50,040 --> 00:02:52,470
So, I'm going to do that first.

66
00:02:52,470 --> 00:02:56,400
Here's my demo folder.
In this demo folder,

67
00:02:56,400 --> 00:02:59,250
I've got my package.json file.

68
00:02:59,250 --> 00:03:01,930
So, I'm going to do an npm install

69
00:03:03,360 --> 00:03:08,360
to install the libraries specified
by the package.json file.

70
00:03:09,210 --> 00:03:12,390
It always takes a little
while for that to finish.

71
00:03:12,390 --> 00:03:14,880
So, what we'll do is we'll just leave that

72
00:03:14,880 --> 00:03:17,910
carry on in the background
whilst we carry on

73
00:03:17,910 --> 00:03:19,230
our discussions.

74
00:03:19,230 --> 00:03:21,093
Okay? So, assuming that's finished,

75
00:03:22,290 --> 00:03:25,200
what you then have to do,
there's one more configuration,

76
00:03:25,200 --> 00:03:29,130
you have to have a file
called babel.config.json,

77
00:03:29,130 --> 00:03:33,300
and in there, you have
to set a Babel preset.

78
00:03:33,300 --> 00:03:35,760
Babel is a remarkable technology.

79
00:03:35,760 --> 00:03:38,250
It has presets to kind of configure it

80
00:03:38,250 --> 00:03:40,410
in different common usage scenarios.

81
00:03:40,410 --> 00:03:45,410
The TypeScript preset means
that Babel will now be capable

82
00:03:45,720 --> 00:03:50,550
of doing translation from
TypeScript into JavaScript.

83
00:03:50,550 --> 00:03:54,540
Okay? So, we've got that file
as well in the demo folder.

84
00:03:54,540 --> 00:03:57,000
This is what the code folder looks like,

85
00:03:57,000 --> 00:03:58,920
and so, we can have a look at this.

86
00:03:58,920 --> 00:03:59,790
Now, let's have a look.

87
00:03:59,790 --> 00:04:04,350
First of all, we had our
example code example.ts.

88
00:04:04,350 --> 00:04:05,580
I've actually got four functions,

89
00:04:05,580 --> 00:04:08,880
an add function, subtract,
multiply, and divide,

90
00:04:08,880 --> 00:04:10,530
and they're all in TypeScript.

91
00:04:10,530 --> 00:04:13,200
They all specify the types of the inputs,

92
00:04:13,200 --> 00:04:15,660
and the type of the return value.

93
00:04:15,660 --> 00:04:18,030
And then, in my test code,

94
00:04:18,030 --> 00:04:20,250
in my test code, I've got two suites.

95
00:04:20,250 --> 00:04:23,997
I've got a suite that tests
the additive functions,

96
00:04:23,997 --> 00:04:27,090
and a suite that tests the
multiplicative functions.

97
00:04:27,090 --> 00:04:32,090
So, in the first suite, I'm
testing the add function

98
00:04:32,970 --> 00:04:35,103
using TypeScript type in here.

99
00:04:35,970 --> 00:04:38,790
And, I'm also testing
the subtract function.

100
00:04:38,790 --> 00:04:39,900
And then, guess what?

101
00:04:39,900 --> 00:04:41,850
In the multiplicative suite,

102
00:04:41,850 --> 00:04:44,703
I'm testing that the
multiply function works,

103
00:04:45,660 --> 00:04:47,490
and that the divide function works.

104
00:04:47,490 --> 00:04:50,430
Just one point to make here.

105
00:04:50,430 --> 00:04:52,860
When I exported those functions,

106
00:04:52,860 --> 00:04:55,890
I exported them in an object basically,

107
00:04:55,890 --> 00:04:59,430
with four functions, add,
subtract, multiply, divide.

108
00:04:59,430 --> 00:05:03,660
When I imported that object
into my test, I gave it a name.

109
00:05:03,660 --> 00:05:07,020
So, funcs is the exported object.

110
00:05:07,020 --> 00:05:10,260
Funcs.add is the add
function in that object.

111
00:05:10,260 --> 00:05:12,690
Okay? So, that's how you can
export multiple functions

112
00:05:12,690 --> 00:05:13,980
as an object.

113
00:05:13,980 --> 00:05:15,540
And then, you kind of prefix it

114
00:05:15,540 --> 00:05:18,480
with that name there, like funcs.subtract,

115
00:05:18,480 --> 00:05:21,783
and funcs.multiply, and funcs.divide.

116
00:05:23,220 --> 00:05:27,510
Okay? My package.json file
had those devDependencies

117
00:05:27,510 --> 00:05:32,340
which I mentioned. Npm install
has installed those now.

118
00:05:32,340 --> 00:05:35,220
And then, I had my Babel configuration

119
00:05:35,220 --> 00:05:36,252
that basically told Babel,

120
00:05:36,252 --> 00:05:40,977
"Yes, you do have to do
TypeScript transpilation, please."

121
00:05:41,910 --> 00:05:44,100
Okay? So, with all those files in place,

122
00:05:44,100 --> 00:05:46,170
we're ready to run the tests.

123
00:05:46,170 --> 00:05:48,450
So, to run the tests,
the usual arrangement is

124
00:05:48,450 --> 00:05:51,840
just npm run test. The
TypeScript transpiler

125
00:05:51,840 --> 00:05:54,480
will automatically kick
in to convert TypeScript

126
00:05:54,480 --> 00:05:56,763
into JavaScript in order to run my tests.

127
00:05:58,170 --> 00:06:00,183
Npm run test.

128
00:06:01,770 --> 00:06:05,073
So, just waiting for it
to get its act together.

129
00:06:05,970 --> 00:06:08,820
I've got four functions all
together spread over two suites.

130
00:06:08,820 --> 00:06:11,850
I've got my additive suite,
with add and subtract.

131
00:06:11,850 --> 00:06:15,690
I've got my multiplicative
suite, with multiply and divide,

132
00:06:15,690 --> 00:06:17,820
and they've all worked successfully.

133
00:06:17,820 --> 00:06:21,600
So, feel free to write
TypeScript code if you want.

134
00:06:21,600 --> 00:06:23,610
There's absolutely, you
know, no reason not to.

135
00:06:23,610 --> 00:06:27,210
Just remember, the additional
packages you've got to install

136
00:06:27,210 --> 00:06:29,910
and the additional configuration
that you need for a Babel,

137
00:06:29,910 --> 00:06:32,910
so that it knows how to
transpile the TypeScript

138
00:06:32,910 --> 00:06:35,073
into JavaScript when it runs the tests.