Typed Rocks
Typed Rocks
  • 24
  • 55 393
This NEW VSCode Extension Every TypeScript Developer Needs To Try - Full Node, Deno and Bun Support
Extension: marketplace.visualstudio.com/items?itemName=chwoerz.ts-worksheet
Sometimes we want to quickly try something in JavaScript or TypeScript but we always need to use cli tools like ts-node or node to run our code. That's why I've created this new extension for vscode which enables you to run code from every major runtime like nodejs, bun and deno inside your editor and getting the results in realtime beside the code you've written.
0:00 Introduction
0:27 Installation
0:56 How to use it
4:55 copy-paste
5:15 import other code
5:43 import node_modules
6:00 Promises / async await
7:05 Show execution order
7:25 Timetravel
7:50 Getting ongoing results
8:55 Bun and Deno Support
10:09 Outro
zhlédnutí: 3 675

Video

The Craziest TypeScript Types Video You Will Ever See - The Pinnacle of Advanced Type Wizardry!
zhlédnutí 2,3KPřed dnem
More videos like this: czcams.com/play/PLMVa1aNuMvMcL81jW1lImg11w-UQOXp1N.html Code: github.com/typed-rocks/typescript/blob/main/calculator.ts In this video we will go beyond and above everything else we already did using TypeScript types. We will create an arithmetic expression validator, only using types. 0:00 Intro 0:29 Testcases 1:10 Simple types 6:13 Helper functions 12:20 Real types 21:00...
Don‘t Use Readonly in TypeScript! Let‘s Build A Better Advanced One!
zhlédnutí 1,8KPřed 14 dny
The Readonly type in TypeScript is a nice tool to make your object properties readonly. But there are many shortcomings in this builtin type. In this video we will fix many of them and make it much more usable. Mentioned videos: never type: czcams.com/video/TBxln_ERlSE/video.html infer: czcams.com/video/vjsmv7M1iBE/video.html mapped types: czcams.com/video/iCEJY9XpfG8/video.html 0:00 Intro 0:07...
OpenAPI + Zod: Generate The Ultimate TypeScript API Clients Automatically
zhlédnutí 2,5KPřed 21 dnem
By using the OpenApi spec we can really easy specify our API in a language agnostic way. But not only that. By leveraging openapi-generators like the openapi-zod-client we can easily create complete client or server implementations from our specification. In this video we will discover how we can generate a completely typesafe http client in typescript using this powerful generator. github.com/...
TypeScript 5.6: The Top 10 Features
zhlédnutí 2KPřed měsícem
TypeScript 5.6 was just released and is now feature-stable. So let's discover all the new awesome features together. If you want to use it, just use "npm install typescript@beta". Blogpost from the TypeScript team. Awesome work, as always: devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta 0:00 Intro 0:10 Disallowed Nullish or Truthy Checks 2:18: Iterator Helper Methods 6:10 Stric...
Master Every TSConfig With This Command: Reveal The Complete TypeScript Configuration with Ease
zhlédnutí 764Před měsícem
tsconfig-inspect on npm: www.npmjs.com/package/tsconfig-inspect We can use the "showConfig" command of tsc to show the "final" tsconfig which gets created using our provided properties. But this command does not really show the complete configuration which TypeScript will create. It misses some computed properties and even default ones. So I've decided to dig into the TypeScript codebase and cr...
Fix the Fetch Type: Let's Add Auto-Completion and Perfect Type Safety to It in TypeScript
zhlédnutí 4,4KPřed měsícem
Code: github.com/typed-rocks/typescript/blob/main/fetch.ts Never type: czcams.com/video/TBxln_ERlSE/video.html The typings of the fetch function are intentionally kept relatively unrestrictive. But many times we want some more restrictive typings when we use that function and also want some proper generic support. So in this video we will enhance the existing typings with auto-completion for ht...
Fix All Issues of Primitive Types: Achieve Perfect Type-Safety with Branded Types in TypeScript
zhlédnutí 4,8KPřed měsícem
When we use primitive types in TypeScript like numbers or strings, there is no way of defining that, for example, a function needs the string parameter to be in a certain shape like an email. By using branded types we can make this possible by adding more type information to the primitives making them much more type safe, declarative and more readable. Code: github.com/typed-rocks/typescript/bl...
Let‘s Fix Unmaintainable Types: Automatically Transform Legacy Types in TypeScript with Ease
zhlédnutí 12KPřed měsícem
Github: github.com/typed-rocks/typescript/blob/main/deepreplace.ts When we work with legacy systems and APIs we often also have to work with legacy typings. We often then create types ourselves and map the legacy types manually. But that means a large effort to keep them in sync. So stop doing that manually and let TypeScript do the heavy lifting by creating our own utility type. Mapped Types: ...
The Never Type Explained: Everything You Need To Know - Advanced TypeScript
zhlédnutí 1,2KPřed měsícem
The Never Type Explained: Everything You Need To Know - Advanced TypeScript
Mapped Types Explained: Keep Your Types in Sync Automatically - Advanced TypeScript
zhlédnutí 7KPřed měsícem
Mapped Types Explained: Keep Your Types in Sync Automatically - Advanced TypeScript
Exploring the Power of Template Literals: An Overlooked Feature - Advanced TypeScript
zhlédnutí 2KPřed 2 měsíci
Exploring the Power of Template Literals: An Overlooked Feature - Advanced TypeScript
From Snakes 🐍 To Camels 🐫 - Create the CamelCase Type in TypeScript
zhlédnutí 696Před 2 měsíci
From Snakes 🐍 To Camels 🐫 - Create the CamelCase Type in TypeScript
The Tuple Utility Type - Complex Tuples in TypeScript made EASY
zhlédnutí 467Před 2 měsíci
The Tuple Utility Type - Complex Tuples in TypeScript made EASY
MASTERING Type Manipulation in TypeScript Using RECURSION - Advanced TypeScript made EASY
zhlédnutí 644Před 2 měsíci
MASTERING Type Manipulation in TypeScript Using RECURSION - Advanced TypeScript made EASY
EXTRACT types using RECURSIVE TYPES - Advanced TypeScript made EASY
zhlédnutí 467Před 2 měsíci
EXTRACT types using RECURSIVE TYPES - Advanced TypeScript made EASY
Let's INFER some types - Advanced TypeScript made EASY
zhlédnutí 512Před 2 měsíci
Let's INFER some types - Advanced TypeScript made EASY
This SATISFIES the COMPILE and RUNTIME - Advanced Typescript made EASY
zhlédnutí 574Před 2 měsíci
This SATISFIES the COMPILE and RUNTIME - Advanced Typescript made EASY

