I wish you added that 'satisfies' can be combined with 'as const'. It is obvious, but still nice to mention i think

@Niksorus

5 ай бұрын

It's not that obvious, it was only recently allowed 😂 It should have worked from the start though, clearly.

@Mitsunee_

5 ай бұрын

afaik it basically already does that, other than the part where `as const` also makes stuff readonly, which usually just adds additional confusion

@NikiHerl

5 ай бұрын

What does the combination do?

@nazaka9904

5 ай бұрын

@@NikiHerl there are some situations where you want to infer the type as closely as you can, while ensuring the object you create follows some other type. That is where i use it

You have made such an impact on the TS community, and enriched us all with your courses, articles and KZread content. Thank you so much!! I wish us all a wonderful new TypeScript year 🎉

@bintang9080

5 ай бұрын

clear

typing a word like "satisfies" is satisfying

`satisfies Partial` phenomenally useful

Before "satisfies" you had to make a choice whether you want something to adhere to a type OR be of the more specific type. With "satisfies" you get both.

@QwDragon

5 ай бұрын

You could've done both, but in a very odd manner.

Happy new year, Matt. Thanks a lot for your work, and I have to say that satifies still eludes me, but this video provided a nice use case.

Fantastic content once more, thanks Matt! I appreciate the single-topic video format as well. I'm also looking forward to the book release, especially since the premium TT courses are a bit too expensive for me to purchase at the moment.

Happy new year matt! the typescript 🐐

Thank you for this clear explanation. Please continue making such videos focusing on a specific topic only.

You're a champ, Matt. Thanks!

I've been waiting for more satisfies videos!!

This video has been very satisfying, thanks Matt

Great explanation Matt! Thanks. Will try to narrow my types further where possible to get more autocompletion.

I’m trying to step up my TS game and your videos are really helping me!

I started using satisfies more because of its “const” value as well. This is such a good tip. Awesome video as always!

All the best for 2024 Matt, hope you keep making awesome content for all the wizards!

Oh wow, great stuff! Nice explanation and use case!

Brilliant explanation, thanks!

Happy holidays Matt

The best explanation regarding satisties I have encountered so far!

I would have loved you to show off satisfies's power a little more at the end by showing one of those massive config objects! It can get really useful when combined with discriminated unions for different types of config options as well

Thanks for this explanation! In essence, this is like writing: const name: extends string = "sam"; Which is something I've always wanted to be able to do.

i needed this, thank u brother

Love your work!

You don't know how much you helped me with this. I didn't know about this `satisfies` keyword and I had to write duplicate code to get object constraint with autocompletion as typing out `Record` on variable I always loose keys autocompletion.

Seems like ages since you last popped up in my feed and said "what's up wizards".... welcome back. :)

This video satisfies any TypeScript developer. Thumbs up for you Matt.

I found it useful sometimes when asserting string literals, say I have something like `type State = 'Idle' | 'Succes' | 'Error'`, then in another place in the code I might have `'Idle' satisfies State`, which will assure the type error is caught if I ever change the string literal There are better ways to handle this typically but in some situations it can be pretty useful

Being unfamiliar with being able to satisfy seems to be a common issue with programmers.

@dog4ik

5 ай бұрын

primeagen have 4 kinds lol

hi Matt, totally love ur content! im curious how did you had those `// ^? (property) ...`?

thank you!

Nice one!

Can you describe how satisfies is different from "as const" which also seems to narrow the type. Thanks and happy new year :)

@mattpocockuk

5 ай бұрын

as const makes a value deeply readonly satisfies checks that a value satisfies a type

@WaltersWatching

5 ай бұрын

And sometimes it's nice to use both at once.

@snake1625b

5 ай бұрын

So if you know that your objects field are never going to be mutated then use as const. If you're adding new fields then use colon. If your mutating existing fields then use satisfies?

excelent video

really good topic

Recently I discovered using satisfies with generic types also seems to narrow the type parameters if they would otherwise be inferred as any.

You’re great 👍

instead of the variable annotation in the first example, it is possible to also just use `as` - although this can cause other issues

The satisfies keyword was one of the things i was missing the most in typescript

Would be cool to see TS tricks for each framework like SvelteKit

It would be great if they had some way of type propagation. Take a look on an issue 54976, please.

Looking forward to that book Matt. Do you plan on pushing out physical copies or will it just be digital?

@mattpocockuk

5 ай бұрын

Physical! Signing with a publisher.

@adi96adi

5 ай бұрын

@@mattpocockuk hell yeah that's what I wanted to hear

satisfies any

