Model of the TypeScript Interview Questions in 2021

If you are looking for job as Typescript developer then this article and typescript interview questions are very important for you. As every day, Frontend interviews get extremely hard. Good preparation is important. As the demand for TypeScript grows by the day, it is a topic that will definitely come up in your interview.

This article captures an interview with TypeScript. You can use it to test your TypeScript knowledge even if you are not looking for a new job. Before any discussion, Let’s divide the interview into two parts:

Part 1:– 5 TypeScript interview questions
Part 2:– 6 live coding exercises

Also Read: Express and Node JS Interview Questions & Answers

Table of Contents

TypeScript interview questions and Answers

These TypeScript interview questions and answers are only a workout, before the live coding, an initial kick-off discussion.

Que1. What’s the difference between TypeScript and JavaScript?

Typescript is a Javascript Basic structure. This helps to ensure that all code running on Javascript can run on some other features of TypeScript+. However, browsers do not understand the Typescript language, which must be transpired into JavaScript.

JavaScript is typed weakly, while Typescript is typed strongly.

Que2. What are the benefits of TypeScript?

There a many benefits to using Typescript:

Type checking makes your code safer.
Type checking makes your code more readable.
As it’s optionally typed you can disable typing for some edge scenarios or third-party libraries.
Works for all your existing JavaScript.
Babel.
Catches most of the null check bugs.

Que3. How do you configure TypeScript to be Strict?

TypeScript strict mode can be enabled by adding strict: true to compiler options in the ts-config.json file.

Turning strict: true turns all of these flags to true:

strictNullChecks
noImplicitAny
noImplicitThis
alwaysStrict

Que4. What makes TypeScript optionally typed?

There are three simple ways to make TypeScript optionally typed. They should be used in only edge cases:

Using the any keyword — you’re telling the compiler that this variable will accept any type.
@ts-ignore this will suppress errors on next-line


if (false) {
  // @ts-ignore: Unreachable code error
  console.log("hello");
}

if (false) {

// @ts-ignore: Unreachable code error

console.log("hello");

}

@ts-expect-error similar to @ts-ignore but will throw an error if it’s not necessary.

Que5. What is the TypeScript Declare keyword?

Declare is used to tell the compiler about something declared on another piece of the code. That is particularly useful when using third-party libraries. It also tells the compiler not to include this code when TypeScript is transpiled.



interface Interface {
  run: () => void;
}
declare let plugin: Interface;

interface Interface {

run: () => void;

}

declare let plugin: Interface;

Check the TypeScript playground here to see the code output is none for plugin.

Coding Life Exercises

Give yourself 25 minutes to solve all of the six exercises for a proper experiments. Set a timer to make sure that it doesn’t disturb you. Each exercise will have a link to a playground with TypeScript where you can practise on it. Before coding, make sure you understand what you’re asked to do.

Task 1

Given the following interface:


interface Point3D {
  a: number;
  b: number;
  c: number;
}

interface Point3D {

a: number;

b: number;

c: number;

}

How do you make an interface Point2D that’s equivalent to Point3D but without have the c attribute?

TypeScript playground here.

Task 2

Given the previous Point3D interface and this function:


interface Point3D {
  a: number;
  b: number;
  c: number;
}function rotateX(a: number, offset: number) {
  return a + offset;
}

interface Point3D {

a: number;

b: number;

c: number;

}function rotateX(a: number, offset: number) {

return a + offset;

}

How can you ensure that the function arguments relies on the type of Point3D member x instead of using number so that if the Point3D member x type is changed, the function argument types are changed as well?

Playground available here.

Task 3

Given the following function and its three different invokes:


// how you make this function accept any type wihout using any or unkownfunction fun(variable: string) {
  return variable;
}const result1 = fun('string');
const result2 = fun(true);
const result3 = fun(new Date());

// how you make this function accept any type wihout using any or unkownfunction fun(variable: string) {

return variable;

}const result1 = fun('string');

const result2 = fun(true);

const result3 = fun(new Date());

How can you make the function work for all three different types and for any other type?

Playground available here.

Task 4

How would you prevent the previously seen function from being executed with an array type?


function fun&lt;T>(variable: T) {
  return variable;
}const result1 = fun('string');
const result2 = fun(true);
const result3 = fun(new Date());
const result4 = fun(['one','two','three']); // should fail here

function fun<T>(variable: T) {

return variable;

}const result1 = fun('string');

const result2 = fun(true);

const result3 = fun(new Date());

const result4 = fun(['one','two','three']); // should fail here

Playground available here.

Task 5


const items = ['string', true, new Date()];const firstItem = items[0];

const items = ['string', true, new Date()];const firstItem = items[0];

Can you guess the firsItem variable by looking at the above code?

If the type is not precise how can you make sure it does match the array index type?

Playground here.

Task 6

Let’s try one that is actually more complex:

test6.ts



interface Animal {
    age: number;
}

interface Dog extends Animal {
    cuddle: () => void;
}

interface Cat extends Animal {
    sleep: () => void;
}

// how would you fix this method?
function performAction(animal: Dog | Cat) {
    if (/** */) {
        animal.cuddle();
    }

    if (/** */) {
        animal.sleep();
    }
}

interface Animal {

age: number;

}

interface Dog extends Animal {

cuddle: () => void;

}

interface Cat extends Animal {

sleep: () => void;

}

// how would you fix this method?

function performAction(animal: Dog | Cat) {

if (/** */) {

animal.cuddle();

}

if (/** */) {

animal.sleep();

}

How can we fix the above code so that by adding a condition to the if statement the right Type Dog or Cat is deducted by the TypeScript compiler? You can change the Animal, Dog, and Cat interfaces for this one.

TypeScript playground here.

Conclusion:

Let me know if you find the test too easy or too complex and if you have tried other ways of solving the exercises.

Interviews can be very difficult and frustrating. It is important that you should not get stressed and try to understand everything you are asking for. You’ll be well prepared by performing coding exercises like those above.

Pradeep Maurya

Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co