There is a very easy to use and simple pattern that can be used whilst importing files in Typescript. The main advantage of using this pattern is to increase the readability and scan-ability of code. And that pattern is import * as ...
It is especially useful when it is used with models, so let's have a look at a very simple model:
user.ts
interface UserType {
firstName: string;
surname: string;
}
export function fromJson(input: any): UserType {
return {
firstName: input.firstName || "",
surname: input.surname || ""
}
}
export function getName(user: UserType): string {
return `${user.firstName} ${user.surname}`;
}
If we don't use the import *
syntax, we would have to import the 2 functions separately as follows:
import {fromJson, getName} from 'user.ts';
const input = { /* some JSON */ }}
const object = fromJson(input);
console.log(getName(object));
The above is not particularly easily to scan. We get to the usage of fromJson
, but as the reader we have to break our scan by either looking at the top of file to see where the function came from or use our IDE's intellisense to see what the type of object
is. Furthermore, on the next line, the function name getName
might not remain unique to User
.
So, in order to make the code easier to scan and parse for others, we can user the import * as
pattern:
import * as User from 'user.ts';
const input = { /* some JSON */ }}
const object = User.fromJson(input);
console.log(User.getName(object));
From scanning this file, the reader can very quickly understand that the variable object
is a User
because the function fromJson
is namespaced to that file. The getName
call can now be disambiguated from a getName
function that might exist on another type of object.
This pattern also works nicely for utils or helpers, as such:
const user = db.getUser();
const user = cache.getUser();
const user = queue.getUser();
Top comments (0)