![Typed Rocks](/img/default-banner.jpg)
- 24
- 55 393
Typed Rocks
Switzerland
Registrace 8. 06. 2024
Everything fancy one can do in TypeScript can be found here
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
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
Console Ninja?
Its nice but it does not support Bun or Deno and only console logs and not expressions, for loops etc
Quokka?
It does not support Bun or Deno and has many to-pay features which are free here. But of course it‘s awesome
Very cool and promising! I will definitely try it👍
Looking forward to hear what you think about it. :)
this is cool man! I wish there was a better icon for this on the sidebar
Yes I know, doesnt look that nice. Will update it really soon 😁
What if your codebase is millions of lines of code? Is it still going to be faster to run this?
It only runs the code needed from this file. But of course this is mainly for testing stuff.
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!
Man, it's amazing! Definitely will use it!
Thank you 🙏
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?
I would have to check, but I think currently it would be hard to achieve
How fast is it
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
This is cool as hell. Is there a neovim version?
Currently not. But I was thinking of looking into it 😁
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
@@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)
not work tsx, you can try console ninja
@@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.
It is available in webstorm?
@@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
keep up the nice work!
Thank you 😊
jesus, even ai cant generate this
We should be glad. That means it can‘t create such unreadable code :P
@@Typed-Rocks im actually impressed by your abilities in writing types in typescript, good job man
@@mamad-dev thanks man, really appreciate it
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;
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
Right, we would need to check for spaces between numbers. I will update my github later today
this gives me an error: -2+2
I will fix the code on GitHub 🙏
I'm impressed. Next crazy thing is to create a type to validate a whole TypeScript syntax. Let's make a full circle!
That would be next level 😁
I feel like I've just leveled up my TypeScript skills. You're a great teacher. Thanks!
Many thanks. That is really kind of you. Glad you like my presentation style :)
Your content is awesome. Thank you!
Thank you 🙏
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?
Sadly I don‘t know. The only thing I found is a small lib on github called openapi-yup-generator which is quite old
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...
100%, I would not want that in production code
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 🤣
Or maybe they want to keep their sanity 😁
Are you sure this is still TypeScript ? Maybe Prolog or Haskell or Verilog ? ;) I will stay in safe machine code / assembly space.
Maybe we can program a Haskell compiler in types? 🥹
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
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
it is hard for me to wrap my head around the decision, when to return a boolean or the type itself/never
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 🙏
@@Typed-Rocks but both never to false leads to expressions starting with "((" to be invalid
@@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
"Hope you learned something useful today". Not sure about the useful bit, but otherwise I did learn something 🤣
You need help xD But awesome job :)
All is lost at this point :D. But glad you liked it.
Yes... like Big Mike said "Just stop it. Get some help."
how did you check what is the result of type? it's amazing!
You mean the //^? Its a plugin for IntelliJ called „WiTT“ I‘ve created. You can download it from The Jetbrains Marketplace for free.
It's so difficult, but so powerful, great!
finally, someone did a good programming video that is not useless or clickbait. Awesome work 🎉
Thank you. I try my best to fulfill whats on the thumbnail 😁
Are we already entering an era in which we will take longer to write types than final code?
It‘s happening as we speak 🤘
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...
The possibilities are endless 😁
That was nuts! Extremely unusable, but extremely enjoyable! Let's follow it by something real life usable!:)
I will. Thanks 🙏
my head 🤯
So was mine 😁
This is actually peak, great job dude!
Thank you, appreciate it 😁
Love your content, practical and straightforward to the point, keep up the good work 👏
Thank you. Really kind of you 🙏
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
I don‘t have one currently but let me think about making one 🙏
@@Typed-Rocks I'll be waiting for the video man. Thanks
The more I watch your videos the more I realize I don’t even know any typescript
You absolutely know TypeScript, but maybe only use it like normal people ;)
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
It always depends but if you have other languages for the backend, you will be quite restricted
You should be hired my Microsoft to fix typescript 🎉
Thanks man 😁, really appreciate that you like it
Thank you for sharing. It looks very handy, and for the db is there something like this?
I don‘t know, actually, I will look into it 👍
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
Or if they also generate their code from it 😁
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.
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 :)
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;`
Yeah, that is true.
Wow your channel was one of the best CZcams recommendations. Astonishing content.
Thank you very much. Really appreciate that. Keeps me going :)
whats the extension you use that shows the data next to the code in 3:36?
@@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 :)
@@Typed-Rocks A follow-up question - the error displayed at 5:54 - which plugin is doing that for you?
This is super practical ! Man TS is so powerful !!!
@@LePhenixGD Thank you 🙏 appreciate it
Can you show us, how to use openapi to generate rtk query types and endpoints based on swagger? Would be so amazing
I will look into it 👍
TS-Rest is also interesting. It uses Zod to create API contracts and is compatible with frameworks like NestJS, React and VueJS
Absolute! If you can create the API yourself then it would also be a nice choice. I like the language agnostic approach :)