How triple slash works in TypeScript for referencing

Question

I'm beginner in typescript.

I made a codesnippet with two files, utils.ts and index.ts.

utils.ts

function theDate() {
  return new Date();
}

index.ts

/// <reference path="utils.ts" />
let t = theDate();
document.getElementById("app").innerHTML = `
<h1>Hello Parcel!</h1>
<div>
  Look
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>
  for more info about Parcel.
</div>
`;

I tried to reference the theDate function in utils.ts...

function theDate() {
  return new Date();
}

by adding the following to index.ts:

/// <reference path="utils.ts" /> 

but I get the following error:

theDate is not defined

Isn't triple reference (TypeScript docs reference) supposed to be able to fix this issue?

Answer 1

So after another peek I think I know your culprit. Generally the triple slash is if you're looking to ref type definitions blah.d.ts or looking to throw the --out flag on compile.

I think what you're actually wanting to do in your scenario you would change your method to;

export function theDate() {
  return new Date();
}

Then where you wish to utilize it you would include an import with designation for tree shaking purposes at the top with other import declaration via;

import { theDate} from 'path/to/file/or/using/alias/to/find/utils';

Then use as expected;

BlahMethod = (something) => {

   something.value = theDate;

}

Hope this helps, cheers.