Annotate to any

function loadString() {
  return 'some string ';
}

function loadNumber() {
  return 123.456;
}

let someLegacyVariable;

someLegacyVariable = loadString();
console.log(someLegacyVariable.trim());

someLegacyVariable = loadNumber();
console.log(someLegacyVariable.toFixed(2));

Annotate to unknown

function loadString() {
  return 'some string ';
}

function loadNumber() {
  return 123.456;
}

let someLegacyVariable: unknown;

someLegacyVariable = loadString();
if (typeof someLegacyVariable === 'string') {
  console.log(someLegacyVariable.trim());
}

someLegacyVariable = loadNumber();
if (typeof someLegacyVariable = == 'number') {
  console.log(someLegacyVariable.toFixed(2));
}

Transcript

00:00

The main reason why any was added to the TypeScript type system was to allow easy migration of JavaScript code to TypeScript. For example, here we have some JavaScript code that uses zero type annotations and you can see that it works without any compiled time, TypeScript errors. Now the main reason for that is that un annotated variables in TypeScript are inferred to be any. To migrate this JavaScript to annotated TypeScript, we can simply add an explicit any annotation, and that's the quickest solution.

00:32

But here, TypeScript is not doing any handholding in the form of type checking for you. So if this JavaScript function load string returns something that is not a string, for example, an undefined, the code will blow up at runtime, and that's where the unknown type comes in handy. If you have time to do reliable refactoring of your JavaScript code, you can annotate the legacy variables as unknown, and TypeScript will warn you at each instance where you try to use the value from the variable, allowing you to add sanity checks before using it.

01:05

So if you want to use it as a string, you need to add an explicit JavaScript runtime check, for example, using the type of operator. And similarly, if you want to use it as a number, you will need to add an explicit check. So in summary, if you want a quick fix migration, use any. But if you have the time to do more reliable refactoring or are dealing with code that you don't trust fully use unknown. This might even help you understand the code a bit better.

Pro Members Only

This lesson is available if you have an active subscription.

Alternatively, some member might be able to gift it to you.

Professional TypeScript Masterclass Lessons

JavaScript to TypeScript

Subscription Required

Annotate to any

Annotate to unknown

Transcript

Professional TypeScript Masterclass