My Typescript Flashcards
(158 cards)
1
Q
How do you declare a variable with a specific type in TypeScript?
A
Use the let or const keyword followed by the variable name and a type annotation. For example:
let name: string; const age: number = 30;
2
Q
What is the syntax for defining a function with typed parameters and a return type in TypeScript?
A
Define the function with parameter types and a return type. For example:
function sum(lhs: number, rhs: number): number {
return lhs + rhs;
}
3
Q
How do you create an array of numbers in TypeScript?
A
Use square brackets with the type number. For example:
const numbers: number[] = [1, 2, 3];
4
Q
What is a tuple in TypeScript, and how do you define one?
A
A tuple is an array with a fixed number of elements of specified types. Define it using square brackets with types. For example:
let book: [string, number]; book = ["sample", 1980];
5
Q
How do you define a class with private, protected, and public properties in TypeScript?
A
Use the class keyword and specify access modifiers for each property. For example:
class Dimension {
private length: number;
protected width: number;
public height: number;
constructor(l: number, w: number, h: number) {
this.length = l;
this.width = w;
this.height = h;
}
getLength(): number {
return this.length;
}
}
6
Q
What is an interface in TypeScript, and how do you implement it in a class?
A
An interface defines a contract for object shapes. Implement it in a class using the implements keyword. For example:
interface Area {
area(): number;
}
class Rectangle implements Area {
constructor(public length: number, public width: number) {}
area(): number {
return this.length * this.width;
}
}
7
Q
How do you handle exceptions in TypeScript?
A
Use try…catch blocks to handle exceptions. For example:
try {
// code that may throw an error
} catch (e) {
console.error(`An error occurred: ${e}`);
}
8
Q
What is optional chaining in TypeScript, and how is it used?
A
Optional chaining allows safe access to nested object properties that might be null or undefined. Use the ?. operator. For example:
console.log(result?.pii?.age);
9
Q
How do you define a generic function in TypeScript?
A
Use angle brackets to specify a generic type parameter. For example:
function getFirst<T>(arr: T[]): T | undefined {
return arr.length > 0 ? arr[0] : undefined;
}
10
Q
What is the purpose of utility types like Pick and Omit in TypeScript?
A
Utility types allow you to create new types by selecting or omitting properties from existing types. For example:
interface UserForm {
email: string;
password: string;
phoneNumber?: string;
}
type LoginForm = Pick<UserForm, "email" | "password">;
type ContactForm = Omit<UserForm, "password">;
11
Q
What is type assertion in TypeScript, and how is it used?
A
Type assertion tells the compiler to treat a variable as a specific type. Use as or angle bracket syntax. For example:
let someValue: any = "Hello, world!"; let strLength: number = (someValue as string).length;
12
Q
What are union types in TypeScript?
A
Union types allow a variable to hold one of several types. Use the | symbol. For example:
let value: string | number; value = "hello"; value = 42;
13
Q
How do you create a Readonly object in TypeScript?
A
Use the Readonly utility type to make all properties of an object immutable. For example:
interface User {
name: string;
age: number;
}
const user: Readonly<User> = { name: "John", age: 30 };
// user.name = "Jane"; // Error: Cannot assign to 'name'
14
Q
How do enums work in TypeScript?
A
Enums define a set of named constants. Use enum. For example:
enum Color {
Red,
Green,
Blue,
}
let c: Color = Color.Green;
15
Q
What is a mapped type in TypeScript?
A
Mapped types create new types by transforming properties of an existing type. For example:
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
16
Q
What are type guards in TypeScript?
A
Type guards are functions or constructs that allow you to narrow types during runtime checks. For example:
function isString(value: any): value is string {
return typeof value === "string";
}
17
Q
What is the never type in TypeScript?
A
The never type represents values that never occur, often used in unreachable code. For example:
function throwError(message: string): never {
throw new Error(message);
}
18
Q
How can you mark a function parameter as optional in TypeScript?
A
Add a ? after the parameter name. Example: function greet(name?: string) {}
19
Q
What is the benefit of using optional parameters in TypeScript?
A
It allows functions to be called without providing all arguments, preventing unnecessary TypeScript errors.
20
Q
If we’d like to be explicit about what type a function returns, how can we do this with type script?
A
We can add an explicit type annotation after its closing parenthesis.
21
Q
Why does TypeScript infer boolean[] instead of a fixed-length tuple like [boolean, boolean, boolean] for an array initialized as \[true, false, false]?
A
boolean[] is less restrictive, allowing for the addition of more boolean elements to the array.
21
Q
How does TypeScript infer the type of a new array created using the .concat() method with a tuple and another array?
A
TypeScript infers the result as a standard array of the combined element types, not a tuple.
22
Q
How do you define an array of tuples?
A
You define an array of tuples in TypeScript by specifying an array ([]) where each element within that array conforms to a specific tuple type. The tuple type itself is defined by enclosing the types of its elements in square brackets [].
let arrayOfTuples: [Type1, Type2, ...][] = [/* ... array of [Type1, Type2, ...] elements ... */];
23
Q
How does TypeScript’s spread syntax interact effectively with tuples, and in what scenario is this particularly useful?
A
TypeScript’s spread syntax (…) can be used to pass the elements of a tuple as individual arguments to a function. This is most useful for function calls that expect a specific number and type of arguments, perfectly matching the structure of a tuple.
24
Provide the general syntax demonstrating how TypeScript's spread syntax can be used to pass the elements of a tuple as arguments to a function.
**Tuple Definition:**
```
let myTuple: [Type1, Type2, Type3] = [value1, value2, value3];
```
**Function Definition:**
```
function myFunction(arg1: Type1, arg2: Type2, arg3: Type3): void {
// Function body using arg1, arg2, arg3
console.log(arg1, arg2, arg3);
}
```
**Using Spread Syntax with Tuple in Function Call:**
```
myFunction(...myTuple);
```
25
Which of the following function calls will produce a Type Error for this function?
```
const range = (...myData: number[]) => {
myData.sort();
return myData[myData.length - 1] - myData[0];
}
```
A) range([3, 7, 5]);
B) range();
C) range(1);
D) range(3, 7, 5);
A:
✅ A) range([3, 7, 5]);
This produces a Type Error because it passes an array, but the function expects individual numbers due to the rest parameter (...myData: number[]). The other calls are valid.
26
What does the rest parameter syntax (...paramName) do in a function signature?
It gathers zero or more arguments passed to the function into a single array named paramName.
27
How do you specify the type of elements collected by a rest parameter in TypeScript (e.g. for numbers)?
You add an array type annotation after the parameter name: ...myNumbers: **number[]**. This means each individual argument passed must be compatible with number.
28
Why does calling range([1
2
29
Does calling range() cause a type error for const range = (...nums: number[]) => { ... }? Why or why not?
No type error. Rest parameters explicitly allow zero arguments. nums simply becomes an empty array []. (It might cause a runtime error inside the function if it tries to access elements like nums[0]).
30
What is the main purpose of using generic types (like Array) in TypeScript?
To create reusable components (types, functions, classes) that can work with multiple different types while maintaining type safety. T acts as a placeholder for a specific type.
31
What are the two equivalent ways to declare a variable as an array of strings in TypeScript?
1. Generic syntax: **Array**
2. Shorthand syntax: **string[]**
They mean the exact same thing.
2. Shorthand syntax: **string[]**
They mean the exact same thing.
32
What is a key benefit of explicitly typing an array (e.g., let names: string[] = [...])?
Type Safety: TypeScript checks at compile time that only elements of the specified type (string in this case) are added, and knows the type of elements retrieved. Also improves readability.
33
What does the type any[] signify?
It represents an array ([]) where the elements within it can be of any type (any). It doesn't restrict element types or their order (beyond being in an array).
34
What is an enum in TypeScript?
A special type used to define a set of named constant values.
35
Why use enums in TypeScript?
To restrict a variable to only a limited set of possible values.
36
What does the following code define? `enum Direction { North, South, East, West }`
An enum named Direction with four possible values: North, South, East, and West.
37
What is the correct way to reference the West value of the Direction enum?
Direction.West
38
What is the numeric value of `Direction.East` in `enum Direction { North, South, East, West }`?
2
39
Can you assign a number directly to a variable of an enum type?
Yes. Numbers can be directly assigned since enum values are numbers under the hood.
40
What happens if you assign `whichWayToArcticOcean = 2` when using `enum Direction`?
It is valid and sets the variable to Direction.East, since East is 2.
41
How can you change the starting number for enum values?
By assigning a value to the first member, like `enum Direction { North = 7, ... }`
42
What are the values of `Direction` in `enum Direction { North = 7, South, East, West }`?
North = 7, South = 8, East = 9, West = 10
43
Can you manually assign all numeric values in a TypeScript enum?
Yes. For example: `enum Direction { North = 8, South = 2, East = 6, West = 4 }`
44
How does TypeScript store enum values under the hood?
As numbers corresponding to their declaration order or assigned values.
45
Can enum types be used in type annotations like other types?
Yes. For example: `let dir: Direction;`
46
What are the two types of enums in TypeScript?
Numeric enums and string enums.
47
What is a numeric enum in TypeScript?
An enum where members are assigned auto-incrementing numbers.
48
What is a string enum in TypeScript?
An enum where members are explicitly assigned string values.
49
How are string enums declared in TypeScript?
`enum Direction { North = 'NORTH', South = 'SOUTH', ... }`
50
Can numeric enums be auto-assigned?
Yes, numeric values are auto-incremented starting from 0 unless specified otherwise.
51
Can string enums be auto-assigned?
No, all string values must be explicitly assigned.
52
Why is it better to use strings like North = 'NORTH' instead of random strings in string enums?
It improves readability and makes error messages and logs more informative.
53
Can you assign a number directly to a numeric enum variable?
Yes, even arbitrary numbers like `943205` will not throw a TypeScript error.
54
What is a risk of using numeric enums?
Bugs can sneak in because any number can be assigned without error.
55
Can you assign a string directly to a string enum variable?
No, this will cause a TypeScript type error.
56
How must a string enum value be assigned?
Only using the enum itself, e.g., `DirectionString.South`.
57
Which enum type is stricter: string or numeric?
String enums are stricter.
58
Which enum type is more recommended in TypeScript?
String enums, because they prevent unintended assignments and are more readable.
59
What is a type alias in TypeScript?
A custom name for any type, defined using the `type` keyword.
60
How do you define a type alias?
Using the format: `type AliasName = Type;`
61
What is the benefit of using type aliases?
They reduce repetition and improve code readability, especially for complex types.
62
Can you use a type alias with primitive types?
Yes, e.g., `type MyString = string;`
63
What is a more practical use case for type aliases?
Defining aliases for object types or tuples used repeatedly in code.
64
What is an example of a useful type alias for a person object?
`type Person = { name: string, age: number };`
65
How can type aliases reduce duplication in object definitions?
By reusing the alias instead of rewriting the full object shape every time.
66
Do type aliases change how TypeScript types behave?
No. Aliases are just alternate names and don’t create new types.
67
Are `type MyString = string` and `type MyOtherString = string` considered different types?
No, they are treated as the same type since both alias `string`.
68
Can variables of different aliases based on the same type be assigned to each other?
Yes, because they point to the same base type.
69
What is the key takeaway about type aliases?
They simplify your code but do not affect type behavior at all.
70
What is a function type in TypeScript?
A type that specifies the argument types and return type of a function.
71
How do you define a function type that takes two strings and returns a number?
```type StringsToNumberFunction = (arg0: string, arg1: string) => number;```
72
Can parameter names be different when assigning functions to a function type?
Yes, only the **types** matter, not the **names** of the parameters.
73
Can you omit parameter names or parentheses in function type annotations?
No. You must include both parameter names and parentheses, even for one parameter.
74
What is the correct format for a function type with one string parameter and number return?
`(arg: string) => number`
75
What is a practical use case for function types in TypeScript?
Typing **callback functions** for higher-order functions or event handlers.
76
Can you assign different functions to the same function-typed variable?
Yes, as long as they match the expected parameter and return types.
77
Which TypeScript enum definition is INVALID?
A) enum Status { Open, Closed };
B) enum Status { Open = true, Closed = false };
C) enum Status { Open = 1, Closed = 0 };
D) enum Status { Open = 'OPENED', Closed = 'CLOSED' };
Answer: B) enum Status { Open = true, Closed = false };
Why: TypeScript enum members must be initialized with a number or string literal (or constant). Boolean literals (true/false) are not allowed directly.
(A, C = numeric enums; D = string enum - all valid in TS)
78
What does typeof someValue do when used in a TypeScript type alias (e.g., type MyType = typeof someValue;)?
It infers and creates a type that perfectly describes the structure (property names and their types) of the actual someValue provided. It lets TypeScript automatically derive a type from existing data.
79
Why use typeof someValue for creating a type alias in TypeScript, like
```
type Restaurant = typeof restaurants[0];?
```
- Accuracy: Type is derived directly from data.
- Conciseness: Shorter than manual type definition.
- Maintainability: Type updates automatically if the data structure (restaurants[0]) changes. (Single Source of Truth).
80
In TypeScript,
```
type MyType = typeof existingObject;
```
is like...
...asking TypeScript to automatically create a detailed blueprint (the type MyType) based on an existing example building (the existingObject). The blueprint will match the building perfectly.
81
Enums are "kinda like defining key-value pairs (like an object)" AND provide what major benefit?
Type Safety.
They provide named constants (key-like names for values) AND create a distinct type that restricts variables/parameters to ONLY values from that defined set.
82
What is type narrowing in TypeScript?
It's the process where TypeScript refines a union type to a more specific type based on conditions like type guards.
83
What does a type guard do in TypeScript?
A type guard checks the type of a variable at runtime to allow for type-specific logic.
84
How does TypeScript narrow a type inside a type guard?
By using conditions like `typeof`, TypeScript determines the more specific type. Example:
```
if (typeof margin === 'string') { ... }
```
85
Why would you use a type guard with a union type?
To allow TypeScript to distinguish between types like `string`
86
What happens if you call a method like `.toLowerCase()` on a union type for *string | number* outside a type guard?
TypeScript throws an error because `.toLowerCase()` is not valid on `number`.
87
What is an example of narrowing a union type in a function?
```
function getMarginLeft(margin: string | number) {
if (typeof margin === 'string') {
return margin.toLowerCase();
}
}
88
Why is type narrowing useful in TypeScript?
It lets us use flexible union types while still writing type-safe, type-specific logic.
89
What kind of condition is commonly used for type narrowing?
typeof checks, like typeof margin === 'string', are commonly used to narrow types.
90
What does TypeScript infer if a function can return multiple types?
It infers a union type representing all possible return types.
91
What is an inferred union return type in TypeScript?
It's when TypeScript automatically determines a function returns a union of types, based on its logic.
92
When does TypeScript infer a function's return type as a union?
When the function can return different types in different situations, like success vs. error cases.
93
Do you need to manually define the return type for functions with union returns in TypeScript?
No, TypeScript can usually infer it automatically.
94
Why is inferred union return type useful?
It reduces boilerplate and still maintains strong type safety.
95
How can you type an array that contains both strings and numbers in TypeScript?
Use a union inside parentheses with array notation: (string | number)[]
96
What happens if you omit the parentheses when typing a union array like string | number[]?
If we left out the parentheses and wrote string | number[], that type would allow *strings* or *arrays of only numbers*.
97
Example of a correctly typed union array of strings and numbers
```
const timesList: (string | number)[] = [dateNumber, dateString];
```
98
What happens when you access a method not shared by all union types?
TypeScript throws an error because it only allows access to common members.
99
Why can batteryStatus.toString() be called without error in
```
const batteryStatus: boolean | number = false;
```
You can call batteryStatus.toString() without error because the toString() method is a common method available on both boolean and number types (and indeed, on almost all JavaScript types).
100
What rule does TypeScript follow for property access in union types?
It only allows access to properties that all union members share.
101
What is a type guard in TypeScript?
A conditional statement that checks if a variable is a specific type.
102
What operator can be used to implement a type guard in TypeScript?
The `typeof` operator.
103
What happens inside a typeof check like `typeof date === 'string'`?
TypeScript infers that the variable is specifically a string within the block.
104
What types can TypeScript recognize in a typeof type guard?
'string', 'number', 'boolean', and 'symbol'.
105
How does TypeScript infer narrowed types with a typeof check?
It evaluates what the code would do at runtime and narrows the type accordingly.
106
What does the `in` operator do in TypeScript type guards?
It checks if a property exists on an object or in its prototype chain.
107
When is the `in` operator especially useful?
When we want to check if a specific method or property exists on a custom type.
Example:
```
type Tennis = { serve: () => void };
type Soccer = { kick: () => void };
function play(sport: Tennis | Soccer) {
if ('serve' in sport) {
sport.serve(); // sport is now narrowed to Tennis
}
}
```
108
How does TypeScript respond when the `in` operator confirms a property exists?
It narrows the variable’s type to the one containing that property.
109
What does TypeScript infer inside the `else` block of a type guard?
It infers the opposite type of the `if` check, based on the union type.
110
How does TypeScript treat `else` in a type narrowing scenario?
TypeScript narrows the type in `else` to exclude the type checked in the `if`.
111
Can TypeScript narrow types after a return statement in a type guard?
Yes if there's a return inside the type guard
e.g.
```
type Tea = {
steep: () => string;
}
type Coffee = {
pourOver: () => string;
}
function brew(beverage: Coffee | Tea) {
if ('steep' in beverage) {
return beverage.steep();
}
return beverage.pourOver();
}
```
112
What is type narrowing in TypeScript?
It's TypeScript's ability to infer more specific types based on how code executes at runtime.
113
What is a type guard in TypeScript?
An expression that checks if a variable is a specific type, helping TypeScript narrow the type.
114
What operator is commonly used to check primitive types in type guards?
The `typeof` operator.
115
What types can `typeof` check for in TypeScript?
'string', 'number', 'boolean', and 'symbol'.
116
What operator helps check if a property exists on an object in a type guard?
The `in` operator.
117
When is the `in` operator especially helpful?
When checking if a specific property exists on an object, especially with custom types.
118
Can TypeScript narrow types inside an `else` block?
Yes, it assumes the `else` block is the inverse of the `if` condition.
119
Does TypeScript need an `else` block to narrow a type?
No, TypeScript can narrow after a return or terminal statement inside a type guard.
120
How is interface syntax different from type syntax?
Interface does not use an equals sign before the typed object
121
What is a major similarity between type and interface?
Both can be used to define object shapes and enforce them at compile time
122
Can interface be used to define primitive types?
No because interface can only be used to type objects
123
What is one reason to use interface over type?
Interface helps enforce more consistent object oriented code by only allowing object types
124
Why might type be considered more versatile than interface?
Because type can define objects, primitives, unions, intersections, and more
125
Why is interface a good match for classes?
Because interface is limited to object types which makes it ideal for typing object oriented class structures
126
What happens if a class implements an interface but doesn't define one of its methods?
TypeScript will raise a compile time error
127
Can a class that implements an interface also have its own additional methods?
Yes as long as it also defines all required methods from the interface
128
What is required when a class implements an interface?
The class must implement all the methods and properties defined in the interface
129
What does a deep type in TypeScript allow you to describe
A structure with objects that have nested properties and methods
130
How do you define a nested object inside an interface?
By nesting object types inside other object types like this
```
interface Robot {
about: {
general: {
id: number
name: string
}
}
getRobotId: () => string
}
```
131
How do you type the constructor parameter for deep typing in a class?
You provide an object with the nested shape like this
```
constructor(props: { general: { id: number name: string } }) {
this.about = props
}
```
132
What is the purpose of deep types
To describe and enforce the shape of complex structured data
133
What is a potential downside of deeply nested interfaces in TypeScript?
They can become hard to read and maintain.
134
Why might we want to access a nested part of an interface independently?
To reuse it in other parts of the program without pulling in unrelated structure.
135
How can we make large deeply nested interfaces more manageable?
By composing them from smaller, reusable interfaces.
136
How do you rewrite this interface using composition?
```
interface About {
general: {
id: number;
name: string;
version: {
versionNumber: number;
}
}
}
```
```
interface About {
general: General;
}
interface General {
id: number;
name: string;
version: Version;
}
interface Version {
versionNumber: number;
}
```
137
138
What keyword allows you to copy all type members from one interface to another in TypeScript?
extends
139
What does the extends keyword do in a TypeScript interface?
It copies all type members from another interface into the current one.
140
Why is extends useful when creating multiple interfaces?
It helps abstract out shared members into a common interface for better organization and reusability.
141
Given this code:
```
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
```
What properties must a variable of type Square include?
Both sideLength (number) and color (string)
142
What is an index signature in TypeScript?
A way to define an object type when you don't know the exact property names but know the types of the keys and values.
143
What is the syntax for an index signature with string keys and boolean values?
````
Interface Propertys {
[key: string]: boolean
}
```
144
When would you use an index signature?
When the object has unknown keys at compile-time but known key and value types, such as data returned from an API.
145
How do you mark a property as optional in a TypeScript interface?
With a question mark `?` after the property name and before the colon (e.g.
146
What does the `?` operator mean in a TypeScript type definition?
It indicates that the property is optional.
147
What should you do before using an optional property?
Add a conditional check to ensure it exists.
148
How would you define an interface with a required **name** and an optional **size**?
```
interface OptionsType {
name: string;
size?: string;
}
```
149
How do you make `document.querySelector` return a specific HTML element type (e.g., `HTMLDivElement`) AND assert it's not `null`?
Use a generic type argument and the non-null assertion operator (`!`). Example: `const el = document.querySelector('.my-class')!;`
150
What's the effect of `!` (non-null assertion operator) after an expression like `document.querySelector(...)!`?
It tells TypeScript: "I guarantee this expression will not be `null` or `undefined`." This changes the type from `Type | null` to just `Type`.
151
How do you specify the type of elements within the `NodeList` returned by `document.querySelectorAll` (e.g., to `HTMLElement`)?
Use a generic type argument. Example: `const elements = document.querySelectorAll('.category');` This makes it a `NodeListOf`.
152
What's the TypeScript best practice for defining the type of a function parameter (e.g., `targetCategory` which could be an `HTMLElement` or `null`)?
Explicitly type it in the function signature. Example: `function myFunc(targetCategory: HTMLElement | null) { /* ... */ }`
153
How do you safely operate on a potentially nullable variable (e.g., `movementTimer: number | null`) before passing it to a function that expects a non-null type (like `clearTimeout`)?
Use a type guard (an `if` check). Example: `if (movementTimer !== null) { clearTimeout(movementTimer); }`
154
What TypeScript type represents the object returned by `element.getBoundingClientRect()`?
`DOMRect` (or `DOMRectReadOnly`). Example: `const rect: DOMRect = element.getBoundingClientRect();`
155
When should you use the non-null assertion operator (`!`) versus an `if` check (type guard)?
Use `!` when you, as the developer, are *certain* an element will exist at runtime (e.g., core page structure). Use an `if` check when an element might legitimately be missing and the code needs to handle that possibility gracefully.
156
157
How do you correctly type GSAP objects (e.g., timelines, tweens) in TypeScript, and what are the necessary steps involved?
1. **Install Type Definitions:** First, you need to provide TypeScript with information about GSAP's structure. Install the type definitions package using npm or yarn:
```
npm install --save-dev @types/gsap
```
This allows TypeScript to recognize GSAP's API.
2. **Use GSAP Types:** Once installed, you can use the types provided by `@types/gsap`, typically found under the `gsap.core` namespace.
Examples:
```
let myTimeline: gsap.core.Timeline;
```
```
let myTween: gsap.core.Tween | null = null;
```
```
let generalAnimation: gsap.core.Animation;
```
