Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - TypeScript Utility Types

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 Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Linode__Sponsor_9" name="Linode__Sponsor_9"></a>Linode - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started.</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="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:35 - Levels of using TypeScript</p> <ol> <li class="has-line-data" data-line-start="17" data-line-end="18"> Typing your code</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Typing your code, but getting a little bit more dynamic using utility types</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Creating your own utility types!</li> </ol> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> TypeScript is a language in itself</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Check out type challenges if you want your mind blown: <a href="https://github.com/type-challenges/type-challenges/">https://github.com/type-challenges/type-challenges/</a></li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href= "https://www.typescriptlang.org/docs/handbook/utility-types.html">https://www.typescriptlang.org/docs/handbook/utility-types.html</a></li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 07:29 - Partial</p> <p class="has-line-data" data-line-start="26" data-line-end="27"> 08:23 - ReadOnly</p> <p class="has-line-data" data-line-start="28" data-line-end="29"> 09:00 - Required</p> <p class="has-line-data" data-line-start="30" data-line-end="31"> 09:33 - Record</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32">A record is an object type that is a bit more restrictive</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 10:47 - Omit</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37">I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 11:34 - Pick</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="40"> Given a type, pick these properties</li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41"> 12:39 - Return Types</p> <ul> <li class="has-line-data" data-line-start="41" data-line-end="43"> Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 13:30 - Case</p> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> These case types are useful for when you are doing template literal types</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <code>Uppercase<StringType></code></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <code>Lowercase<StringType></code></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <code>Capitalize<StringType></code></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <code>Uncapitalize<StringType></code></li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Tweet_us_your_tasty_treats_50" name= "Tweet_us_your_tasty_treats_50"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about TypeScript utility types — what they are, why you might use them, why they exist, and more!
 Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started.
 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.
 Show Notes 03:35 - Levels of using TypeScript
  Typing your code
 Typing your code, but getting a little bit more dynamic using utility types
 Creating your own utility types!
  TypeScript is a language in itself
 Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/

 https://www.typescriptlang.org/docs/handbook/utility-types.html

  07:29 - Partial
 08:23 - ReadOnly
 09:00 - Required
 09:33 - Record
 A record is an object type that is a bit more restrictive
 Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.
  10:47 - Omit
 I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field
  11:34 - Pick
  Given a type, pick these properties
  12:39 - Return Types
  Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.
  13:30 - Case
  These case types are useful for when you are doing template literal types
 Uppercase
 Lowercase
 Capitalize
 Uncapitalize
  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

Hasty Treat - TypeScript Utility Types

Poslechněte si podcast