Komentáře

  • @sarmadajmal3602
    @sarmadajmal3602 Před 2 dny

    Console Ninja?

    • @Typed-Rocks
      @Typed-Rocks Před 2 dny

      Its nice but it does not support Bun or Deno and only console logs and not expressions, for loops etc

  • @ibnkhaleedone
    @ibnkhaleedone Před 4 dny

    Quokka?

    • @Typed-Rocks
      @Typed-Rocks Před 4 dny

      It does not support Bun or Deno and has many to-pay features which are free here. But of course it‘s awesome

  • @BorisBrodski
    @BorisBrodski Před 5 dny

    Very cool and promising! I will definitely try it👍

    • @Typed-Rocks
      @Typed-Rocks Před 4 dny

      Looking forward to hear what you think about it. :)

  • @geekthegeek730
    @geekthegeek730 Před 5 dny

    this is cool man! I wish there was a better icon for this on the sidebar

    • @Typed-Rocks
      @Typed-Rocks Před 4 dny

      Yes I know, doesnt look that nice. Will update it really soon 😁

  • @RealNaisuCinema
    @RealNaisuCinema Před 5 dny

    What if your codebase is millions of lines of code? Is it still going to be faster to run this?

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      It only runs the code needed from this file. But of course this is mainly for testing stuff.

  • @shashydass4114
    @shashydass4114 Před 5 dny

    Looks incredible! I pay for Quokk abut will definitely be giving this a try. OK so I tried it now and it is incredible! The 'show order' feature is so useful. And top level async await?! Magic! I also write Clojure code and one thing that CLojure has is a fantastic REPL. This extension really closes the gap and makes programming in Typescript very much more enjoyable. Thank you!

  • @MrJettann
    @MrJettann Před 5 dny

    Man, it's amazing! Definitely will use it!

  • @sonik121
    @sonik121 Před 5 dny

    This is really cool. Any chance of it somehow helping with react component development to see what renders/fetches/data are triggering in which order?

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      I would have to check, but I think currently it would be hard to achieve

  • @TheSysmat
    @TheSysmat Před 5 dny

    How fast is it

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      It should be almost instant. As soon as you save or run it. It‘s as fast as If you run node from the commandline

  • @bryson2662
    @bryson2662 Před 5 dny

    This is cool as hell. Is there a neovim version?

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      Currently not. But I was thinking of looking into it 😁

  • @irishbruse
    @irishbruse Před 5 dny

    Does this work with tsx, Quokka does the same thing as this extension and works with tsx(react not the cli lol) but I find quokka bloated so would love to replace it with this

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      @@irishbruse I would have to check. I‘m not really sure. But you can give it a try 👍. If not just message me and I will try to support it. Quokka is nice but many features are Pro which cost money. That was the main incentive why Ive created that. (Imports of code, runtime support etc)

    • @jimmy.im-kp
      @jimmy.im-kp Před 5 dny

      not work tsx, you can try console ninja

    • @irishbruse
      @irishbruse Před 4 dny

      ​@@Typed-Rocks good to know would love to see tsx added would be handy to debug react utility functions, its the only reason I use quokka.

  • @praktycznewskazowki6733

    It is available in webstorm?

    • @Typed-Rocks
      @Typed-Rocks Před 5 dny

      @@praktycznewskazowki6733 there is a version available but its not that intuitive to setup. But I will see what I can do in the next days. You can download it and try it out. Its also called Typescript Worksheet there

  • @wertig6925
    @wertig6925 Před 5 dny

    keep up the nice work!

  • @mamad-dev
    @mamad-dev Před 8 dny

    jesus, even ai cant generate this

    • @Typed-Rocks
      @Typed-Rocks Před 8 dny

      We should be glad. That means it can‘t create such unreadable code :P

    • @mamad-dev
      @mamad-dev Před 8 dny

      @@Typed-Rocks im actually impressed by your abilities in writing types in typescript, good job man

    • @Typed-Rocks
      @Typed-Rocks Před 8 dny

      @@mamad-dev thanks man, really appreciate it

  • @juanferrer5885
    @juanferrer5885 Před 10 dny

    type snakeCase< T extends string, Acumulator extends string = "" > = T extends `${infer First}${infer Rest}` ? First extends Capitalize<First> ? snakeCase<Rest, `${Acumulator}_${Lowercase<First>}`> : snakeCase<Rest, `${Acumulator}${First}`> : Acumulator; type camelCase<T extends string> = T extends `${infer Before}_${infer After}` ? camelCase<`${Before}${Capitalize<After>}`> : T;

  • @notkamui9749
    @notkamui9749 Před 10 dny

    This won't accept unary prefix operators (such as -, as in -1), which is fine. However, what's not fine is that it will also accept such expression: 3 3 + 2

    • @Typed-Rocks
      @Typed-Rocks Před 10 dny

      Right, we would need to check for spaces between numbers. I will update my github later today

  • @weeb3277
    @weeb3277 Před 11 dny

    this gives me an error: -2+2

    • @Typed-Rocks
      @Typed-Rocks Před 10 dny

      I will fix the code on GitHub 🙏

  • @a.i.8480
    @a.i.8480 Před 11 dny

    I'm impressed. Next crazy thing is to create a type to validate a whole TypeScript syntax. Let's make a full circle!

  • @balaclava351
    @balaclava351 Před 11 dny

    I feel like I've just leveled up my TypeScript skills. You're a great teacher. Thanks!

    • @Typed-Rocks
      @Typed-Rocks Před 11 dny

      Many thanks. That is really kind of you. Glad you like my presentation style :)

  • @juanferrer5885
    @juanferrer5885 Před 12 dny

    Your content is awesome. Thank you!

  • @Noam-Bahar
    @Noam-Bahar Před 12 dny

    Looks incredible!!! Currently I'm working on a project that already has Yup implemented. I don't need to install another validation library. Are there an openapi generators for other validation libraries, specifically Yup?

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      Sadly I don‘t know. The only thing I found is a small lib on github called openapi-yup-generator which is quite old

  • @AK-vx4dy
    @AK-vx4dy Před 12 dny

    I see one problem.... if i'm not wrong, error message will be as "clear" just like C++ template errors...maybe not as bad but still...

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      100%, I would not want that in production code

  • @AK-vx4dy
    @AK-vx4dy Před 12 dny

    Seeing all this magic i really don't understand this moaning of libraries authors that they have a problem with TypeScript and types... clearly just skill issue 🤣

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      Or maybe they want to keep their sanity 😁

  • @AK-vx4dy
    @AK-vx4dy Před 12 dny

    Are you sure this is still TypeScript ? Maybe Prolog or Haskell or Verilog ? ;) I will stay in safe machine code / assembly space.

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      Maybe we can program a Haskell compiler in types? 🥹

  • @Typed-Rocks
    @Typed-Rocks Před 12 dny

    Just found an issue with the code. We need to use „false“ instead of „never“ in the „CorrectStart“ type because never extends all types. Thanks for pointing that out. Also we need to add the "(" in the AllowedStarts. Checkout my github repository for the newest code and feel free to send a pull request when you find other errors: github.com/typed-rocks/typescript/blob/main/calculator.ts The

  • @tngerik14
    @tngerik14 Před 12 dny

    Mindblowing stuff again :) I noticed an issue: although operators weren't set as allowed starts (although minus should be as a sign of a number) the expression '/5+3' is valid but it clewarly shouldn't be the case. My solution was this: type CorrectStart<T extends string> = T extends ... ? First<Remaining> ... ? true : never : false // was 'never' before The last word was the only change. I don't know why this works but it does

    • @tngerik14
      @tngerik14 Před 12 dny

      it is hard for me to wrap my head around the decision, when to return a boolean or the type itself/never

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      You are right. We should not use „never“ because it extends everything. Just both never in CorrectStart with false. Thank you for pointing that out 🙏

    • @tngerik14
      @tngerik14 Před 12 dny

      @@Typed-Rocks but both never to false leads to expressions starting with "((" to be invalid

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      @@tngerik14 Yes, absolutely, I've updated the code on github. We need to also allow a "(" at the values of AllowedStarts: github.com/typed-rocks/typescript/blob/main/calculator.ts

  • @IlkkaHarmanen
    @IlkkaHarmanen Před 12 dny

    "Hope you learned something useful today". Not sure about the useful bit, but otherwise I did learn something 🤣

  • @geeksven
    @geeksven Před 12 dny

    You need help xD But awesome job :)

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      All is lost at this point :D. But glad you liked it.

    • @AK-vx4dy
      @AK-vx4dy Před 12 dny

      Yes... like Big Mike said "Just stop it. Get some help."

  • @snatvb
    @snatvb Před 12 dny

    how did you check what is the result of type? it's amazing!

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      You mean the //^? Its a plugin for IntelliJ called „WiTT“ I‘ve created. You can download it from The Jetbrains Marketplace for free.

  • @praktycznewskazowki6733

    It's so difficult, but so powerful, great!

  • @abdul-hameedmaree881
    @abdul-hameedmaree881 Před 12 dny

    finally, someone did a good programming video that is not useless or clickbait. Awesome work 🎉

    • @Typed-Rocks
      @Typed-Rocks Před 12 dny

      Thank you. I try my best to fulfill whats on the thumbnail 😁

  • @RutsuKun
    @RutsuKun Před 12 dny

    Are we already entering an era in which we will take longer to write types than final code?

  • @mightyhelper8336
    @mightyhelper8336 Před 13 dny

    You basically have a mini compiler frontend. Now you gotta make it actually compute... Or make a piece of code that generates this based on a generic language grammar. This way, if you manage to get the typescript syntax working, you can run typescript from a string, at compile time... Thinking about this a bit more, if you add some sort of interface to that ts interpreter, you could produce some actual types at compile time as output of your inline ts code. But wait, what if you run this ts compile inside of itself...

    • @Typed-Rocks
      @Typed-Rocks Před 13 dny

      The possibilities are endless 😁

  • @MrJettann
    @MrJettann Před 13 dny

    That was nuts! Extremely unusable, but extremely enjoyable! Let's follow it by something real life usable!:)

  • @muchis
    @muchis Před 13 dny

    my head 🤯

  • @TianYuanEX
    @TianYuanEX Před 13 dny

    This is actually peak, great job dude!

  • @IbrahimAbdallah-tr4wq

    Love your content, practical and straightforward to the point, keep up the good work 👏

    • @Typed-Rocks
      @Typed-Rocks Před 15 dny

      Thank you. Really kind of you 🙏

  • @jordyperez9969
    @jordyperez9969 Před 16 dny

    Do you have a video that talks about conditional properties, for example that if in a function I send a specific prop that another one is automatically required, and if it was not sent then the other prop is kept as optional or can even be done with more props

    • @Typed-Rocks
      @Typed-Rocks Před 16 dny

      I don‘t have one currently but let me think about making one 🙏

    • @jordyperez9969
      @jordyperez9969 Před 16 dny

      @@Typed-Rocks I'll be waiting for the video man. Thanks

  • @blackbeardDevs
    @blackbeardDevs Před 16 dny

    The more I watch your videos the more I realize I don’t even know any typescript

    • @Typed-Rocks
      @Typed-Rocks Před 16 dny

      You absolutely know TypeScript, but maybe only use it like normal people ;)

  • @designerjehovah4453
    @designerjehovah4453 Před 17 dny

    good to know. I wonder though, is this better than using trpc? Excluding the fact that I may be part of a team that is already using OpenAPI, I want to understand when I would use this instead of trpc

    • @Typed-Rocks
      @Typed-Rocks Před 16 dny

      It always depends but if you have other languages for the backend, you will be quite restricted

  • @DarioCooks
    @DarioCooks Před 18 dny

    You should be hired my Microsoft to fix typescript 🎉

    • @Typed-Rocks
      @Typed-Rocks Před 18 dny

      Thanks man 😁, really appreciate that you like it

  • @llhu90ll
    @llhu90ll Před 19 dny

    Thank you for sharing. It looks very handy, and for the db is there something like this?

    • @Typed-Rocks
      @Typed-Rocks Před 18 dny

      I don‘t know, actually, I will look into it 👍

  • @TianYuanEX
    @TianYuanEX Před 19 dny

    I remember looking into this really cool tool some time ago, but this is only useful if the backend devs bother to write a good openapi doc

    • @Typed-Rocks
      @Typed-Rocks Před 19 dny

      Or if they also generate their code from it 😁

  • @deatho0ne587
    @deatho0ne587 Před 20 dny

    Just do `const obj ={a: 1, b: [234, 567], c:{d: {e: 890}}} as const;`, now that does not work with Date types but is 100% easier. Now the video is more about taking away things like setters from existed objects, which is useful.

    • @Typed-Rocks
      @Typed-Rocks Před 19 dny

      Yes, absolutely. When you have to do it once. But I really like the ability to have it more generic. But it as always depends :)

    • @loO5r
      @loO5r Před 18 dny

      Sadly this does not work anymore as soon as you add a type to your variable, e.g. `const obj: FooType = {a: 1, b:[234, 567] } as const;`

    • @deatho0ne587
      @deatho0ne587 Před 18 dny

      Yeah, that is true.

  • @ThiagoVieira91
    @ThiagoVieira91 Před 20 dny

    Wow your channel was one of the best CZcams recommendations. Astonishing content.

    • @Typed-Rocks
      @Typed-Rocks Před 20 dny

      Thank you very much. Really appreciate that. Keeps me going :)

  • @Caldaron
    @Caldaron Před 20 dny

    whats the extension you use that shows the data next to the code in 3:36?

    • @Typed-Rocks
      @Typed-Rocks Před 20 dny

      @@Caldaron It‘s called TypeScript Worksheet and you can download it on Jetbrains Marketplace or VSCode Marketplace. If you need any help setting it up, let me know :)

    • @rikrose
      @rikrose Před 18 dny

      @@Typed-Rocks A follow-up question - the error displayed at 5:54 - which plugin is doing that for you?

  • @LePhenixGD
    @LePhenixGD Před 20 dny

    This is super practical ! Man TS is so powerful !!!

    • @Typed-Rocks
      @Typed-Rocks Před 20 dny

      @@LePhenixGD Thank you 🙏 appreciate it

  • @MrJettann
    @MrJettann Před 24 dny

    Can you show us, how to use openapi to generate rtk query types and endpoints based on swagger? Would be so amazing

  • @cockpitconnect
    @cockpitconnect Před 24 dny

    TS-Rest is also interesting. It uses Zod to create API contracts and is compatible with frameworks like NestJS, React and VueJS

    • @Typed-Rocks
      @Typed-Rocks Před 24 dny

      Absolute! If you can create the API yourself then it would also be a nice choice. I like the language agnostic approach :)