Hey I would love to know what you think while reading my posts. Please comment!.

Typescript Interfaces and Optional Properties

I love TypeScript after working with it (on an enterprise system) for well over a year now. Using it with ReactJS makes things easier and very type safe. No more issues with case sensitivity Javascript errors, or accidentally assigning a string to a number. Or so I thought!

Recently, we came across an issue with the type safety on some of our interfaces. These were interfaces that included only optional properties within them.

e.g.

interface IInvoiceFilter {
    invoiceDate?: Date;
    invoiceNo?: number;
}

We would then use this interface for what ever we were doing, and using intellisense to see what the properties were on it. Then use it something like this;

const invoiceFilter: IInvoiceFilter = { invoiceNo: 1 };
let otherFilter: IInvoiceFilter = {};
otherFilter.invoiceNo = 1;

There would then be a method that would take the filter;

const filterInvoices = (invoiceFilter: IInvoiceFilter) => {
    // do something here with it
};

You would then call this with;

filterInvoices(invoiceFilter);

During some coding, one of the developers wasn’t thinking and did this;

filterInvoices('some string value');

Neither Visual Studio intelisense, Gulp Build or Resharper complained about this! We then discovered you could also do this;

let invoiceFilter: IInvoiceFilter = {};
invoiceFilter = 'Random string';

Again there was no issue with this? Why is there no issue?

This was quick to spot, so we were able to fix it, but I then noticed the same thing again in an interface that we do not have control over. We are using React Router to control our routes in a SPA. Within React Router, there is a component called Link.

<Link to={ internalUrls.Invoice.List }>View Invoices</Link>

The component would render an anchor tag with the correct href which works fine. However, I had to change internalUrls.Invoice.List from a string property, to a function that returned a string. Once I updated the property, I build the project and ran it. Everything looked fine until I noticed an error in the console. Warning: Failed propType: Invalid prop 'to' supplied to 'Link'. Check the render method of.... After a quick inspection, I noticed that the to property is:

Correct

So it can either be a string value OR it is an interface with all optional properties.

Is this a bug in TypeScript? Or is it a valid feature? I can see that there will be many issues from this when developers make changes like I have. If you know, then please comment below.


About Me

Tim James I'm Tim, a web applications developer from Glasgow, Scotland. Currently working for Kingfisher Systems Ltd, building bespoke systems within the Car Auction industry.

  • C#
  • VB.NET
  • ASP.NET
  • .NET MVC
  • Web API
  • Razor
  • HTML5
  • CSS3
  • jQuery
  • WCF
  • SQL
  • knockout.js
  • Angularjs
  • AJAX
  • APIs
  • SignalR
Why not follow me on twitter? Follow me on Twitter