DEV Community: YPChen

Behind `NoInfer` in TypeScript

YPChen — Wed, 26 Jun 2024 16:23:33 +0000

Disclaimer: As of now, I have not found documentation that explicitly supports the type inference mechanism discussed in this article. This is based on my understanding and experience with TypeScript. Readers are encouraged to explore further and refer to the official TypeScript documentation for additional information.

TL;DR

The NoInfer<T> utility type in TypeScript blocks type inference, ensuring types are matched explicitly. It works by using a type parameter T in a way that prevents automatic type inference.

`NoInfer` - the New Utility Type

I recently came across an awesome video and article by Matt introducing the NoInfer utility type and its mechanism.

According to Matt's article and video, a self-implemented version of NoInfer is:

type NoInfer<T> = [T][T extends any ? 0 : never];

I wondered why this works?

Dive in with Examples

I asked my friend Jiar, and he explained that it has to do with TypeScript's type inference mechanism. What NoInfer does is to block the type inference. He gave me this example:

type NoInfer<T> = [T][T extends any ? 0 : never];

function testNoInfer<T extends string>(args: T[], noInferArgs: NoInfer<T>): boolean {
    return args.includes(noInferArgs);
}

testNoInfer(
    ['lets', 'go'],
    /** @ts-expect-error */
    'somewhre'
);

testNoInfer(
    ['people', 'help'],
    'people',
)

Does the Order of the Parameters Matter?

To understand what "blocking" means, let's change the order of the parameters in the testNoInfer function:

function testNoInfer<T extends string>(noInferArgs: NoInfer<T>, args: T[]): boolean {
    return args.includes(noInferArgs);
}

testNoInfer(
    /** @ts-expect-error */
    'somewhre',
    ['lets', 'go'],
);

testNoInfer(
    'people',
    ['people', 'help'],
)

You see, the order doesn't matter-- it still works.

A Flash of Inspiration

What if we leave the noInferArgs argument alone?

function testNoInfer<T extends string>(noInferArgs: NoInfer<T>): boolean {
    return Boolean(noInferArgs);
}

testNoInfer(
    'somewhre'
);

testNoInfer(
    'people'
)

No error! I knew it! The type NoInfer is just the type parameter T itself!

So why does defining the other parameter change everything?

Conclusion

In my opinion, the "block" occurs because TypeScript checks the args with plain T and then references this T in the NoInfer type. Therefore, when another parameter is defined with plain T, TypeScript insists that T should match what args received.

Using Valibot for Recursive Schema Validation

YPChen — Sun, 12 May 2024 09:16:29 +0000

Valibot's playground for the code demo

Recursive Type in TypeScript

TypeScript allows defining recursive types. For example, consider the following User interface:

interface User {
 children?: User;
 email: `${string}@${string}`;
 password: string;
}

Using Valibot for Schema Validation

What if you use a schema library, like Zod or Valibot? The schema has been built on value-level, and you cannot assign the variant to its property inside the declaration.

import * as v from 'valibot';

const EmailSchema = v.string([v.minLength(1), v.email()]);
const PasswordSchema = v.string([v.minLength(1), v.minLength(8)]);
// const UserSchema?

Recursive Schema

Base on the Author's reply in this issue, you can use v.lazy(() => UserSchema) and to create a type of the UserSchema as a type param to the v.BaseSchema genre as a type inference of the UserSchema:

type UserSchemaType = {
 children?: UserSchemaType;
 email: v.Input<typeof EmailSchema>;
 password: v.Input<typeof PasswordSchema>;
}

const UserSchema: v.BaseSchema<UserSchemaType> = v.object({
 children: v.optional(v.lazy(() => UserSchema)),
 email: EmailSchema,
 password: PasswordSchema,
});

Deploy a Golang serverless function for a demo form with htmx

YPChen — Sat, 30 Mar 2024 13:24:39 +0000

The boilplate I begin with is the production of the tutorial by BugBytes on Youtube in the video: Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments. It’s really good and straightforward.

And I made these changes and will talk about them in this article:

Instead of Booststrap, I used Tailwind CSS as the CSS library.
I deployed the project on Zeabur, which is a personal preference (mainly because it’s free for the demo 😅). However, feel free to choose any similar service that suits your needs.
I use go-chi for handling routes and to server static file(stylesheet).
I utilized the Go embed directive for the serverless plan on Zeabur.
Additionally, I explored htmx a bit more for reset inputs and animation."

The demo page: https://yp-go-htmx-simpleform.zeabur.app/

The repo: https://github.com/AlliesChen/go-htmx-simpleform/tree/main

DISCLAIMER: I’m not a GoLang expert, and I’m not yet a backend developer. However, I have experience in front-end development. Any suggestions to improve the structure of the demo or to correct any misunderstandings in this article would be greatly appreciated. 🙏

