All language subtitles for 005 TypeScript_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian Download
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 00:00:03,000 --> 00:00:05,967 Some of you will be familiar with TypeScript, 2 00:00:05,967 --> 00:00:09,828 a language that adds static typing to JavaScript. 3 00:00:09,828 --> 00:00:12,471 If you want to, you can use TypeScript 4 00:00:12,471 --> 00:00:14,418 for our Next.js application. 5 00:00:14,488 --> 00:00:16,686 Now, this step is optional; 6 00:00:16,686 --> 00:00:18,686 it's only for those of you who 7 00:00:18,686 --> 00:00:20,286 already know TypeScript. 8 00:00:20,353 --> 00:00:22,361 In all the other videos I'll 9 00:00:22,361 --> 00:00:24,010 use regular JavaScript, 10 00:00:24,082 --> 00:00:27,249 simply because not everybody knows TypeScript, 11 00:00:27,249 --> 00:00:29,465 and explaining that language would 12 00:00:29,465 --> 00:00:31,682 require an entire separate course. 13 00:00:31,747 --> 00:00:34,147 So if you don't know TypeScript, feel 14 00:00:34,147 --> 00:00:36,483 free to skip the rest of this video. 15 00:00:36,548 --> 00:00:39,446 But if you do want to use it in this project, 16 00:00:39,446 --> 00:00:41,550 I'll now show you how to do that. 17 00:00:41,550 --> 00:00:43,450 Let's stop the dev server, 18 00:00:43,450 --> 00:00:46,496 because we're going to rename a few files. 19 00:00:46,496 --> 00:00:49,170 Instead of "page.jsx", 20 00:00:49,170 --> 00:00:52,238 we want to call this "page.tsx". 21 00:00:52,238 --> 00:00:55,812 "tsx" is the extension for TypeScript files 22 00:00:55,812 --> 00:00:58,339 that also contain JSX code. 23 00:00:58,339 --> 00:01:01,032 Let's do the same for the layout file; 24 00:01:01,032 --> 00:01:03,951 this one will be "layout.tsx". 25 00:01:03,951 --> 00:01:06,749 The editor shows some errors at the moment, 26 00:01:06,749 --> 00:01:08,940 but that's just because we haven't 27 00:01:08,940 --> 00:01:10,745 configured this project yet. 28 00:01:10,810 --> 00:01:13,993 We don't even have TypeScript as a dependency. 29 00:01:13,993 --> 00:01:16,460 Now, the "next" command line tool 30 00:01:16,460 --> 00:01:18,629 can set up everything for us. 31 00:01:18,703 --> 00:01:21,339 We just need to start the server, 32 00:01:21,339 --> 00:01:23,575 with "npm run dev" as usual. 33 00:01:23,655 --> 00:01:26,042 You can see here that the "next" 34 00:01:26,042 --> 00:01:27,608 command detected that 35 00:01:27,683 --> 00:01:29,952 we're "trying to use TypeScript" 36 00:01:29,952 --> 00:01:33,379 "but do not have the required packages installed", 37 00:01:33,379 --> 00:01:35,716 and so it installed the dependencies 38 00:01:35,716 --> 00:01:36,625 automatically. 39 00:01:36,690 --> 00:01:40,328 It also "created a tsconfig.json file". 40 00:01:40,328 --> 00:01:42,791 In fact, in our package.json 41 00:01:42,791 --> 00:01:46,415 we now have 3 dev dependencies: "typescript", 42 00:01:46,415 --> 00:01:49,303 and the typings for "node" and "react". 43 00:01:49,303 --> 00:01:51,470 We also have two new files: 44 00:01:51,483 --> 00:01:56,339 "next-env.d.ts", that contains some references, 45 00:01:56,339 --> 00:01:58,835 and "tsconfig.json", 46 00:01:58,835 --> 00:02:01,200 that's the main configuration file 47 00:02:01,200 --> 00:02:03,426 used by the TypeScript compiler. 48 00:02:03,495 --> 00:02:05,871 We can leave these files as they are. 49 00:02:05,871 --> 00:02:08,477 Note however that, by default, it has 50 00:02:08,477 --> 00:02:10,943 the "strict" option set to "false". 51 00:02:11,013 --> 00:02:13,008 If you're a purist you may want 52 00:02:13,008 --> 00:02:14,487 to change that to true, 53 00:02:14,552 --> 00:02:16,133 but I'll leave it as it is. 54 00:02:16,133 --> 00:02:18,908 So, the "next" command added TypeScript 55 00:02:18,908 --> 00:02:20,545 support to our project, 56 00:02:20,616 --> 00:02:24,590 after detecting that we had some "tsx" files. 57 00:02:24,590 --> 00:02:26,940 And our application is still working, 58 00:02:26,940 --> 00:02:28,274 even with TypeScript. 59 00:02:28,338 --> 00:02:30,450 Now, in terms of code, 60 00:02:30,450 --> 00:02:32,526 we don't really need to change 61 00:02:32,526 --> 00:02:34,325 anything in this HomePage. 62 00:02:34,394 --> 00:02:36,334 There is a way we could fully 63 00:02:36,334 --> 00:02:38,006 type the React component, 64 00:02:38,073 --> 00:02:42,510 by declaring it as a const of type "React.FC", 65 00:02:42,510 --> 00:02:45,636 and then initializing it as an arrow function. 66 00:02:45,636 --> 00:02:48,959 FC is short for FunctionComponent. 67 00:02:48,959 --> 00:02:51,419 Although it's possible to do this, 68 00:02:51,419 --> 00:02:53,806 it no longer seems to be the most 69 00:02:53,806 --> 00:02:55,831 popular approach these days. 70 00:02:55,903 --> 00:02:58,472 Even without explicit typings, 71 00:02:58,472 --> 00:03:01,390 the TypeScript compiler can infer that 72 00:03:01,390 --> 00:03:04,830 this function returns a "JSX.Element". 73 00:03:04,830 --> 00:03:06,942 Which is pretty much all there 74 00:03:06,942 --> 00:03:08,631 is to a React component. 75 00:03:08,701 --> 00:03:11,037 Adding the "React.FC" annotation 76 00:03:11,037 --> 00:03:13,008 doesn't have huge benefits, 77 00:03:13,081 --> 00:03:16,149 while it makes the code a bit more complex. 78 00:03:16,149 --> 00:03:18,790 So I'll leave this component as it is. 79 00:03:18,790 --> 00:03:21,876 Now, if we look at "layout.tsx", 80 00:03:21,876 --> 00:03:24,358 this component receives some props, 81 00:03:24,358 --> 00:03:26,614 and at the moment this "children" 82 00:03:26,614 --> 00:03:28,460 property could be anything. 83 00:03:28,529 --> 00:03:30,993 So we may want to define an interface, 84 00:03:30,993 --> 00:03:33,080 let's call it "LayoutProps", 85 00:03:33,813 --> 00:03:36,110 where we specify that "children" 86 00:03:36,110 --> 00:03:38,457 should be a "ReactNode", 87 00:03:38,457 --> 00:03:40,284 that's a type we can import 88 00:03:40,284 --> 00:03:41,908 from the "react" module, 89 00:03:41,976 --> 00:03:45,626 and it represents effectively any JSX element. 90 00:03:45,626 --> 00:03:47,600 Now we can use this interface 91 00:03:47,966 --> 00:03:50,283 to annotate the "props" object. 92 00:03:50,283 --> 00:03:52,113 And this way the compiler 93 00:03:52,113 --> 00:03:53,942 knows what "children" is. 94 00:03:54,015 --> 00:03:56,280 It will also know which properties 95 00:03:56,280 --> 00:03:58,211 are available in this object, 96 00:03:58,278 --> 00:04:00,668 in this case there's only this one. 97 00:04:00,668 --> 00:04:03,194 But the compiler can check if we're 98 00:04:03,194 --> 00:04:05,070 using the props correctly. 99 00:04:05,142 --> 00:04:07,776 Now, as much as I like TypeScript, 100 00:04:07,776 --> 00:04:10,590 and I would use it for any serious project, 101 00:04:10,590 --> 00:04:13,103 one of the challenges with it is that 102 00:04:13,103 --> 00:04:15,244 sometimes there's more than one 103 00:04:15,244 --> 00:04:16,970 way to do the same thing. 104 00:04:17,039 --> 00:04:19,115 For example, in the Next.js 105 00:04:19,115 --> 00:04:20,961 documentation you'll see 106 00:04:21,038 --> 00:04:23,899 the props object annotated like this, 107 00:04:23,899 --> 00:04:27,166 rather than by defining a separate interface. 108 00:04:27,166 --> 00:04:29,050 It's effectively the same thing. 109 00:04:29,050 --> 00:04:32,569 I personally prefer having an interface at the top 110 00:04:32,569 --> 00:04:35,130 where I can more easily see the props 111 00:04:35,130 --> 00:04:36,999 accepted by this component. 112 00:04:37,068 --> 00:04:39,319 Also, instead of an "interface", 113 00:04:39,319 --> 00:04:42,690 some people prefer using "type" for everything, 114 00:04:42,690 --> 00:04:45,948 including to describe the properties of an object. 115 00:04:45,948 --> 00:04:48,162 Again, in practice this is pretty 116 00:04:48,162 --> 00:04:49,505 much the same thing, 117 00:04:49,572 --> 00:04:52,251 and which approach to choose is mostly 118 00:04:52,251 --> 00:04:54,507 a matter of personal preference. 119 00:04:54,578 --> 00:04:58,329 One feature I like to use is "import type", 120 00:04:58,329 --> 00:05:00,723 for types that are only used by 121 00:05:00,723 --> 00:05:02,808 the compiler at build time, 122 00:05:02,885 --> 00:05:05,779 as opposed to functions or objects 123 00:05:05,779 --> 00:05:09,770 that import JavaScript code used at runtime. 124 00:05:09,770 --> 00:05:12,137 This is not usually necessary; 125 00:05:12,137 --> 00:05:13,881 but I like the distinction. 126 00:05:13,881 --> 00:05:16,738 Of course, you may have your own preferences. 127 00:05:16,738 --> 00:05:19,272 But the important thing is that our 128 00:05:19,272 --> 00:05:21,300 app now supports TypeScript. 129 00:05:21,372 --> 00:05:23,700 Now, even though I'll use JavaScript 130 00:05:23,700 --> 00:05:25,381 in the rest of the videos, 131 00:05:25,446 --> 00:05:28,043 I'm also providing you with a TypeScript 132 00:05:28,043 --> 00:05:29,601 version of this project. 133 00:05:29,666 --> 00:05:32,821 If we take another look at the Github Repository, 134 00:05:32,821 --> 00:05:35,314 it includes a "typescript" branch, 135 00:05:35,561 --> 00:05:38,166 where you can again find all the code, 136 00:05:38,166 --> 00:05:41,446 but written in TypeScript rather than JavaScript. 137 00:05:41,446 --> 00:05:43,531 You can see that there are 138 00:05:43,531 --> 00:05:45,616 "ts" and "tsx" files here. 139 00:05:45,696 --> 00:05:49,442 About 90% of the code is the same anyway, 140 00:05:49,442 --> 00:05:51,941 but from the next lecture onwards 141 00:05:51,941 --> 00:05:55,224 you'll also find a link to a TypeScript Diff, 142 00:05:55,224 --> 00:05:57,583 where you can see how I would type 143 00:05:57,583 --> 00:05:59,803 function parameters for example, 144 00:05:59,873 --> 00:06:03,360 or define an interface to describe some data. 145 00:06:03,360 --> 00:06:05,791 So if you want to use TypeScript while 146 00:06:05,791 --> 00:06:07,774 following along with the videos 147 00:06:07,838 --> 00:06:09,832 by all means you can do that. 10705

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.