Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

TypeScript Fundamentals — Getting a Bit Deeper

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Deque__Sponsor_9" name="Deque__Sponsor_9"></a>Deque - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at <a href= "https://www.deque.com/syntax">deque.com/syntax</a>. No credit card needed.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>Mux - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit <a href= "https://mux.com/syntax">mux.com/syntax</a>.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <h3 class="code-line" data-line-start="20" data-line-end="21"> <a id="Deep_end_stuff_20" name="Deep_end_stuff_20"></a>Deep end stuff</h3> <p class="has-line-data" data-line-start="21" data-line-end="22"> 03:30 - <code>any vs unknown</code></p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 06:20 - <code>never</code></p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="26"> <a href= "https://twitter.com/Igorbdsq/status/1351681019196436482">https://twitter.com/Igorbdsq/status/1351681019196436482</a><br />  09:14 - .d.ts</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Definition files</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Usually for existing libraries that don’t have types</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Can be generated or hand-written</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Also really handy for pure JS projects, you still get good autocomplete because of these</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 13:25 - Type generation</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> Can be generated from GraphQL, or Schemas, or from JSON Output</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 17:20 - TypeScript generics (variables)</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Kind of like functions, they return something different based on what you pass it</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> makeFood<Sandwich></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> makeFood<Pizza></li> <li class="has-line-data" data-line-start="38" data-line-end="45"> This function makes food and shares lots of the same functionality between making a pizza and sandwich <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> If the only thing that differs is the type returned, we can use generics</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> You often see this as a single char T</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> It can be anything</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Promise is a generic</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> querySelector uses generics</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="45" data-line-end="46"> 21:48 - Promises / Async + Await</p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Functions now return a Promise type, but with a generic</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Promise<number></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Promise<Course></li> <li class="has-line-data" data-line-start="49" data-line-end="53"> Promise<Request<Order>>, Request<Customer>, Request<Product> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> stringified</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> added headers</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 29:48 - Type assertion (type casting)</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Type assertion is when you want to tell TypeScript “Hey I know better than you”.</li> <li class="has-line-data" data-line-start="55" data-line-end="61"> Two ways: <ul> <li class="has-line-data" data-line-start="56" data-line-end="61"> as keyword (most popular) <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> <code>someValue as HTMLParagraphElement</code></li> <li class="has-line-data" data-line-start="58" data-line-end="61"> Tagged before <ul> <li class="has-line-data" data-line-start="59" data-line-end="61"> <HTMLParagraphElement>someValue</li> </ul> </li> </ul> </li> </ul> </li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 34:14 - TypeScript without TypeScript (<a href= "https://jsdoc.app/">JSDoc</a> / <a href= "https://tsdoc.org/">TSDoc</a>)</p> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> Really nice!</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> You can also add comments / descriptions</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> <a href= "https://github.com/developit/redaxios/blob/master/src/index.js">https://github.com/developit/redaxios/blob/master/src/index.js</a></li> </ul> <p class="has-line-data" data-line-start="66" data-line-end="67"> 40:08 - Interfaces vs Types</p> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> Interfaces have better perf</li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href= "https://twitter.com/wesbos/status/1362418379919937545">https://twitter.com/wesbos/status/1362418379919937545</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://blog.logrocket.com/types-vs-interfaces-in-typescript/">https://blog.logrocket.com/types-vs-interfaces-in-typescript/</a></li> <li class="has-line-data" data-line-start="70" data-line-end="72"> What do you default to?</li> </ul> <h3 class="code-line" data-line-start="72" data-line-end="73"> <a id="How_we_write_TypeScript_72" name= "How_we_write_TypeScript_72"></a>How we write TypeScript</h3> <p class="has-line-data" data-line-start="73" data-line-end="74"> 44:27 - Interface or Types</p> <ul> <li class="has-line-data" data-line-start="74" data-line-end="75"> Scott - Types</li> <li class="has-line-data" data-line-start="75" data-line-end="77"> Wes - Interfaces</li> </ul> <p class="has-line-data" data-line-start="77" data-line-end="78"> 44:50 - <code>any vs unknown</code></p> <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> Scott - any</li> <li class="has-line-data" data-line-start="79" data-line-end="81"> Wes - unknown / any</li> </ul> <p class="has-line-data" data-line-start="81" data-line-end="82"> 46:52 - Any (No Implicit or Implicit Allowed)</p> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> Scott - No implicit any</li> <li class="has-line-data" data-line-start="83" data-line-end="85"> Wes - No implicit any</li> </ul> <p class="has-line-data" data-line-start="85" data-line-end="86"> 48:31 - Return types (Implicit or Explicit)</p> <ul> <li class="has-line-data" data-line-start="86" data-line-end="87"> Scott - Explicit always</li> <li class="has-line-data" data-line-start="87" data-line-end="89"> Wes - Not always</li> </ul> <p class="has-line-data" data-line-start="89" data-line-end="90"> 50:49 - Compile (TSC, Strip TS)</p> <ul> <li class="has-line-data" data-line-start="90" data-line-end="91"> Scott - Strip</li> <li class="has-line-data" data-line-start="91" data-line-end="93"> Wes - Both</li> </ul> <p class="has-line-data" data-line-start="93" data-line-end="94"> 52:38 - Type Assertion (as or <tag>)</p> <ul> <li class="has-line-data" data-line-start="94" data-line-end="95"> Scott - as</li> <li class="has-line-data" data-line-start="95" data-line-end="97"> Wes - as</li> </ul> <p class="has-line-data" data-line-start="97" data-line-end="98"> 53:09 - Arrays (Dog[] or Array<Dog>)</p> <ul> <li class="has-line-data" data-line-start="98" data-line-end="99"> Scott - Dog[]</li> <li class="has-line-data" data-line-start="99" data-line-end="101"> Wes - Dog[]</li> </ul> <p class="has-line-data" data-line-start="101" data-line-end="102"> 54:02 - Assert or Generic (if both work)</p> <ul> <li class="has-line-data" data-line-start="102" data-line-end= "103">querySelector(’.thing’) as HTMLVideoElement; or querySelector<HTMLVideoElement>(’.thing’);</li> <li class="has-line-data" data-line-start="103" data-line-end= "104">Scott - querySelector<HTMLVideoElement>(’.thing’);</li> <li class="has-line-data" data-line-start="104" data-line-end= "106">Wes - querySelector<HTMLVideoElement>(’.thing’);</li> </ul> <h2 class="code-line" data-line-start="106" data-line-end="107"> <a id="Links_106" name="Links_106"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href= "https://syntax.fm/show/324/typescript-fundamentals">Syntax 324: TypeScript Fundamentals</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "109"><a href= "https://syntax.fm/show/327/hasty-treat-typescript-compilers-and-build-tools"> Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools</a></li> <li class="has-line-data" data-line-start="109" data-line-end= "110"><a href="https://www.npmjs.com/package/axios">Axios</a></li> <li class="has-line-data" data-line-start="110" data-line-end= "111"><a href="https://code.visualstudio.com/">VS Code</a></li> <li class="has-line-data" data-line-start="111" data-line-end= "112"><a href= "https://syntax.fm/show/310/serverless-deno-and-typescript-with-brian-leroux"> Syntax 310: Serverless, Deno and TypeScript with Brian Leroux</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href="https://cloudinary.com/">Cloudinary</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "115"><a href="https://www.notion.so/">Notion</a></li> </ul> <h2 class="code-line" data-line-start="115" data-line-end="116"> <a id="_SIIIIICK__PIIIICKS__115" name= "_SIIIIICK__PIIIICKS__115"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="116" data-line-end= "117">Scott: <a href="https://amzn.to/3u9DlUx">Powerowl 16 Battery Recharger</a></li> <li class="has-line-data" data-line-start="117" data-line-end= "119">Wes: <a href="https://amzn.to/3cxKdFf">Fairywill Pro P11</a></li> </ul> <h2 class="code-line" data-line-start="119" data-line-end="120"> <a id="Shameless_Plugs_119" name= "Shameless_Plugs_119"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="120" data-line-end= "121">Scott: <a href= "https://www.leveluptutorials.com/pro">Level 2 Node Authentication</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="121" data-line-end= "123">Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="123" data-line-end="124"> <a id="Tweet_us_your_tasty_treats_123" name= "Tweet_us_your_tasty_treats_123"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="126" data-line-end= "127"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="127" data-line-end= "128"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="128" data-line-end= "129"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="129" data-line-end= "130"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="130" data-line-end= "131">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases.
 Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes Deep end stuff 03:30 - any vs unknown
 06:20 - never
  https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 -.d.ts
 Definition files
 Usually for existing libraries that don’t have types
 Can be generated or hand-written
 Also really handy for pure JS projects, you still get good autocomplete because of these
  13:25 - Type generation
  Can be generated from GraphQL, or Schemas, or from JSON Output
  17:20 - TypeScript generics (variables)
  Kind of like functions, they return something different based on what you pass it
 makeFood
 makeFood
 This function makes food and shares lots of the same functionality between making a pizza and sandwich  If the only thing that differs is the type returned, we can use generics
 You often see this as a single char T
 It can be anything
 Promise is a generic
 querySelector uses generics

  21:48 - Promises / Async + Await
  Functions now return a Promise type, but with a generic
 Promise
 Promise
 Promise, Request, Request  stringified
 added headers

  29:48 - Type assertion (type casting)
  Type assertion is when you want to tell TypeScript “Hey I know better than you”.
 Two ways:  as keyword (most popular)  someValue as HTMLParagraphElement
 Tagged before  someValue

  34:14 - TypeScript without TypeScript (JSDoc / TSDoc)
  Really nice!
 You can also add comments / descriptions
 https://github.com/developit/redaxios/blob/master/src/index.js

  40:08 - Interfaces vs Types
  Interfaces have better perf
 https://twitter.com/wesbos/status/1362418379919937545

 https://blog.logrocket.com/types-vs-interfaces-in-typescript/

 What do you default to?
  How we write TypeScript 44:27 - Interface or Types
  Scott - Types
 Wes - Interfaces
  44:50 - any vs unknown
  Scott - any
 Wes - unknown / any
  46:52 - Any (No Implicit or Implicit Allowed)
  Scott - No implicit any
 Wes - No implicit any
  48:31 - Return types (Implicit or Explicit)
  Scott - Explicit always
 Wes - Not always
  50:49 - Compile (TSC, Strip TS)
  Scott - Strip
 Wes - Both
  52:38 - Type Assertion (as or )
  Scott - as
 Wes - as
  53:09 - Arrays (Dog[] or Array)
  Scott - Dog[]
 Wes - Dog[]
  54:02 - Assert or Generic (if both work)
 querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’);
 Scott - querySelector(’.thing’);
 Wes - querySelector(’.thing’);
  Links Syntax 324: TypeScript Fundamentals
 Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools
 Axios
 VS Code
 Syntax 310: Serverless, Deno and TypeScript with Brian Leroux
 Cloudinary
 Notion
  ××× SIIIIICK ××× PIIIICKS ××× Scott: Powerowl 16 Battery Recharger

 Wes: Fairywill Pro P11

  Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%!
 Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats! Scott’s Instagram
 LevelUpTutorials Instagram
 Wes’ Instagram
 Wes’ Twitter
 Wes’ Facebook
 Scott’s Twitter
 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

TypeScript Fundamentals — Getting a Bit Deeper

Poslechněte si podcast