Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Enums in JS (GraphQL and Typescript)

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 enums in JS — what they are, what they do, and how they work in JavaScript.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 03:11 - What are enums?</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="16">A type restricting variables to one value from a predefined set of constants</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> Direction = UP / DOWN / LEFT / RIGHT</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Role = ADMIN EDITOR AUTHOR VIEWER</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Day of the Week</li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 05:12 - In GraphQL</p> <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> enum Role { ADMIN EDITOR AUTHOR VIEWER}</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> Then</li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 07:05 - In TypeScript</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="27"> First, declare the type: <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> enum direction = { UP, DOWN, LEFT, RIGHT }</li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="30"> Then when you defined your function, use that type <ul> <li class="has-line-data" data-line-start="28" data-line-end="30"> type User { role: Role } or type User { role: [Role] }</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 08:49 - In JavaScript</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Not in JS yet</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> There is a proposal in stage 1 <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://github.com/rbuckton/proposal-enum">https://github.com/rbuckton/proposal-enum</a></li> </ul> </li> <li class="has-line-data" data-line-start="34" data-line-end="36"> And a babel plugin: <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.npmjs.com/package/babel-plugin-const-enum">https://www.npmjs.com/package/babel-plugin-const-enum</a></li> </ul> </li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Can use case/switch</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Can use Object or Map keys</li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="Links_39" name="Links_39"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="40" data-line-end="42"> <a href= "https://syntax.fm/show/287/hasty-treat-records-and-tuples-in-javascript"> Syntax 287: Hasty Treat - Records and Tuples in JavaScript</a></li> </ul> <h2 class="code-line" data-line-start="42" data-line-end="43"> <a id="Tweet_us_your_tasty_treats_42" name= "Tweet_us_your_tasty_treats_42"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> 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 enums in JS — what they are, what they do, and how they work in JavaScript.
 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:11 - What are enums?
 A type restricting variables to one value from a predefined set of constants
 Direction = UP / DOWN / LEFT / RIGHT
 Role = ADMIN EDITOR AUTHOR VIEWER
 Day of the Week
  05:12 - In GraphQL
  enum Role { ADMIN EDITOR AUTHOR VIEWER}
 Then
  07:05 - In TypeScript
  First, declare the type:  enum direction = { UP, DOWN, LEFT, RIGHT }

 Then when you defined your function, use that type  type User { role: Role } or type User { role: [Role] }

  08:49 - In JavaScript
  Not in JS yet
 There is a proposal in stage 1  https://github.com/rbuckton/proposal-enum

 And a babel plugin:  https://www.npmjs.com/package/babel-plugin-const-enum

 Can use case/switch
 Can use Object or Map keys
  Links  Syntax 287: Hasty Treat - Records and Tuples in JavaScript

  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 - Enums in JS (GraphQL and Typescript)

Poslechněte si podcast