The title is true. Solidstart used it for its new RouteDefinition and I replaced it with :Routedefinition because I didn't understand it.

Another thing about satisfies is that using it with well defined interfaces means you don't accidentally widen the type but also get type safety and errors at the correct place. If your config object is passed to a function that expects a Config type but the object does not satisfy Config type, it'll error at the call site, how've you really want it to tell you at the declaration site

I wish this wasn't a totally different syntax from variable annotation, this is going to confuse the hell of out people not used to typescript

Thanks

Never heard about this. Cool🤔

It's like type validation for variable declaration.

Good to know, actually. I feel like it should be used as a niche kind of thing more than regularly though. Inferred typing if you can!

One of the big issues I keep encountering with set value objects is if I want to declare a shape on an object or array, I can't also use as const. It loses those exact values. But using as const without setting the shape, it doesn't error if not all values of an enum are used. I wonder if satisfies could help here in some way

@mattpocockuk

5 ай бұрын

Absolutely! {} as const satisfies MyType is what you need.

@QwDragon

5 ай бұрын

You have some enum and want an array to have a single element per each enum value? Take a look at srtackoverflow questions 59032886 and 58437445.

Hmm ok. So it's almost like a slightly less strict `as const`. It lets you keep your type strictness (or not leaving it up to inferred), while still having devtool capabilities.

This is very useful, 🎉🎉 What maybe the difference from as MyType ?

@mattpocockuk

5 ай бұрын

as MyType acts like ':', but also allows for illegal stuff. It's a way of lying to TS.

How `as const` plays into this? When to use one over the other or both at the same time?

@anj000

5 ай бұрын

Right now I'm using `as const` for my config and I have something like this: ``` const MY_NAMES = { A: 'a', B: 'b' } as const; type MyNames = ValueOf; const MY_CONFIG: Record = { [MY_NAMES.A]: { id: 'a', name: 'a' }, [MY_NAMES.B]: { id: 'b', name: 'b' }, } as const; ``` Does it makes sense to use satisfy in that scenario? Is it providing any benefit?

Is the "^?" comment to display the variable type an extension you're using?

Seems like you could use `satisfies T as T` to get the originally desired behavior too.

The way I read this now, this is similar to as const, but with as const you are narrowing the entire thing as a value while this will narrow the types for you only ? I saw also another comment that satisfies can be mixed with as const, what are actual use cases were combining both is desired?

So with satisfies you just say the object has to satisfy the type declaration, like a template?

I think i didnt get the difference between omitting the satisfied keyword on your second example vs specifying it? You have intelisense on both options and type-safety - right?

@acrosstundras

5 ай бұрын

Without "satisfies" it would be "{ wide: string; narrow: number }. Satisfies lets you make both of them "string | number".

@mattpocockuk

5 ай бұрын

The difference is that without satisfies, there's no type checking on the value itself. So I could add a boolean there without it erroring.

@jasinrefiku2914

5 ай бұрын

The difference is that when you insert keys/values, the keys/values can be only of that `satisfy` type you've inserted, meanwhile, if you omit the satisfies keyword, you can have any type as keys/values. Edit: Hadn't refreshed the video, OP has responded.

1:20 What is that extension that "translate" errors?

@shayanzamani9907

3 ай бұрын

I guess it's "ts-error-translator", which is developed by Matt!

If the type is known before hand, why would I use satisfies instead of something like this : { [key: "wide" | "narrow"]: string | number }

@mattpocockuk

5 ай бұрын

Note that in your version, both 'wide' and 'narrow' would be string | number. And you'd have a duplication between your types and your runtime (of wide and narrow). satisfies is really useful when you have MASSIVE config objects you need to make sure are the correct shape.

I feel like I can remember what satisfies does or I can remember what as const does, but I can't retain both at the same time. I have a terrible memory, but I think another part of the problem is these keyword names seem arbitrary relative to their behavior. They may as well be a magic number.

@snake1625b

5 ай бұрын

Satisfies allow you to mutate fields, const you can't mutate

I am "satisfied" with your explanation 😀🔫

Hi, yes it works, but if we take type from object as typeof config, where we will have ab boolean, it can get an error: `Type boolean is not assignable to type false` (you can try to use it)

@mattpocockuk

5 ай бұрын

Could you elaborate?

@rusicsemenov

5 ай бұрын

@@mattpocockuk ```javascript const initialState = { isBoolean: false, someText: 'text', } satisfies Record; type TInitialState = typeof initialState; const state: TInitialState = initialState; state.isBoolean = true; state.someText = 'other text'; ```

