Category: TypeScript

Sometimes, we want to declare the type of ‘this’ in a TypeScript function.

In this article, we’ll look at how to declare the type of ‘this’ in a TypeScript function.

How to declare the type of ‘this’ in a TypeScript function?

To declare the type of ‘this’ in a TypeScript function, we can add the fake this parameter in our functions.

For instance, we write

class Handler {
  info: string;

  onClick(this: Handler, e: Event) {
    this.info = e.message;
  }
}

const h = new Handler();

to add the this parameter into onClick and set it to type Handler.

The parameter will be discarded after it’s compiled.

But it’ll let the TypeScript compiler check for valid properties for this.

Conclusion

To declare the type of ‘this’ in a TypeScript function, we can add the fake this parameter in our functions.

Sometimes, we want to set the TypeScript definitions for all projects files.

In this article, we’ll look at how to set the TypeScript definitions for all projects files.

How to set the TypeScript definitions for all projects files?

To set the TypeScript definitions for all projects files, we can add entries to the compilerOptions.lib property in tsconfig.json.

For instance, we write

{
  //...
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "lib": ["es5", "es2015.promise", "dom"]
  },
  "include": ["src/**/*.ts"]
  //...
}

to add the compilerOptions.lib option and set it to ["es5", "es2015.promise", "dom"] into tsconfig.json

This will make all the variables provided by the browser and the JavaScript core library of the given versions available in our projects.

Conclusion

To set the TypeScript definitions for all projects files, we can add entries to the compilerOptions.lib property in tsconfig.json.

Sometimes, we want to iterate over interface properties in TypeScript.

In this article, we’ll look at how to iterate over interface properties in TypeScript.

How to iterate over interface properties in TypeScript?

To iterate over interface properties in TypeScript, we can use the Object.keys method.

For instance, we write

const Activity = {
  id: "",
  title: "",
  body: "",
  json: {},
};

type Activity = typeof Activity;
const headers: Array<Object> = Object.keys(Activity).map((key) => {
  return { text: key, value: key };
});

to define the Activity object.

Then we call Object.keys with Activity to return an array of non-inherited keys in Activity.

And then we call map with a callback that maps each key to the values we want.

We set headers to type Array<Object> so that the TypeScript compiler knows that headers is an array of objects.

Conclusion

To iterate over interface properties in TypeScript, we can use the Object.keys method.

Sometimes, we want to define optional constructor arguments with defaults in TypeScript.

In this article, we’ll look at how to define optional constructor arguments with defaults in TypeScript.

How to define optional constructor arguments with defaults in TypeScript?

To define optional constructor arguments with defaults in TypeScript, we can set default values for constructor parameters.

For instance, we write

export class Test {
  constructor(private foo: string = "foo", private bar: string = "bar") {}
}

We set foo‘s default value to 'foo' and bar‘s default value to 'bar' in the Test class.

Conclusion

To define optional constructor arguments with defaults in TypeScript, we can set default values for constructor parameters.

To fix the ‘SyntaxError: Cannot use import statement outside a module’ with Jest, we need to tell Jest to transpile ES6 modules before we can use them.

To do this, we write

{
  //...
  "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-(native|universal|navigation)-(.*)|@react-native-community/(.*)|@react-navigation/(.*)|bs-platform|(@[a-zA-Z]+/)?(bs|reason|rescript)-(.*)+)"
    ]
  }
  //...
}

in our Jest config.

We set transformIgnorePatterns to an array with the pattern of the module names that we want to transform before we run our tests.

Then Jest will transform the modules into something it can use.