Category: TypeScript

Use of Enums in Angular 8+ HTML template

in the TS

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

EDIT: Time goes by and we learn more as a developer, the approach I’m using right now doesn’t use the get method. Both solutions work, just choose the one you like the most.

in the TS

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

From: Use of Enums in Angular 8 HTML template for *ngIf – Stack Overflow

Angular – How to force reload components with router navigation

(Tested in Angular 11 project)

One trick is to “double” navigate to force components to destroy and “update” their lifecycle.

E.g.:

/// Navigates to detail view
navigateToDetail(id: string) {

  // Navigates to start page first to "destroy" detail components if on same url
  this.router.navigate(['/']).then(() => {
    // Then navigates to desired url 
    let navigationExtras: NavigationExtras = { queryParams: { 'id': id} };
    this.router.navigate(['/view'], navigationExtras);
  });

}

I also added this to app-routing.module.ts: (not sure if it makes a difference with the above code)

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload',
  })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

 

Typescript debug util – Output json structure to console as formatted and sorted properties

Made a Debug util TypeScript class for formatted output to browser console of json objects, also sorted on property keys alphabetically (usage: simplifies text compare between different json structures).

export class DebugUtils {
  ///Outputs object as formatted json string to console.
  public static ToConsoleJson(value: any, message = null) {
    if (message) {
      console.log(message);
    }
    console.debug(JSON.stringify(value, null, 2));
  }

  ///Outputs object as formatted json string to console sorted alphabetically by property keys.
  public static ToConsoleJsonSortedByKey(obj: any, message = null) {
    //sort object keys alphabetically
    var allKeys = [];
    JSON.stringify( obj, function( key, value ){ allKeys.push( key ); return value; } )
    allKeys.sort();
    const sortedJsonString = JSON.stringify( obj, allKeys, 2);
    if (message) {
      console.log(message);
    }
    console.debug(sortedJsonString);
  }
}

 

 

Typescript: how to create an object from interface

If you want to instantiate an object from an interface in typescript do this.
“new” object:

const address: Address = {} as Address;

Then can add values to properties.

Object initialization:

const modal: IModal = { 
  content: '', 
  form: '', 
  href: ''
};

 

Source: How can I create an object based on an interface file definition in TypeScript? – Stack Overflow

How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

Step 1. install type definitions (e.g. vs code intellisense) to project:
npm install –save @types/underscore

