Forem: Blake Lamb

TypeScript's "Omit" Utility Type

Blake Lamb — Thu, 19 Jan 2023 19:01:00 +0000

Overview & Setup

This article will demonstrate how to use the Omit utility type in TypeScript. This utility type allows you to take a type and use a subset of its attributes, excluding any specified attributes, as the type for a variable without having to declare a second interface.

The demo I will do is in Angular, but this can be done in any TypeScript file. Create a new component in an Angular Project, or create a new StackBlitz Angular project. I did my work in a StackBlitz project, which can be found here.

In your TypeScript file, create a new interface. This can be done by inserting the code below above the @Component decorator.

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

Once the new interface has been declared, we will create three new class variables. This is where we will implement the Omit utility type. It is done by declaring the type as Omit<T, "attributes" | "go" | "here">, as seen below. These are the two variables I created using my 'Player' interface.

// app.component.ts

  spida: Player = {
    firstName: 'Don',
    lastName: 'Mitch',
    age: 24,
    stats: {
      ppg: 24,
      apg: 4,
      spg: 3,
      rpg: 3,
    },
    country: 'USA',
    college: 'Louisville',
  };

  skyWalker: Omit<Player, 'age'> = {
    firstName: 'Walker',
    lastName: 'Kessler',
    stats: {
      ppg: 8,
      apg: 1,
      spg: 1,
      rpg: 7,
    },
    country: 'USA',
    college: 'Auburn',
  };

I have created one of the variables using all of the attributes of the interface. The other is created by using the Omit utility type and declaring which attributes to exclude. Omit<Player, 'age'>. When each of these variables is created, you should see that both are valid ways of declaring a type for each variable.

It should be noted that this utility type is best used when there are only a few attributes that need to be excluded. It is bad practice for Omit to exclude too many attributes. Excluding a lot of attributes can become confusing to other developers and become more damaging than helpful. In short, it's best to keep it simple.

So now we've demonstrated how to actually use the Omit utility type, so now let's talk about why it is beneficial development in TypeScript.

Why?

One of Typescript's biggest advantages is to create strongly typed variables. This is typically done by using an interface to declare the variable's type. But as always, it's good to find ways to not duplicate code. In this instance, if we didn't use the Omit utility type, we would have to do something like this:

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