Go:embed for using files in serverless functions

To learn more about serverless functions, you can watch this video.

Serverless function cannot access the local file system of the server. Therefore, packing static files such as templates and stylesheets is necessary to serve them as part of the response.

As Zeabur is a platform that offers free hosting for serverless functions, the remaining challange will be how to include external files, such as templates or stylesheets, in the code package.

With go:embed, a feature that enables embedding files into Go binaries, things couldn't be more easier.

Here is my file structure:

/static
 |— output.css
/templates
 |— index.html
main.go

Add the comments:
(PLEASE MAKE SURE NO SPACE BETWEEN THE TWO SLASH AND go:embed or it won't work)

var (
    //go:embed templates
    templates embed.FS
    //go:embed static
    static embed.FS
    pages  = map[string]string{
        "/":          "templates/index.html",
        "/add-film/": "templates/index.html",
    }
)

In the handlers, rather than using template.ParseFiles, we focus on the folders using template.ParseFS with the page which is the path to the file includes the folder name.

// GET /
getPage := func(w http.ResponseWriter, r *http.Request) {
    page, ok := pages[r.RequestURI]
    // ...
    tmpl, err := template.ParseFS(templates, page)
    // ...
    if err := tmpl.Execute(w, films); err != nil {
        // ...
        return
    }
}
// POST /add-film
addFilm := func(w http.ResponseWriter, r *http.Request) {
    page, ok := pages[r.RequestURI]
    // ...
    tmpl, err := template.ParseFS(templates, page)
    // ...
    if err := tmpl.ExecuteTemplate(w, "film-list-element", Film{
        Title:    title,
        Director: director,
    }); err != nil {
        // ...
        return
    }
}

That's it. Execute go run main.go and visit http://localhost:8000/ with your browser. There should be nothing different from BugBytes' production.

Include stylesheet built by Tailwind CSS

Similar to what we did for the HTML file in the templates directory, the serverless plan also requires embedding the stylesheet within the static folder, as previously accomplished.

In contrast to the earlier step, there is no need to parse the stylesheet. Instead, serve it directly when the website requests the /static path:

fileServer := http.FileServer(http.FS(static))
router.Handle("/static/*", fileServer)

This ensures that the stylesheet is readily available for use by the website without additional processing." 😊

Another post that talks about lodash/fp (with Vue)

YPChen — Sat, 15 Jul 2023 09:48:53 +0000

In my previous post, "My First Look at Functional Programming," I mentioned my intention to try using fp-ts. While I'm still learning about functional programming, I believe it can be advantageous for software development. To demonstrate the advantages of functional programming, I created a todolist-vue web app using Vue and Tailwind Elements as an example. In this post, I will be using lodash/fp to modify the implementation of the functions in the example, which I hope will offer some insights into the benefits of this coding style and whether it's worth adopting.

For reference, the imperative version of the same app from the previous post.

TL;DR

By utilizing the utility functions from lodash/fp, we can harness the advantages of functional programming. Two functions that I find particularly beneficial for my project are:

cond-- an expression-based version of if-else statements
flow-- an function to call its parameters in order

Parts that are not as pleasant:

You need to become familiar with the functions, although the function names do provide information about their uses. Sometimes, the explanations of the functions in the official documentation of lodash are not very good. Fortunately, since it's a commonly used library, you can find tons of tutorials on the internet, such as this one.

Lodash and lodash/fp

So, as mentioned in the Lodash documentation, it's a library for JavaScript that provides various utility functions. There is a helpful introduction titled Things to keep in mind when using Lodash that you might want to take a look at. The concerns discussed in the article revolve around the bundle size and the implementation of functions, which may be a pitfall that can make debugging challenging.

lodash/fp is a functional programming version of Lodash, with some differences mentioned in the linked page, we can use it to write codes in functional programming style.

ℹ️ There are libraries which has similar usage:

The Utilities

Although there are many functions, for me, it's cond and flow that make the code look like a functional programming language. Shamefully, I only talk about these two in the article... 😅

It's worth mentioning that the methods from lodash/fp come with auto-currying, a feature commonly seen in functional programming languages such as Elm and PureScript.

add : Int -> Int -> Int
add x y =
    x + y

addFive : Int -> Int
addFive =
    add 5

result : Int
result =
    addFive 3 -- result will be 8

code source: How to partially apply functions in Elm

PureScript

mul :: Number -> Number -> Number
mul a b = a * b

times2 :: Number -> Number
times2 = mul 2
-- It's like const times2 = b => mul(2)(b) in JavaScript

code source: TypeScript vs. PureScript

cond

Within the file path src/components/TwButton.vue, the styleContext is determined using a switch statement. Although it functions properly, it creates two scopes: one for the arrow function provided to the computed function and another for the switch statement. This redundancy is somewhat unnecessary since we only need to return the value provided by the switch statement. (Yes, you cannot just return the switch statement without placing it to a function scope.)

const styleContext = computed(() => {
    switch (props.context) {
        case 'success':
            return 'bg-success'
        case 'danger':
            return 'bg-danger'
        case 'warning':
            return 'bg-warning'
        case 'info':
            return 'bg-info'
        default:
            return 'bg-primary'
    }
})

cond is an expression-based version of an if statement. It accepts an array consisting of arrays that represent the match patterns and their corresponding actions.

ℹ️ In the future, JavaScript might introduce a native pattern matching syntax, as proposed by TC39. This syntax would provide built-in support for match patterns in JavaScript.

const styleMatcher = cond([
    [eq('success'), constant('bg-success')],
    [eq('danger'), constant('bg-danger')],
    [eq('warning'), constant('bg-warning')],
    [eq('info'), constant('bg-info')],
    [stubTrue, constant('bg-primary')]
])
const styleContext = computed(() => styleMatcher(props.context))

flow

Usually, to get an abstraction, we write assignments, function calls like the function resetSelect (path: src/components/TwSelector.vue):

const resetSelect = () =>
  selectRef.value
    ?.querySelector("span[data-te-select-clear-btn-ref]")
    ?.dispatchEvent(new Event("click"));

const resetSelect = flow(
  constant(selectRef),
  get("value"),
  invokeArgs("querySelector", ["span[data-te-select-clear-btn-ref]"]),
  invokeArgs("dispatchEvent", [new Event("click")])
);

ℹ️ Unlike the functions from lodash, they does not support chaining, and lose shortcut fusion:

It means combining (fusing) functions that are going to be applied to elements into a single call and calling it on the elements in one go, instead of requiring passes
-- Brilliant But Lazy

ℹ️ This article has an example that implements shortcut fusion.

Conclusion

I no longer take "FP" as a magic word that solves every problem I encounter in OOP. It turns out JavaScript does have some, but not all, the features of a functional programming language. With the help of libraries, we can enjoy benefits such as improved readability and purity of methods. However, under the hood, these libraries use functions that imitate the mechanisms of functional programming languages in JavaScript, which may result in reduced efficiency during runtime.

My First Look at Functional Programming

YPChen — Wed, 05 Apr 2023 10:52:08 +0000

ℹ️ You can skip this one if you have already known what functional programming (FP) is. I won't do any coding in this article, but only refer to explanations of what FP is from what I have discovered.

I've heard arguments that functional programming leads to more maintainable, flexible, and reliable code. As a front-end developer who primarily uses JavaScript (JS), I didn't pay much attention to it. I thought functional programming is just a coding style that emphasizes the use of functions instead of classes. And, for me, using functions for almost everything is the norm, and I am not accustomed to using classes...

When I changed my career to become a programmer, those popular JavaScript frameworks like React had introduced Hooks and Vue had introduced the Composition API. I have no problem with those new API, and feel like I knew what's functional programming, but I am not.

TL;DR-- just for now

From my point of view, FP is not an elixir for those confusing logic and messy codes, operations for the elements in a function don't magically disappear/complete.

There is a library called fp-ts that provides a variety of utility functions, allowing JS(TS) programmers to write code in a more functional style, similar to languages like Haskell. However, the functions are named using technical terminology from the FP field, which may not be familiar to everyone.

Functional Programming in JavaScript

About a year ago, I just started to learn JavaScript, I watched Anjana Vakil's Learning Functional Programming with JavaScript on JSUnconf, and I thought that's all I need to know about FP (with JS).

I am currently working on a company project and feeling a bit annoyed at having to write functions imperatively. At the same time, I am reminded of the benefits of functional programming mentioned at the beginning of the article-- Is it okay to Pursue Functional Programming on Frontend? by Minsu and Changhui on JSConf Korea.

In the video, the speakers are using a library called fp-ts, and I was fascinated by it. However, the documentation for that library is not easy for me to understand. There are tons of terms that categorize different aspects of the library, and I'm not familiar with many of them, which makes it challenging to use the library effectively.

I suggest watching the playlist of Functional Programming with TypeScript on YouTube. It should help for understanding FP and have your mind settled for reading the document of fp-ts.

In the document of fp-ts, it does provide a section-- "Learning Resources", which I highly recommend to read both the first article in these two series:

Then I started to realize that most of the module names, like State, Semigroup, Monad in the library, points to some patterns, i.e they are technical terms. The problem is, from where the terms come, and is there a dictionary to refer to? Yes, at least from my PoV it should be:

Fantasy Land Specification

If you have followed through my writings above, thank you. Do you have a feeling that we have not even written any code but put a lot of effort into explaining what functional programming is, and how we can use a library like fp-ts to empower JavaScript and TypeScript to work more like a functional language such as Haskell?

What came to my mind is that while I am excited to learn more about functional programming, I may not be able to introduce it to my current project. Convincing my colleagues to spend time learning the technical terms and concepts involved in functional programming may be challenging, especially when we have project sprints to complete.

lodash/fp

Due to the cost of the knowledges required for using fp-ts, I turn out to bring lodash/fp to my project and see the benefits:

I'm more careful about the flow of my functions
writing less repetitive code that uses the same logic over and over again

Here I hard coded an imperative-todolist-vue, which I will use as an example for implement functions with the methods from lodash/fp in the next article.

Break Vue's reactivity

YPChen — Tue, 28 Feb 2023 15:23:51 +0000

This article won't do a deep dive into the implementation of Vue.js reactivity, I just want to show some examples that will break the reactivity when you are writing with the framework.

Should you be interested in the mechanism of the reactivity under the Vue.js, here are some information I think that would help:

Reactivity in depth | Vue.js

Vue 3 Reactivity | Vue Mastery

Vue JS 3 Reactivity Fundamentals - Composition API by Marius Espejo

TL;DR

Primitive value props cannot be modified from the child component.
For a prop that is an object, modify its attributes from the child component is possible with both mutation and immutation functions, but the data structures may be different.
shallowRef only updates when a referred source has reassigned.

Two Way Binding

Let's start with a simple input element with a reset button, we can see what we have typed down below the input element.

Vue Playground

It works! Not surprising, right? But in reality, we frequently separate elements into child components to make the function of each component clearer. So, let's move the input element and the reset button to Comp.vue. And it seems Vue is arguing about the prop are read-only.

Vue Playground

It's good to see Vue prohibit modifying props "directly", because it usually causes data flow of the states to become a mess.

How about to destructure the props that is an object type in JavaScript? Deeper to the props.modelValue's value property. (I add styles to stand out the elements 😁)

Vue Playground
- By clicking "Reset" button, you trigger the restMsg function in the Comp.vue to clear the value's value to empty string.
- By clicking "Resume to default" button, you trigger the resumeMsg function in the App.vue to reassign an new object to the msg.

Reassign an object to the msg breaks the props's reactivity. As in JavaScript, every object points to a reference of memory, the msg is not pointing to the same ref of the value in the Comp.vue.

Immutation and Mutation

For this part, let's play both mutable and immutable method on two array refs to see how we can break the reactivity.

On List.vue, clicking "Add to ordered list" button will trigger a function to push the value from msg.value into it. However, clicking "Add to unordered list" button should see a warning message popping out.

Vue Playground

As mentioned above, reassign a new array to the ref via the prop breaks the reactivity which is not allowed.

Unlike states which are all immutable in React, the Vue doc mentions that mutation on ref is valid-- Reactivity API: Core #ref | Vue.js.

If you would like the immutation way to update the unorderedlist, you may need to modify its structure, like what we did to msg:

// from
const unorderedlist = ref([]);
// to
const unorderedlist = ref({ value: [] });

You should also make some change on the functions:

function addToUList() {
    unorderedList.value.value = [...unorderedList.value.value, msg.value.value];
    emits('submitMsg');
}
function clearUList() {
    unorderedList.value.value = new Array();
}

Vue Playground

Shallow Ref

The example below use shallowRef instead of ref for the lists. You can see both add to list button don't make changes on the screen. But if you then click the "restore to default" button, the added items show up suddenly.

As the msg is used in the List.vue and the "Resume" button triggered a reassign to the value from the parent-- App.vue, it also have the lists to update.

Vue Playground

Thanks for reading 🙏

DEV Community: YPChen

Behind `NoInfer` in TypeScript

TL;DR

NoInfer - the New Utility Type

Dive in with Examples

Does the Order of the Parameters Matter?

A Flash of Inspiration

Conclusion

Using Valibot for Recursive Schema Validation

Recursive Type in TypeScript

Using Valibot for Schema Validation

Recursive Schema

Deploy a Golang serverless function for a demo form with htmx

Go:embed for using files in serverless functions

Include stylesheet built by Tailwind CSS

Another post that talks about lodash/fp (with Vue)

TL;DR

Parts that are not as pleasant:

Lodash and lodash/fp

The Utilities

cond

flow

Conclusion

My First Look at Functional Programming

TL;DR-- just for now

Functional Programming in JavaScript

lodash/fp

Break Vue's reactivity

TL;DR

Two Way Binding

Immutation and Mutation

Shallow Ref

`NoInfer` - the New Utility Type