(https://www.npmjs.com/package/@types/underscore)

 

Step 2. import to ts file:

import * as _ from “underscore”;

Source: How to use underscore lib from DefinitelyTyped with typescript? – Stack Overflow

TypeScript vs. C#: LINQ

TypeScript counterparts for C# LINQ.

Source: TypeScript vs. C#: LINQ
All of below are copied from https://decembersoft.com in case that blog post disappears in future, I save it here for time keeping. Let me know if its a problem.

TypeScript has no equivalent for the language-integrated-natural-query aspect of LINQ. (hey, isn’t that literally the whole acronym?)

True, you can’t write the following LINQ statement in TypeScript

var adultUserNames =  from u in users  where u.Age >= 18  select u.Name;

However, the IEnumerable<T> extension methods, which are at the heart of LINQ, have equivalents in TypeScript (or can be emulated).

Aggregate

// C#var leftToRight = users.Aggregate(initialValue, (a, u) => /* ... */);
// TypeScriptconst leftToRight = users.reduce((a, u) => /* ... */, initialValue);const rightToLeft = users.reduceRight((a, u) => /* ... */, initialValue);

All

// C#var allReady = users.All(u => u.IsReady);
// TypeScriptconst allReady = users.every(u => u.isReady);

Any

// C#var isDirty = users.Any(u => u.IsDirty);
// TypeScriptconst isDirty = users.some(u => u.isDirty);

Append

// C#var allUsers = users.Append(oneMoreUser);
// TypeScriptconst allUsers = [ ...users, oneMoreUser ];

Average

// C#var avgAge = users.Average(u => u.Age);
// TypeScriptif (users.length < 1) {  throw new Error('source contains no elements');}const avgAge = users.reduce((a, u) => a + u.age, 0) / users.length;

Cast

// C#var people = users.Cast<Person>();
// TypeScriptconst people = users as Person[];// Note: not semantically the same. The C# version throws an exception// if any of the users can't be cast to type Person.

Concat

// C#var allUsers = users.Concat(moreUsers);
// TypeScriptconst allUsers = [ ...users, ...moreUsers ];

Contains

// C#var hasAdmin = users.Contains(admin);
// TypeScriptconst hasAdmin = users.includes(admin); // Use a polyfill for IE support

Count

// C#var n = users.Count();
// TypeScriptconst n = users.length;

DefaultIfEmpty

// C#var nonEmptyUsers = Enumerable.DefaultIfEmpty(users);
// TypeScriptconst nonEmptyUsers = users.length ? users : [ null ];

Distinct

// C#var uniqueNames = users.Select(u => u.Name).Distinct();
// TypeScriptconst uniqueNames = Object.keys(  users.map(u => u.name).reduce(    (un, u) => ({ ...un, n }),    {}  ));

ElementAt

// C#var nth = users.ElementAt(n);
// TypeScriptif (n < 0 || n > users.length) {  throw new Error('Index was out of range');}const nth = users[n];

ElementAtOrDefault

// C#var nth = users.ElementAtOrDefault(n);
// TypeScriptconst nth = users[n];

Empty

// C#var noUsers = IEnumerable.Empty<User>();
// TypeScriptconst noUsers: User[] = [];const noUsers = [] as User[];

Except

// C#var maleUsers = users.Except(femaleUsers);
// TypeScriptconst maleUsers = users.filter(u =>  !femaleUsers.includes(u) // Use a polyfill for IE support);

First

// C#var first = users.First();
// TypeScriptif (users.length < 1) {  throw new Error('Sequence contains no elements');}const first = users[0];

FirstOrDefault

// C#var first = users.FirstOrDefault();
// TypeScriptconst first = users[0];

List.ForEach

// C#users.ToList().ForEach(u => /* ... */);
// TypeScriptusers.forEach(u => /* ... */);

GroupBy

// C#var usersByCountry = users.GroupBy(u => u.Country);
// TypeScriptconst usersByCountry = users.reduce((ubc, u) => ({  ...ubc,  [u.country]: [ ...(ubc[u.country] || []), u ],}), {});

Intersect

// C#var targetUsers = usersWhoClicked.Intersect(usersBetween25And45);
// TypeScriptconst targetUsers = usersWhoClicked.filter(u =>  usersBetween25And45.includes(u) // Use a polyfill for IE support);

Last

// C#var last = users.Last();
// TypeScriptif (users.length < 1) {  throw new Error('Sequence contains no elements');}const last = users[users.length - 1];

LastOrDefault

// C#var last = users.LastOrDefault();
// TypeScriptconst last = users[users.length - 1];

Max

// C#var oldestAge = users.Max(u => u.Age);
// TypeScriptif (users.length < 1) {  throw new Error('source contains no elements');}const oldestAge = users.reduce((oa, u) => Math.max(oa, u.age), 0);

Min

// C#var youngestAge = users.Min(u => u.Age);
// TypeScriptif (users.length < 1) {  throw new Error('source contains no elements');}const youngestAge = users.reduce((ya, u) => Math.min(ya, u.age), Number.MAX_VALUE);

OfType

// C#var bots = users.OfType<Bot>();
// TypeScript// No equivalent

OrderBy / ThenBy

// C#var sorted = users.OrderBy(u => u.Age).ThenBy(u => u.Name);
// TypeScriptconst sorted = users.sort((a, b) => {  const ageDiff = b.age - a.age;  if (ageDiff) return ageDiff;  return a.name.localeCompare(b.name); // Use a polyfill for IE support});

Reverse

// C#var backwards = users.Reverse();
// TypeScriptconst backwards = users.reverse();// Caution: users is also reversed!

Select

// C#var names = users.Select(u => u.Name);
// TypeScriptconst names = users.map(u => u.name);

SelectMany

// C#var phoneNumbers = users.SelectMany(u => u.PhoneNumbers);
// TypeScriptconst phoneNumbers = users.reduce((pn, u) => [ ...pn, ...u.phoneNumbers ], []);

Single

// C#var user = users.Single();
// TypeScriptif (users.length > 1) {  throw new Error('The input sequence contains more than one element');}else if (!users.length) {  throw new Error('The input sequence is empty');}const user = users[0];

SingleOrDefault

// C#var user = users.Single();
// TypeScriptconst user = users[0];

Skip

// C#var otherUsers = users.Skip(n);
// TypeScriptconst otherUsers = users.filter((u, i) => i >= n);

SkipWhile

// C#var otherUsers = users.SkipWhile(predicate);
// TypeScriptlet i = 0;while (i < users.length && predicate(users[i++]));const otherUsers = users.slice(i - 1);

Sum

// C#var totalYears = users.Sum(u => u.Age);
// TypeScriptif (users.length < 1) {  throw new Error('source contains no elements');}const totalYears = users.reduce((ty, u) => ty + u, 0);

Take

// C#var otherUsers = users.Take(n);
// TypeScriptconst otherUsers = users.filter((u, i) => i < n);

TakeWhile

// C#var otherUsers = users.TakeWhile(predicate);
// TypeScriptlet i = 0;while (i < users.length && predicate(users[i++]));const otherUsers = users.slice(0, i - 1);

Union

// C#var allUsers = someUser.Union(otherUsers);
// TypeScriptconst allUsers = otherUsers.reduce((au, u) =>   au.includes(u) // Use a polyfill for IE support    ? au    : [ ...au, u ]}), someUsers));

Where

// C#var adults = users.Where(u => u.Age >= 18);
// TypeScriptconst adults = users.filter(u => u.age >= 18);

Zip

// C#var matches = buyers.Zip(sellers, (b, s) => new { Buyer = b, Seller = s });
// TypeScriptconst matches = [];for (let i = 0; i < buyers.length && i < sellers.length; i++) {  matches.push({    buyer: buyers[i],    seller: sellers[i],  });}