export interface PlayerWithoutAge {
  firstName: string;
  lastName: string;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

This accomplishes the same task but does it with more code. It also can make it more difficult down the line to make sure that you're using the correct interface. But it still allows you to keep each variable strongly typed.

Besides keeping your code strongly typed, I think the next most important benefit to using the Omit utility type is to keep IntelliSense. This may seem insignificant to some, but IntelliSense is helpful to minimize mistakes such as spelling errors or remembering what attributes are on a type. I am always looking for ways to use my IntelliSense as life is more difficult when it isn't available. It also keeps me focused on whatever task I am working on rather than having to pause and figure out what the shape of a variable should look like.

Conclusion

TypeScript has so many benefits that can be used to your advantage. The key is knowing what they are and how to leverage them to boost your productivity while developing. Hopefully this article has done just that and will help you to level up your skills and knowledge.

What other benefits could you see to using the Omit utility type? Let me know in the comments below!

RxJs: take(1) vs first()

Blake Lamb — Thu, 12 Jan 2023 09:48:50 +0000

Overview

When using Angular, it is inevitable that you will also commonly be using RxJs. Together these tools can do many amazing things. There is a seemingly infinite amount of different operators that I am constantly learning about. One that I have recently come across is first(). I always have used take(1) in order to access the first item emitted from an observable stream and then complete the observable. Finding out about first() initially seemed like a cool way to clarify my code a little more. But, after more research, I found out that there is enough of a difference that they may not necessarily be used interchangeably.

Bonus: chatGPT gave me an incorrect answer about the difference between the two operators. More on that later as well.

Setup - Create A Sandbox Project

Go to Stackblitz and start a new "RxJs" project. Or you can fork my Stackblitz here to allow you to follow along with my example.

Similarities Between take(1) & first()

take(1) is a great way to pick the first, and only the first, value from an observable stream. It is extremely simple to use as you can see here:

const source$: Observable<any> = from([1, 2, 3]);

source$
  .pipe(
    take(1),
    catchError((error) => {
      console.log({ error });
      return of();
    }),
    tap((value) => console.log({ value }))
  )
  .subscribe();

The console.log will be value: 1, since that is the first item in the array.
(As a side note, if you don't know why it emits 1 instead of the whole array passed into the from(), check out my post about that operator here.)

Similarly, first() can perform the exact same functionality. In my opinion, it also accomplishes the task with more readability than take(1). An example of using first() would look like this:

const source$: Observable<any> = from([1, 2, 3]);

source$
  .pipe(
    first(),
    catchError((error) => {
      console.log({ error });
      return of();
    }),
    tap((value) => console.log({ value }))
  )
  .subscribe();

You'll see in these two examples that they each perform the same task and log the same value, value: 1. Both operators also complete the observable after they have been called, so there is no need to unsubscribe from the observable.

Now we can look at where these operators behave differently and why you might choose one over the other.

Differences Between take(1) & first()

Lets change the source$ variable to now equal from([]). You'll now be able to find the difference between these operators.

If this were to happen while using take(1), you would never know as nothing would be logged, and no error would be caught.

On the contrary, if using first() and there is no value emitted from the observable, there will still be no value logged, but you would see a value for the error within the catchError block.

That is it! That is the difference between the two operators. Kind of anti-climactic right? Well lets find an example of why this difference could be important so you can know which operator to use in the future.

How Do I Choose One?

There will be many situations where you will never notice a difference between the two operators. But if you need to know for sure that there is a value being emitted, then the first() operator could come in handy.

For example, you might be building a login component where you're handling login credentials and, when the user clicks "Submit", pushing them to an observable. If the user clicks "Submit" and the username or password field does not contain values, then you could use the first() operator to throw an error and stop the login attempt.

Or you might be logging the user out of an application and it is not necessary to look for a specific value or any value at all. You know that the action will happen once and then the observable can complete. This would be a great situation for take(1).

Conclusion

There are so many solutions to the same problem, but not all solutions are created equally. So having more tools to use, allows you to be able to find the best solution to a given problem. take(1) and first() both have their place in the world of RxJs. Hopefully, now you are able to better find those places and use them appropriately.

Bonus: ChatGPT

I have been trying to use ChatGPT as a resource in my coding as well as my learning. It has been a great help to me in both aspects. I have found however that it is often wrong when explaining definitions to me. For this post, I asked it what the difference was between the two operators. Here is the answer that I got:

Obviously, this is incorrect, and the real answer was the inverse of what it told me. All of this to say, even though ChatGPT is an awesome tool it is capable of being incorrect. So make sure to fact check with other sources before just taking its word as law.

Intro To The [ngSwitch] Directive

Blake Lamb — Fri, 23 Dec 2022 18:00:00 +0000

Overview

Have you ever come upon a situation where you need to conditionally show more than two different variations of content based on one variable? A situation where *ngIf - else doesn't work without nesting *ngIf's? In this article I'll give an example that will help solve that problem in a much more readable way than nesting *ngIf statements.

Setup - Create A Sandbox App

Go to Stackblitz and start a new "Angular" project. Or you can fork my Stackblitz here to allow you to follow along with my example.

*ngIf - else

Angular has the ability to conditionally show content by using the *ngIf directive. This also has the option to add an "else" to effectively show a default as well. If the statement inside the *ngIf evaluates to false. An example of this might look like:

<p *ngIf="selectedOption; else noneSelected">
  You've chosen too see option {{ selectedOption }}
</p>
<ng-template #noneSelected>
  <p>Please select an option!</p>
</ng-template>

This would show the text "You've chosen to see option {{ selectedOption }}" if selectedOption evaluates to truthy. Otherwise it would display "Please select an option!". This directive is extremely useful, but if there are more than two options to be displayed, it requires an *ngIf to be nested within one another. This method of conditionally showing content can be difficult to keep straight logically and sacrifices readability of the code.

The [ngSwitch] Directive

In a situation where you may want to conditionally show more than two options, using the [ngSwitch] directive works great! This directive will work just like a switch statement in JavaScript, and will allow as many cases as are needed. The syntax is to put [ngSwitch]="switch_expression" on the containing element, then put *ngSwitchCase="match_expression" on each element that is a separate case. Additionally, an element can be the default element by adding *ngSwitchDefault in place of the *ngSwitchCase. An example of this could look like this:

<div [ngSwitch]="selectedOption">
  <p *ngSwitchDefault>This is the default that you're seeing!</p>
  <p *ngSwitchCase="1">You're now seeing Variation 1!</p>
  <p *ngSwitchCase="2">You're now seeing Variation 2!</p>
  <p *ngSwitchCase="3">You're now seeing Variation 3!</p>
  <p *ngSwitchCase="4">You're now seeing Variation 4!</p>
</div>

This allows any number of options to be possibly displayed, while also keeping simplicity and doesn't sacrifice readability.

Conclusion

Solutions that increase readability and simplicity are always great tools to have. Utilizing this directive in your daily development will help you achieve both of those goals and improve your Angular Skills. Check out my example below and let me know what you think!

"Of" vs "From" - How to use each and what is the difference?

Blake Lamb — Thu, 08 Dec 2022 18:15:00 +0000

Overview

This article will dive into the use cases for the "of" and "from" RxJs Operators. We will cover what each do individually to allow you to find their differences. Finally, examples will be given for each operator to further help you apply them to your own work.

Create A Sandbox App

Go to Stackblitz and start a new "RxJs" project. Or you can fork my Stackblitz here to allow you to follow along and use RxJs without any problems.

"Of" RxJs Operator

The RxJs Operator "of" converts the argument(s) given to an Observable. It is pretty simple in this regard. We can know that whatever is given to the operator will be returned, just wrapped in an Observable. Each value given as an argument will be separately emitted from the Observable. Some example use cases for "of":

const str = 'Hello World';
const str$ = of(str);
str$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of string
// result: "Hello World"

const arr = [1, 2, 3];
const arr$ = of(arr);
arr$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Array<number>
// result: [1,2,3]

const arr2 = [4, 5, 6];
const arr2$ = of(arr, arr2);
arr2$.subscribe((result) => console.log({ result }));
// Will emit a single two values each with the type of Array<number>
// result: [1,2,3]
// result: [4,5,6]

const imAPromise = fetch('https://pokeapi.co/api/v2/pokemon/ditto').then(
  (response) => response.json()
);
const imAPromise$ = of(imAPromise);
imAPromise$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Promise
// result: Promise

function* iterator() {
  const values = ['iterator-1', 'iterator-2', 'iterator-3'];
  for (let i = 0; i < values.length; i++) {
    yield values[i];
  }
}

const imAnIterable = iterator();
const imAnIterable$ = of(imAnIterable);
imAnIterable$.subscribe((result) => console.log({ result }));
// Will emit a single item with the type of Object
// result: Object

"From" RxJs Operator

The RxJs Operator "from" is very similar to the operator "of". It also converts the argument to an Observable. The main differences are that this operator can only take one argument to for the value of the observable. The second argument to this operator is for the scheduler. Another notable difference is that this allows a promise, array, or iterable like object to be converted to an Observable. Each of these use cases can be seen below.

*** Note the difference in how each handles a string and an array ***

const str = 'Hello World';
const str$ = from(str);
str$.subscribe((result) => console.log({ result }));
// Will emit each character from the given string
// result: "H"
// result: "e"
// result: "l"
// result: "l"
// result: "o"
// result: " "
// result: "W"
// result: "o"
// result: "r"
// result: "l"
// result: "d"

const arr = [1, 2, 3];
const arr$ = from(arr);
arr$.subscribe((result) => console.log({ result }));
// Will emit each value within the array that was given as input to the operator.
// result: 1
// result: 2
// result: 3

const imAPromise = fetch('https://pokeapi.co/api/v2/pokemon/ditto').then(
  (response) => response.json()
);
const imAPromise$ = from(imAPromise);
imAPromise$.subscribe((result) => console.log({ result }));
// Will emit the return value of the endpoint that we called to get the information about "Ditto".
// result: This will now be an object of information about the pokemon "Ditto".

function* iterator() {
  const values = ['iterator-1', 'iterator-2', 'iterator-3'];
  for (let i = 0; i < values.length; i++) {
    yield values[i];
  }
}

const imAnIterable = iterator();
const imAnIterable$ = from(imAnIterable);
imAnIterable$.subscribe((result) => console.log({ result }));
// Will emit each value that we gave to the iterator item within the function
// result: "iterator-1"
// result: "iterator-2"
// result: "iterator-3"

Conclusion

These two operators function very similarly, so it could be easy to get the two confused. In some cases, either may work. Being aware of how each handles input types differently can allow you to leverage the full advantages of RxJs to be more efficient in your development. Want to see live examples? Check out this Stackblitz!

Using clearTimeout in JavaScript

Blake Lamb — Fri, 02 Dec 2022 19:21:02 +0000

Overview & Setup

This article will show how to use the clearTimeout function in JavaScript. This function allows you to use cancel a setTimeout before it resolves.In this example I will use an angular project in StackBlitz, but as this is a JavaScript feature, it can be used in any JavaScript environment.

To see a working use of this, you can checkout my example project here .

Getting Into It

There are many possible use cases in which using clearTimeout may be advantageous. For example, if you want to have an input field fire off a search when the user types in it, but you want to wait until the user stops typing to run the search function. You would need to use setTimeout in this situation to delay the search function. But without a way to cancel that timeout, the function would still run on every key stroke.

So to get the desired behavior and cancel the timeout, you would need to implement something like this:

  setTO = () => {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    this.timeoutId = setTimeout(() => {
      this.running = false;
      this.completed = true;
    }, 3000);
  };

In this function, we look to see if there is already a timeout. If there is, we clear it and set a new one. So in this example the user would need to not input anything for 3 seconds before the timeout resolves.

Conclusion

That is the basic implementation and situation of when you might need or want to use clearTimeout. It is a function that has helped me in my coding and hopefully this can help you too! Again, to see my Stackblitz example with a working implementation, click here.

Creating A Combo Box in Raw HTML

Blake Lamb — Fri, 02 Dec 2022 19:20:04 +0000

Overview & Setup

This article will show how to create an input in HTML that accepts text to search through a list as well as a dropdown of options like a select input. For my example we will create the combo box in Vue, but it can easily be adapted to any other framework or used in raw HTML. To start you will need to create a new Vue environment in Stackblitz . In the App.vue file right below the <img> tag displaying the Vue Logo, is where we will create the Combo Box.

Getting Into It

Creating this input is actually quite simple. We will do it using only raw HTML elements. First, within the <template> create an input tag with the appropriate attributes like this:

<!-- App.js -->

<input
  id="combobox"
  v-model="comboboxValue"
  type="text"
  list="input-list"
  @input="emitValue(comboboxValue)"
  placeholder="Combo Box"
/>

This creates a text input. For now on the page, it will look and behave just as a normal input element. But you should see that we gave it a list attribute and an input event handler.

Next we will create the HTML to finish the add the dropdown section of the combo box. This is done by adding the following HTML directly below the input tag that we previously created.

<!-- App.js -->

<datalist id="input-list">
  <option v-for="option in options" :key="option">
    {{ option }}
  </option>
</datalist>

Notice this relies on having an array named 'options', so lets add that array into a data function within the <script> below where the components are declared:

//App.js

data() {
  return {
    options: ['one', 'two', 'three'],
    comboboxValue: '',
  };
},

This code also declares comboboxValue which is where we will store the selected value from the input. Lastly we need to create the method to handle the @input event. Paste the following code below the data function:

//App.js

methods: {
  emitValue(val) {
    console.log({ val });
  },
},

Now when you look at the window, you should see what still appears to be a normal input below the Vue logo. But now as you type in it, it will filter the list that we gave it and show the applicable options below the input like a select input. Then when you click an option it will put the text of that option into the text input box. You can also see in the console that the contents of teh input are being tracked.

Conclusion

That is it! Now you have a combo box that you can have contain any array that you wish it to by simply changing the options array. You can handle the change of the input however you would like within the emitValue method. The initial value of the input can also be set by simply giving comboboxValue an initial value

Hopefully this into has helped you! To see my Stackblitz example, click here.

Writing Your Own Discord Bot

Blake Lamb — Fri, 02 Dec 2022 19:18:28 +0000

Overview & Setup

This article will show how to create a discord bot. For an example of a Discord Bot that I wrote for an assignment while I was at UVU, follow this link. To start you will need to create a new Node.js environment. If you dont have Node downloaded and installed, do that first. In the root folder, create an index.js file. Next, you'll need to download a couple of of NPM packackages. In your terminal run npm install dotenv and npm install discordjs.

Getting Into It

To start, we will create a .env file in the root folder. This is a file that will contain environment variables. For now it should be empty, but wil will add to it later. Now, in your index.js file, you will need to import and use the packages that were just installed. Add the following code to the top of your index.js file.

//index.js

const dotenv = require("dotenv");
dotenv.config({ path: "./.env" });
const { env } = process;
const Discord = require("discord.js");

Now with everything imported we will get into the actual code for the bot. With the discordjs NPM package, its pretty simple to create the bot. In the index.js file add the following code:

//index.js

const client = new Discord.Client();

client.once("ready", () => {
  console.log("Ready!");
});

Thats it! With those few lines of code, your bot will spin up and log out 'Ready!'. This wouldn't work though yet because we haven't connected the bot code to an actual bot on discord, or authenticated the bot. So lets do that now.

Creating A Bot In Discord

First, log in or create a Discord account. Then follow this link to go to the developer portal. In the upper right hand corner click the button to create a new application.

This will bring you to the 'General Information' page for the application you just created. On the left hand side, you'll see a menu. One of the options is 'bot', click it.

Now you'll see this page, click on the 'Add Bot' button.

Discord will create the bot, and give it the same username as you named the application. You can change this here and can add a picture for the bot here as well. With the bot created now, you'll need to copy the bot token so you can add it to your application.

Back in the code, go to your .env file that we created earlier. This is where we will add the bot token that you just copied. IMPORTANT: The bot token is a secret, and should not be tracked on Github or anything like it. Be sure to add your .env file to a .gitignore before pushing it to Github This .env file should look like this:

//.env

BOT_TOKEN=<YOUR_TOKEN_HERE>

Now in the index.js file, at the bottom of the code, add the following line:

//index.js

client.login(env.BOT_TOKEN);

Now your code is actually logged in and connected to the discord bot you just created! All that needs to be done now is to add it to a server.

Adding Your Bot To A Server

Back in the Application Portal for your bot, in the menu bar, click the OAuth2 line.

This will bring you to the authentication settings. At the bottom of the page there is a 'scopes' section. Check the 'Bot' option. This will reveal a URL at the bottom of this section. Copy and paste that URL into a new browser tab. That URL is the invite link to add your bot to a Discord server.

As long as you have permission in a discord server to add bots, you can select the server and click 'Authorize'. When you do that, you've officially created and added your bot!

Now in back in your Node terminal, run node index.js. In your node terminal you should see that it logged out 'Ready!'. But nothing would happen when you send messages yet. Next up we will add some functionality for the bot to interact with messages.

Adding Functionality To Your Bot

Having the bot created and added to a server is super cool, but likely you didn't want to create a bot to do nothing. Now we will add a prefix that the bot will look for and have it send a reply.

Just like before when we used the client.on() method to log a message when the bot started up, we will use it now to see each message. Add the following code to your index.js file, above the login() method.

//index.js

client.on("message", async (message) => {});

This will allow the bot to look at the messages that are sent to the channels that it has access to. Inside this method we can add logic to only make a prefix that the bot will only respond to messages that start with the prefix. We will make our prefix '@'. We can also make keywords that the bot can know how to respond to. We will do that now to. Add the following code inside the .on curly brackets.

//index.js

client.on("message", async (message) => {
  if (message.author.bot) return;
  if (!message.content.startsWith("@")) return;

  const contentArr = message.content.split(" ");

  if (contentArr[0] === "@marco") {
    message.reply("Polo!.");
    return;
  } else if (contentArr[0] === "@polo") {
    message.reply("Marco!");
    return;
  }
});

The first line there, will exit the method if the author of the message is the bot. This will protect us from an infinite loop when the bot sends a message in response to a command. The next line looks at a message to check if it starts with the prefix '@'. If either of those conditions are not true, the method returns. Finally we split the message content into an array and check if the first word in the array matches one of our key words. If it does, we send a message back.

If you stop your node app and rerun node index.js and send a message of either '@marco' or '@polo', you should see the proper response in a message replied to you by the bot.

Conclusion

With that as the beginning, you have everything needed to make a bot to do whatever you would like it to. You can use different commands to do what you would like them to, and utilize Javascript to have the bot run functions when a keyword is sent. In the Github repo that I linked earlier in the post, you'll see how I had the bot call an API and return a response, send an email and send a text message.

Hopefully this into has helped you to create a cool Discord Bot! If you want to know more about the Discord NPM package, read the docs here.

Nullish Coalescing Operator

Blake Lamb — Fri, 02 Dec 2022 19:16:21 +0000

Overview & Setup

This article will show the usage of the Nullish Coalescing Operator in Javascript. I will also discuss the benefit of using this operator in your code.

The demo I will do is a node.js project, but this can be done in any Javascript file. You can create a new Stackblitz Node project, or use mine here.

Getting Into It

The Nullish Coalescing Operator is a JavaScript operator that was introduced recently. It is similar to the OR (||) operator, but wil some cool difference. With the traditional OR operator, a condition would evaluate to false if the value was falsy. This meant that it would be evaluate to false on null, undefined, 0, '', NaN and false. With the Nullish Coalescing Operator (??), it will only evaluate to false if the value is null or undefined. This could present some problems and potential bugs in your code. For example, you may want to show a number as long as there is a number to show, even if the number is 0. So you could write a block of code like this:

//index.js

team.score = 0;
const score = team.score ?? "No Score Added";
console.log(score); // 0

This would assign the score to be any value held in team.score other than null or undefined. In this case score would be assigned the value of 0.

Instead if you wrote:

//index.js

team.score = 0;
const score = team.score || "No Score Added";
console.log(score); // 'No Score Added'

the score variable would be 'No Score Added' because team.score is 0 which is a falsy value. In a case like this, we obviously would not want that to be the result, so the ?? is the perfect replacement operator.

Wrap Up

The Nullish Coalescing Operator is a cool new operator that can clean up your code and help out a lot. Only evaluating to false on null and undefined can be extremely useful. But at the same time it can create some problems if you don't understand exactly what it is doing. Hopefully after reading this you are more clear on the use of it and can add it to your arsenal of JavaScript Operator.

For some examples of the difference between the || and ?? operators, or to try it out yourself, you can visit this Stackblitz (Or take a look at the code below).

//index.js

console.log(`What will I Show?? ${null || hi}`);
// result: hi
console.log(`What will I Show?? ${undefined || hi}`);
// result: hi
console.log(`What will I Show?? ${NaN || hi}`);
// result: hi
console.log(`What will I Show?? ${false || hi}`);
// result: hi
console.log(`What will I Show?? ${0 || hi}`);
// result: hi
console.log(`What will I Show?? ${"" || hi}\n\n`);
// result: hi

console.log(`What will I Show?? ${null ?? hi}`);
// result: hi
console.log(`What will I Show?? ${undefined ?? hi}`);
// result: hi
console.log(`What will I Show?? ${NaN ?? hi}`);
// result: NaN
console.log(`What will I Show?? ${false ?? hi}`);
// result: false
console.log(`What will I Show?? ${0 ?? hi}`);
// result: 0
console.log(`What will I Show?? ${"" ?? hi}`);
// result: ''

Getting To Know TypeScript's Partial Type

Blake Lamb — Fri, 02 Dec 2022 19:14:59 +0000

Overview & Setup

This article will demonstrate how to use and the benefits of the Partial Type in TypeScript.

The demo I will do is in Angular, but this can be done in any TypeScript file. Create a new component in an Angular Project, or create a new Stackblitz Angular project. I did my work in a Stackblitz project, which can be found here.

Getting Into It

In the component that was just created, or in any component that you will be using a Partial Type, create a new interface. This is done by using the Angular CLI command ng g i <interfaceName> or by inserting the code below above the @Component decorator.

// app.component.ts

export interface Player {
  firstName: string;
  lastName: string;
  age: number;
  stats: {
    ppg: number;
    apg: number;
    spg: number;
    rpg: number;
  };
  country: string;
  college: string;
}

Once the new interface has been declared (If you used the CLI command you will need to import it into your component), we will create three new class variables. This is where we will actually implement the Partial Type. It is done by declaring the type as Partial<interface>, as seen below. These are the three variables I created using my 'Player' interface.

// app.component.ts

  spida: Player = {
    firstName: 'Don',
    lastName: 'Mitch',
    age: 24,
    stats: {
      ppg: 24,
      apg: 4,
      spg: 3,
      rpg: 3
    },
    country: 'USA',
    college: 'Louisville'
  };

  stifle: Partial<Player> = {
    firstName: 'Rudy',
    lastName: 'Gobert',
    age: 28,
    stats: {
      ppg: 15,
      apg: 2,
      spg: 1,
      rpg: 14
    },
    country: 'France'
  };

  slomo: Player = {
    firstName: 'Joe',
    lastName: 'Ingles',
    age: 34,
    stats: {
      ppg: 12,
      apg: 7,
      spg: 2,
      rpg: 6
    },
    country: 'Australia'
  };

One of the variables should be created using all of the attributes of the interface. One should be created using Partial<Player> as a type, and one should have just Player as the type, but should not contain all of the attributes from the interface. When all of these variables are created, you should see that there is an error, on the variable without the Partial type and without all the attributes of the Type. If you comment out that variable, you should see it working!

This demonstrates how to actually use the Partial Type, so now lets talk about why it is beneficial to know about and use it.

Why?

There may be countless situations in which a Partial Type would be beneficial to utilize, but the generic situation is whenever you have an interface created, only need some of the attributes for a new variable that you are creating. This could come in handy if you are gathering information through a form that will then patch the value of an existing variable. It would allow the form information to be strongly typed, but wouldn't require a new interface to be created.

Another strong benefit to the Partial type is the ability to still have intellisense on variables when they don't use all the attributes. Intellisense is helpful to minimize spelling mistakes and to help remember what attributes are on a type. I am always looking for ways to use my intellisense and I know that it makes life harder when it isn't available. So any way to decrease situations where I cant use it is a bonus.

Wrap Up

Overall there are countless ways to use the Partial type and many benefits to it. Finding ways to keep TypeScript code strongly typed is always good, and increasing the use of intellisense is awesome. The Partial type does both of those things. If you have more/better reasons to use the Partial Type reach out to me and let me know! I would love to know more about it! You can find me by clicking on any of the logos in the footer of my site.

Again, for a live example of the above code, see this Stackblitz .

How to use the 'forkJoin' RxJS operator

Blake Lamb — Fri, 02 Dec 2022 19:13:53 +0000

Overview

There are times where you will want one observable stream, that contains data from multiple observable sources. This can be accomplished by utilizing the forkJoin RxJs operator to combine multiple observable streams into one.

Getting Into It

Open an app to the component that needs to have the observables combined, or create a sandbox Angular app. Knowing what an observable is and how to create/use them is necessary to use forkJoin. If observables are a new concept, do some research about that first.

For this example I'm going to use a StackBlitz and calling the PokeApi for my observables. In the component create an array of the HTTP calls, but don't subscribe to each observable. That should look something like the example below:

// app.component.ts

export class AppComponent implements OnInit {
  private pokeApiBaseUrl = "https://pokeapi.co/api/v2";
  public pokeData$: Observable<any>;

  constructor(private _http: HttpClient) {}

  ngOnInit() {
    const pokemonData = [
      this._http.get(`${this.pokeApiBaseUrl}/pokemon`),
      this._http.get(`${this.pokeApiBaseUrl}/type`),
      this._http.get(`${this.pokeApiBaseUrl}/generation`),
    ];
    this.pokeData$ = forkJoin(pokemonData).pipe(
      tap((pokeData) => console.log({ pokeData }))
    );
  }
}

As you can see, the 'pokemonData' array is created with three observables by creating an HTTP call for each one. Then when the array is passed into forkJoin, each HTTP call is made in order and the three calls are compiled into one observable. This resulting observable can be seen by tapping into the pipeline like I do above.
** Note, the observable will not resolve until all http calls have been completed in the input array into forkJoin. This could be useful when trying to do something in order **

Once the pokemonData array is passed into forkJoin, you can treat it as a normal observable. As you can see above, I tap into the pipeline and console.log the result. First though you must make sure to subscribe to the forkJoin. In this example I do so by using the async pipe, but this can also be done by using .subscribe(). Another good thing to know about this operator is that the resulting Observable will always be an array, and the order of the array will always be in the same order as when you passed them in to the forkJoin.

Wrap Up

This can be a very valuable RxJS operator to utilize. Often times having code execute in order, or to be able to combine all the observables into one observable, can be extremely useful. In those situations forkJoin is a great way to accomplish that.

For a live example of the above code, see this StackBlitz

How To Use The 'Concat' RxJS Operator To Make Synchronous HTTP Calls

Blake Lamb — Fri, 02 Dec 2022 19:11:07 +0000

Overview

Sometimes it is necessary to be able to make HTTP calls in a synchronous order. This can be difficult to do, but with the RxJS operator 'Concat', it is much simpler.

Getting Into It

Open an Angular app to the component that needs to run the synchronous calls, or create a sandbox Angular app. Knowing what an observable is and how to create/use them is necessary to use Concat. If observables are a new concept, do some research about that first.

In the component that the synchronous calls need to be made create a array of the calls as observables, but don't subscribe to each observable. That should look something like the example below:

// app.component.ts

ngOnInit(): void {
  const calls = [
    this.fetchCharacter("1"),
    this.fetchCharacter("2"),
    this.postCharacter(),
    this.postCharacter(),
    this.postCharacter()
  ];

  concat(...calls).subscribe(
    res => console.log("next", res),
    err => console.log("error", err),
    () => console.log("complete")
  );
}

fetchCharacter(characterId: string): Observable<any> {
  return this.httpClient.get( "https://jsonplaceholder.typicode.com/todos/" + characterId );
}

postCharacter(): Observable<any> {
  return interval(3000).pipe(
    take(1),
    switchMap(() => {
      return this.httpClient.post("https://jsonplaceholder.typicode.com/todos", {} );
    })
  );
}

As you can see, the 'calls' array is created with five observables created by calling the fetchCharacter() and postCharacter() methods. The post Character method waits each time it is called, so there is a clear time lag between each time the method is called.

Once the calls array is created with the observables, spread that array into the concat method. When the concat method is subscribed to, each observable in the array passed into it will be subscribed to and execute in order. In the example above, you can see the characters logged to the console at set intervals. Then once all the observables have been executed, the finished message that is passed into the concat method as the final argument is executed.

Wrap Up

This can be a very valuable RxJS operator to utilize. Often times having code execute asynchronously is preferred and can increase the speed of functions. But in instances where the code much be synchronous, concat is a great way to accomplish that.

For a live example of the above code, see this StackBlitz

Creating a C# Web API

Blake Lamb — Fri, 02 Dec 2022 19:07:20 +0000

Overview

Setting up a Web API using C#/.NET is pretty easy, setting up endpoints and connecting to a database can be more difficult. This article will go through the process of how to accomplish those tasks using vsCode.

Setup

Download the .NET SDK

In order to run a .NET Web API, the .NET SDK has to be downloaded. This is pretty easy, just click here for the official download page.

Create A Sandbox App

Now that the SDK is installed, open up a run a new instance of vsCode and navigate in the command line to the folder where the API will live. Once there, use the command dotnet new webapi. Once that has completed running, the WebApi has been created. I will walk through a few more setup steps before we get into the rest of the API work.

Installs

These are some required and some useful extensions to have downloaded in vsCode:

c# by Microsoft (Required)
NuGet Package Manager by jmrog/li>
Visual Studio IntelliCode by Microsoft

Now that these have been installed, run dotnet add package MongoDB.Driver

Set a port for the WebApi to run on

Find the launchSettings.json file in your root folder and open it. Locate the line with the application name, then below that, find the line that says applicationUrl. Change this line to whatever url you would like it to run on. I have mine set to run on localhost:4000.

// launchSettings.json

"daily_debrief.API": {
  "commandName": "Project",
  "dotnetRunMessages": "true",
  "launchBrowser": true,
  "launchUrl": "swagger",
  "applicationUrl": "http://localhost:4000;",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

That is all the setup that is needed. Your WebApi is now configured and ready to run! Go to the terminal and run dotnet run. If it's successful, there should be a message saying that it's listening on the url that was specified earlier.

Creating A Controller With An Endpoint

Now, it's time to make the WebApi function by adding an endpoint. First we will need to create a Controllers folder in the root of the project. Inside the Controllers folder, create a new file named UserController.cs. In the UserController.cs file paste this code as the template:

// userController.cs

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web
namespace test.API.Controllers
{
[ApiController]
[Route("api/users")]
    public class HelloWorldController : ControllerBase

        [HTTPGet("test")]
        public string Test()
        {
            return "This is a test endpoint";

    }
}

Stop and restart the server, then go to the browser and type in the serverUrl with 'api/users/test' appended to the end. It should return the message from in the test method that was just created.

Creating A Model

A model is a structure that will show the shape of data that will be returned by an endpoint. First, create a folder in the root of the project named 'Models'. All models will live here. Inside that folder create a file called User.cs. Inside the User.cs file, add the following code:

// User.cs

using System;
namespace daily_debrief.API
{
    public class User
    {
        public DateTime created { get; set; 
        public string FirstName { get; set; 
        public string LastName { get; set; 
        public string EmailAddress { get; set; 
        public string Username { get; set; }
    }
}

Then go to the UserController.cs file and add using test.API.Models; to the top of the file and the following code below the existing endpoint:

UserController.cs

HttpGet("testUser/{email}")]
public IActionResult GetUser(string email)
{

    User testUser = new User()
    {
        created = DateTime.Now,
        FirstName = "Blake",
        LastName = "Lamb",
        EmailAddress = email,
        Username = "blamb31"
    };

    return Ok(testUser);
}

After stopping and restarting the server again, you can now call the endpoint '/api/users/test/blake@blakelamb.com' and see the return of a User object with that email.

Recap

C#/.NET can be a good language to use as the backend of an app. With some templates that already come with C#/.NET it's pretty simple to get a server up and running. Adding controllers, endpoints and models is also simple and allows data to be passed back to the user easily.