@rusicsemenov

5 ай бұрын

In my case something like than, but in the react, where we can use useReducer and later can't update state because boolean can't be as fasle

So much of TS seems to be about wanting autocomplete options. It just seems very... backwards...

hey matt, how do you get the type to show up in the comment?

@chrisfrancisbass8991

5 ай бұрын

Try the Twoslash extension for your IDE. I just installed Twoslash Query Comments for VS Code and it looks great.

@adiadiadi

5 ай бұрын

thanks

interesting, might be useful

I don’t use JavaScript and I’m the most satisfied 😅

Can you point out the difference when using as const?

@mattpocockuk

5 ай бұрын

as const makes a value deeply readonly. satisfies ensures that a value matches a given type.

@riessnico

5 ай бұрын

@@mattpocockuk Thanks! Huge fan of your work

Your channel need some playlists to sort your content based on topics I need to learn more about ts, but don't know what are you talking about in your videos from the title

Yeah I still don't get it 😕

Of course I don't understand 'satisfies', it's literally the first time I see it, and only because of youtube recommendations.

as the name suggests

If this is the only use case, it seems pretty niche to the point of uselessness

@jasinrefiku2914

5 ай бұрын

Depends, if you've got a configuration as the uploader mentioned, and other developers will add stuff into it (you're not the only one, or even if you're the only one, you wanna limit yourself), you would want to limit stuff into being only of specific types.

@danko95bgd

5 ай бұрын

thats basically whole typescript, majority is useless

I'm a bit confused though. What is the difference between const config: {wide: string, narrow: number} = {wide: "100px", narrow: 0} and your example using satisfies?

@Voidstroyer

5 ай бұрын

For example, you mentioned that satisfies is good for keeping the type annotations narrow, while variable annotation is for keeping it wide, however, that would only apply for objects where the keys are not known beforehand if I understand it correctly. Your example with satisfies seems to already have predetermined keys so why would I use satisfies over my own example, or are they the same in this case?

@mattpocockuk

5 ай бұрын

If you have a large config object that you want to make sure is constrained to be a certain type, satisfies is great!

@Voidstroyer

5 ай бұрын

@@mattpocockuk I guess I need to dig in deeper. Satisfies might be better when you are working with an object of which the keys are not known yet and so in that case it might work if you use something like Record. But if you already know the keys and what types they accept, what would the difference be between?: 1. const config: { a: string, b: string | number } = {a: "example", b: 1} 2. const config = { a: "example", b: 1 } satisfies Record

@mattpocockuk

5 ай бұрын

@@Voidstroyer Good question! The difference is one of ergonomics. In your example, every time you add a new key you need to update it in two places - the type and the value. With satisfies, you just update the value and you're good to go.

@Voidstroyer

5 ай бұрын

@@mattpocockuk Oh I see. That's a good point.

How do the “^?” comments work? Is that some sort of vscode extension? I have been looking for it for ages but couldn’t find it. Apart from that, nice video!

@chrisfrancisbass8991

5 ай бұрын

Twoslash Query Comments extension for VS Code

Thanks for explaining! I’m still confused about the meaning of widening and narrowing though..

... I don't even use typescript; why is this getting recommended to me, alongside _python_ of all languages??

@mattpocockuk

5 ай бұрын

Probably because you're engaging with it?

I still don’t really see the point of this. You can get inlay hints on members by not explicitly stating the type as record, too, and I suggest you often do intentionally let typescript determine the type for you.

i feel like languages that have guides for syntax and it is an actual problem should not exist. Programming should be programming, not spelling, syntax, punctuation or codestyle

Every day I feel more and more that TypeScript is a big workaround and messy language

weird , typescript became over-engineer javascript linter

First

Yes, because we have a life.

Longer is better. Not a fan of these st all tbh

TypeScript seems bloated. I use like 10% of what I learned about it in your course. We use Angular for our project.

@specy_

5 ай бұрын

It isn't bloated, it's really expressive and I use 100% of it, if you think about it, the language itself doesn't add even too much on top of js, but it allows you to express things that no other language can

@lohar5055

5 ай бұрын

Skill issue.

@ra2enjoyer708

5 ай бұрын

This can be said for any programming language.

@SkyyySi

5 ай бұрын

A programming language containing features you don't use? Wow, it's almost as if the world doesn't center around you and programming languages are made for many different people.

@anhdunghisinh

5 ай бұрын

Your statement only true with application project. For libraries and utils in which needs lots of generics and advance typed stuff, all those features you deemed unnecessary are very very needed.

Fuq typescript!!