The Basics Flashcards
1
Q
Using template literals, how do you output to console hello math if math is stored in a myName const?
A
const name = "math";
console.log(`Hello ${name}`);
2
Q
Write a fully typed function called add that takes 2 parameters a and b and return the result of a + b
A
function add(a: number, b: number): number {
return a + b;
}
3
Q
Using the arrow function notation write a fully typed function called add that takes 2 parameters a and b and return the result of a + b. The function has to be specific to the number type.
A
const add = (a: number, b: number): number => a + b;
4
Q
Can a function be assigned to a const ?
A
Yes. For example:
const add = function (a: number, b: number): number {
return a + b;
};
5
Q
Are function parameters required by default in Typescript ? Is it possible to call a function with 2 parameters with 1 or no parameter at all?
A
Yes they are required.
You can’t call a function with parameters without specifying any parameters.
For instance, calling :
function add(a: number, b: number) {
return a + b;
}
With :
add(3) // a single parameter we are missing b...
//Will raise an error.
6
Q
How can we make a parameter optional in Typescript?
A
By adding ? after the parameter. For example:
function doSomething(a: number, b?: number): number {
//logic. We need to handle the fact that b might or might not be provided...
}
7
Q
What is the value of an optional parameter in Typescript when it’s not provided?
A
undefined
8
Q
What is the nullish coalescing operator ?
A
??
9
Q
What happens to Typescript types at runtime?
A
They don’t exist…
10
Q
In Typescript what will be the type of:
let today = new Date(2023-01-01);
A
The type will be Date. This is a Typescript specific type that doesn’t exist in Javascript. In Javascript the type of today would be object.
11
Q
What is the type of name in:
const name = “math”;
A
The type will be ‘math’ because Ts infers that this is a string constant… There is only one possible value and this is called a string literal type.
12
Q
What is the type days in:
const days = 31;
A
31 a number literal
13
Q
What is the type of today in:
const today = new Date(2023-01-01);
A
The type is Date a Typescript specific type.
14
Q
What will be the type of nameAgain in:const name = "math";const nameAgain = last;
A
The type will be ‘math’ a string literal.
15
Q
What will be the type of nameAgain in:
const name = "math"; let nameAgain = name;
A
The type will be ‘math’ a string literal.
16
Q
What will be the type of ourName in :
const myName = "math";
const yourName = "samantha";
const ourNames = `${myName} ${yourName}`;
A
The type of ourNames will be string.
17
Q
What is the type of count in:
let count;
count = 10;
A
Any
18
Q
What is the type of result in:
function addTwo(a) {
return a + 2;
}
const result = addTwo(4);
A
any
19
Q
What is the type of result in:
function addTwo(a =1) {
return a + 2;
}
const result = addTwo(4);
A
number
20
Q
What is the type of result in:
let result;
A
any
21
Q
Will this yield any error?
If not what will be the type of result?
let result; result = "Math"; result = 18; result = true; result = new Date(2023, 1, 1);
A
No error. The type is any
22
Q
What does the type:
{ [field: string]: any }
means ?
A
It’s an object whose property names are of type string, with property values of type any.
23
Q
What kind of type checking those Typescript do on the any type?
A
None
24
Q
What is the type void?
A
The void type represents a function’s return type when it doesn’t return any data.
25
What are the type(s) that void can be?
undefined or null if the strictNullChecks compiler option is off.
26
Will this raise an error?
`const items = [];`
`items.push(1);`
`items.push("two");`
`items.push(false); `
`console.log(items);`
No. items is of type any.
27
Will this raise an error?
```
const items: Array = [];
items.push(1);
items.push("two");
items.push(false);
```
Yes. The type of items is number trying to push a string "two" and a boolean false is not allowed.
28
Declare a const called items and assign it a generic array of numbers and set its content to 1,2,3 at initialisation. Do not use number[];
```
const items: Array = [1,2,3];
```
29
Use the square bracket notation to create a const variable called items that is assigned to an array of strings containing "one", "two", and "three".
`const items : string[] = ["one", "two", "three"];`
30
What will be the type of array?
```
const array = [1, 2, 3];
console.log(array);
```
number[]
31
What is items and what is items type in this sample?
```
function logItems(name, ...items) {
console.log(name, items);
}
```
items is an array of type any. This type of parameter preceded by ... is called a rest parameter.
32
What is a tuple?
A tuple can be thought of as an array with a fixed number of elements.
33
Do tuple exist in Javascript ?
The tuple type doesn't exist in JavaScript. The closest we have are arrays, but there is no way of enforcing the number of elements and each element's type.
34
Is this a tuple? What's the type inferred ?
```
const score = ["Math", 95];
```
No, the type is:
```
(string | number)[]
```
So, the array can hold more than two elements
35
How can we modify this code sample to make sure we have a tuple of with a string and number?
`const score = ["Math", 95];`
`const score: [string,number] = ["Math", 95];`
36
Add a label name and score on this tuple:
```
const score: [string, number] = ["Math", 95];
```
```
const score: [name:string, score:number] = ["Math", 95];
```
37
Declare a tuple const named score with 2 labeled elements. The name element which should be a string and the score element which should be a number. Assign it the values "Math" and 95
```
const score: [name:string, score:number] = ["Math", 95];
```
38
Create an open ended tuple called myNumbers taking a string called name and an unlimited number of numbers called numbers and assing "Math" to name and the numbers: 95,65,89 to numbers...
```
const myNumbers: [name:string, ...numbers:number[]] = ["Math", 95,65,89];
//...number[] is a rest element.
```
39
What is the type returned in the following function?
```
const keepGoing = (message: string) => {
while (true) {
console.log(message);
}
};
```
The return type is never because this function never returns. That's why it's not returning void.
40
Name a common use for the never type?
To flag region of code that should never be reached. For instance, using this kind of function:
`function unreacheable(never: never) {}`
Typescript will raise an error if it detects that this code can be reached.
41
Create a function called unreachable that takes in a parameter of type never called never.
`function unreacheable(never: never) {}`
42
Will this function raise an error:
```
function add(a: unknown, b: unknown) {
return a + b;
}
```
Yes. Variables of type unknown can't be added together.
43
Modifiy the **body** of this function **not its signature** so that we check that a and b are numbers and add them or return 0 if they are not numbers.
```
function add(a: unknown, b: unknown) {
return a + b;
}
```
function add(a: unknown, b: unknown) {
if (typeof a === "number" && typeof b === "number") {
return a + b;
}
return 0;
}
44
In the following function what are the type of a and b on the line:
`return a + b; ?`
```
function add(a: unknown, b: unknown) {
if (typeof a === "number" && typeof b === "number") {
return a + b;
}
return 0;
}
```
number
45
What are type guard?
The type guard allows TypeScript to adjust the types of unknown to some other type it can work with.
You can't operate directly on variables of type unknown. We have to give TypeScript information to narrow the type so that it can be used.
46
Will Typescript detect a problem with this code? If so what is the problem?
`const today = new Date();`
`console.log(today.getWeekDay());`
The Date constructor can be called with no parameters but the Date type doesn't contain a getWeekDay method.
47
What is the return type of this function:
```
function logMessage(message: string) {
return console.log(message);
}
```
void
48
What are correct type annotations for creating an array of dates?
`1. date[]`
`2. Array`
`3. Date[]`
`4. Array`
The correct answers are:
`3. Date[]`
`4. Array`
49
What will TypeScript infer the type of the people variable to be in the declaration below?
`let people = ["Paula", "Bob", "Sam"];`
string[]
50
How can we strongly-type the messages rest parameter so that only string types can be passed?
```
function outputMessages(...messages) {
messages.forEach(message => console.log(message));
}
```
function outputMessages(...messages**: string[]**) {
messages.forEach(message => console.log(message));
}
51
The following function calls a thirdPartyCalculation method that returns any. Modify this function to use the unknown type and add a type guard to narrow down the type of result to number and return the result. Return undefined if the result is not a number.
```
function doWork() {
const result = thirdPartyCalculation();
return result + 1;
}
```
```
function doWork() {
const result: unknown = thirdPartyCalculation();
if (typeof result === "number") {
return result + 1;
}
return undefined;
}
```
52
What is the type of the invalid variable in the function below?
```
function outputMessage(message: string) {
if (typeof message === "string") {
console.log(message);
} else {
let invalid = message;
console.error(invalid);
}
}
```
never
53
We have a variable that will hold a two-dimensional point. What is most appropriate type annotation for this?
**[number, number]** is the most appropriate because is accepts 2 numbers.
The any type isn't appropriate because no type checking will occur on the variable. number[] isn't ideal because the array will accept more than 2 numerical values. [number] will not work because it will only accept 1 numerical value.
54
Create an enum called Level with the names Debug, Info, Error
```
enum Level {
Debug,
Info,
Error
}
```
55
For the following enum what will be the output value at the console for Info ?
```
enum Level {
Debug,
Info,
Error
}
```
1
enums values are zero-based auto-incrementing numbers by default.
56
Will this generate an error?
```
enum Level {
Debug,
Info,
Error
}
let level: Level;
level = 5;
console.log(level);
```
No, unfortunately, numeric enums accept any numeric value.
57
Set a string value for each level in the following enum:
```
enum Level {
Debug,
Info,
Error
}
```
```
enum Level {
Debug = "Debug",
Info = "Info",
Error = "Error"
}
```
58
Will this code generate an error:
```
enum Level {
Debug = "Debug",
Info = "Info",
Error = "Error"
}
let level:Level;
level = Level.Error;
console.log(level);
level = "Debug";
```
Yes. We can't assign the enum value using the string value:
`level = "debug"`
Will generate an error.
The proper assignment would be:
`level = Level.Debug;`
59
Declare a const score with an object implicitly typed with a name "Math" and a score of 85
```
const score = {
name: "Math",
score: 85
};
```
60
Using the explicit object type annotations specify a let variable called variable that contains a member1 of type1 and a member2 of type2.
`let variable: { member1: type1; member2: type2};`
61
Declare a const score with an explicitly typed object with a name "Math" and a score of 85
```
const score: { name: string; score: number; } = {
name: "Math",
score: 85
}
```
62
Declare a const score with an explicitly typed object with a name "Math" and a optional score left empty.
```
const score: { name: string; score?: number; } = {
name: "Math"
}
```
63
What is a type alias?
A type alias is a name that refers to another type
64
Create a new type TypeAliasName based of an existing type called ExistingType.
`type TypeAliasName = ExistingType;`
65
Create a type alias for a string called FirstName
`type FirstName = string;`
66
Create a type alias for a number called PersonScore.
type PersonScore = number;
67
Can Type aliases be used for arrow functions?
Yes.
`type TypeAliasName = (paramName1: paramType1; ...) => ReturnType;`
68
Create a type alias called Log that represents this function:
```
Create a type alias called Log that represents this function:
const log = (message: string) => {
console.log(message);
};
```
`type Log = (message: string) => void;`
69
Add Log in a type annotation to the function:
Create a type alias called Log that represents this function and use it to explicitly declare log's type:
```
const log = (message: string) => {
console.log(message);
};
```
```
type Log = (message: string) => void;
const log: Log = (message: string) => {
console.log(message);
}
```
70
Add an optional string parameter called category to the following type:
`type Log = (message: string) => void;`
```
type Log = (
message: string;
category?: string
) => void;
```
71
Create a type alias called score for :
```
{ name: string; score: number }
```
In:
```
const score: { name: string; score: number } = {
name: "Math",
score: 85,
};
```
`type Score = { name: string; score: number };`
72
In type alias should you use , or ; to separate type member ?
It's better to use ;
73
Add an optional boolean property called: pass to this type:
```
type Score = {
name: string;
score: number;
};
```
```
type Score = {
name: string;
score: number;
pass?: boolean;
};
```
74
Can method be declared on object type?
Yes
75
Add a method called log of type Log on this Score alias:
```
type Score = {
name: string;
score: number;
pass?: boolean;
};
```
```
type Score = {
name: string;
score: number;
pass?: boolean;
log: Log;
};
```
76
Do interfaces exist in Javascript?
No.
77
What is the syntax to declare an interface ?
Use these to help you: TypeName,propertyName,PropertyType,methodName,paramName, ParamType, MethodReturnType
```
interface TypeName {
propertyName: PropertyType;
methodName: (paramName: ParamType) => MethodReturnType;
}
```
78
Declare a ButtonProps interface with a text string property and a onClick method that takes no parameter and return void. Use the arrow notation for the method signature.
```
interface ButtonProps {
text: string;
onClick: () => void;
}
```
79
Make the method onClick optional on the following interface:
```
interface ButtonProps {
text: string;
onClick: () => void;
}
```
```
interface ButtonProps {
text: string;
onClick?: () => void;
}
```
80
Is it possible for an interface to inherit all the properties and methods of another interface?
Yes. Through the use of extends.
81
Declare an interfaceA that has all the properties and methods of another interface called interfaceB
```
interface InterfaceA extends InterfaceB {
...
}
```
82
Can interface be used to represent functions ?
Yes. Using this syntax:
```
interface TypeName {
(paramName1: paramType1, ...): ReturnType;
}
```
83
What is the syntax for an interface to represent a function? Use TypeName, paramName1, paramType1 and ReturnType to help you.
```
interface TypeName {
(paramName1: paramType1, ...): ReturnType;
}
```
84
Declare an interface called Log for the following const:
```
const log = (message: string) => {
console.log(message);
};
```
interface Log {
(message: string): void;
}
85
Given the interface Log:
```
interface Log {
(message: string): void;
}
```
and the const log:
```
const log = (message: string) => {
console.log(message);
};
```
add the type annotation to log.
```
const log: Log = (message: string) => {
console.log(message);
}
```
86
Is it legal in Typescript to create multiple interfaces with the same names?
Yes. Typescript will merge the declaration with the same name. It's called declaration merging.
87
When can it be useful to use declaration merging?
Mostly when using third-party libraries.
88
What are union type ?
They are types that we can combine to create a new type. We use the pipe | operator for this. For example:
`type A_or_B_or_C = A | B | C;`
89
Change the type of :
`let age: number | null;`
so it can be undefined as well.
`let age: number | null | undefined;`
90
Create a type alias from :
`let age: number | null;`
Do not use typeof age.
type Age = number | null;
91
Create a string literal union type called Fruit with possible values of:
Banana, Apple, or Pear
`type Fruits = "Banana", "Apple", "Pear";`
92
When are string literal union types useful?
When we need a more specific type than string.
93
Are string literal union type case sensitive?
Yes.
94
Can objects be unioned as well?
Yes. For example:
`type Actions = { type: "loading" } | { type: "loaded"; data: { name: string } };`
95
What is an intersection type and how can we express it?
Intersection types combine existing types to form a new type. An intersection type will have all the members from the types that it is based on. Intersection types don't just contain the common members from the types that it is based on, as you may first expect.
`type A_and_B_and_C = A & B & C;`
96
What is the symbol used to declare intersection type?
&
97
Create an intersection type called Contacts from these 2 types:
```
type Name = {
firstName: string;
lastName: string;
};
type PhoneNumber = {
landline: string;
mobile: string;
};
```
`type Contact = Name & PhoneNumber;`
98
What will be the type of kind in the intersected Field type ?
```
type BaseElement = {
name: string;
kind: "text" | "number" | "email";
};
type TextInput = {
kind: "text";
};
type Field = BaseElement & TextInput;
```
It will be "text" because the type of a common member of an intersection type is mathematically intersected.
99
What parameter can the type A_and_B accept?
```
type A = {
doIt: (a: string) => void;
};
type B = {
doIt: (a: string, b: string) => void;
};
type A_and_B = A & B;
```
Only a:string
100
Can an interface represent a type primitive like string?
No. Only TypeAlias can do this.
101
Can an interface represent a tuple ?
No. Only a Type alias can do this.
102
Create a type called Names that is a array of string.
```
type Names = string[];
```
103
Create an interface called Names that represents an array of string.
```
interface Names {
[index: number]: string;
}
```
It's simpler to use a type alias for this...
104
Declare a type called Log that take a parameter message a string and return void.
`type Log = (message: string) => void;`
105
Declare an interface called Log that take a parameter message a string and return void.
```
interface Log {
(message: string): void;
}
```
It's clearer with a type...
106
Can interface represent union types?
No
107
Declare a type and interface called Person with a name string and a score number.
```
type Person = {
name: string;
score: number;
};
interface Person {
name: string;
score: number;
}
```
108
Can both interface and type alias be used to composed objects?
Yes. Type alias can be composed with the & intersection. Interface can be composed with extends.
109
Can type alias componse interfaces and vice versa ?
Yes. For example with & (intersection):
```
type Name = {
firstName: string;
lastName: string;
};
interface PhoneNumber {
landline: string;
mobile: string;
}
type Contact = Name & PhoneNumber;
```
110
What will be the type of status:
```
type OrderStatus = "pending" | "completed";
type DeliveryStatus = "completed" | "shipped";
type Status = OrderStatus | DeliveryStatus;
```
Status will contain 'pending', 'completed', and 'shipped' because we take the union of the values in the OrderStatus and DeliveryStatus sets.
111
What will be the type of status:
```
type OrderStatus = "pending" | "completed";
type DeliveryStatus = "completed" | "shipped";
type Status = OrderStatus & DeliveryStatus;
```
The `Status` type will just contain 'completed' because we take the values where the OrderStatus and DeliveryStatus sets intersect.
112
What values does the never type contain?
The never type doesn't contain any values and can be thought of as an empty set.
113
What values does the unknown type contain?
The unknown contains all the possible values!
114
What will be the type of status on the if line ? And on the console.log line ?
```
function logStatus(status: string | null) {
if (status) {
console.log(status);
}
}
```
On the if line, the type of status is string | null.
On the console.log line, the type of status is string.
The type was narrowed to string since the if check if we have a string or a truthy value. null would be a falsy value.
115
Would this raise an error:
```
let jones: "Tom" | "Bob" = "Tom";
let jane: string = "Jane";
jane = jones;
```
No because jane is of type string, which is wider than 'Tom' | 'Bob'.
116
Would this raise an error:
```
let jones: "Tom" | "Bob" = "Tom";
let jane: string = "Jane";
jones = janes;
```
Yes because the type of jones is 'Tom' | 'Bob' which is narrower than the type of jane which is string. In other words, string can't fit into 'Tom' | 'Bob'.
117
Are the type or interface names important in Typescript to determine if 2 types are equivalent?
No. Typescript check the structure to determine the compatibility.
118
Will this raise an error ?
```
type Person = {
name: string;
};
interface IPerson {
name: string;
age: number;
}
let bob: Person = {
name: "Bob",
};
let fred: IPerson = {
name: "Fred",
age: 30,
};
bob = fred;
```
TypeScript won't raise an error. TypeScript checks fred's type (IPerson) has a name property, which is the requirement for bob's type (Person).
119
Will this raise an error:
```
type Person = {
name: string;
age: number;
};
interface IPerson {
name: string;
}
let bob: Person = {
name: "Bob",
age: 30,
};
let fred: IPerson = {
name: "Fred",
};
bob = fred;
```
TypeScript raises an error on this assignment. TypeScript checks IPerson has both name and age properties (which it doesn't) because person is of type Person, which requires both these properties.
120
Will this raise an error:
```
type Dog = {
name: string;
};
type Shape = {
name: "Circle" | "Square";
};
let ben: Dog = {
name: "Ben",
};
let circle: Shape = {
name: "Circle",
};
circle = ben;
```
Yes, because the type Dog can't be assigned to an object of type Shape. This is because the types of the name property aren't compatible because string is wider than 'Circle' | 'Square'.
121
Will this raise an error?
```
type Dog = {
name: string;
};
type Shape = {
name: "Circle" | "Square";
};
let ben: Dog = {
name: "Ben",
};
let circle: Shape = {
name: "Circle",
};
ben = circle;
```
No error. The assignment is okay because 'Circle' | 'Square' fits into string.
122
Will this raise an error:
```
let add = (a: number, b: number): number => a + b;
let sum = (x: number, y: number): number => x + y;
sum = add;
```
No. The functions have parameters of the same type, and the return type is the same.
123
Are the parameter names important when comparing alias type for functions?
The parameter names aren't important - it is only the types of parameters that are checked for type compatibility.
124
Will this raise an error?
```
let add = (a: number, b: number, c: number): number => a + b + c;
let sum = (x: number, y: number): number => x + y;
sum = add;
```
Yes the assignment raises an error because add requires more parameters than sum.
125
Are the number of parameters important when comparing alias type for functions?
Yes.
126
Will this raise an error:
```
let add = (a: number, b: number, c?: number): number => a + b + (c || 0);
let sum = (x: number, y: number): number => x + y;
sum = add;
```
No. The assignment is fine now. This is because add now only requires two parameters, which is the same as sum.
127
Will this raise an error?
```
let add = (a: number, b: number, c: number): number => a + b + c;
let sum = (x: number, y: number): number => x + y;
add = sum;
```
No error. The assignment is ok because a function with two parameters fits into a function with three parameters.
128
When can a variable a be assigned to another variable b?
If the type of b is wider than the type of a.
129
When can an object a be assigned to another object b?
If a has at least the same members as b.
130
When can a function a be assigned to another function b?
If each parameter in a has a corresponding parameter in b with a compatible type.
131
We have the following type:
```
type Product = {
name: string;
bestBeforeDate: Date;
}
```
bestBeforeDate doesn't apply to every product though. So, we want to allow this to be null or a date. What type best represents this?
```
type Product = {
name:string;
bestBeforeDate: Date | null;
}
type Product = {
name:string;
bestBeforeDate?: Date;
}
```
```
type Product = {
name:string;
bestBeforeDate: Date | null;
}
```
A union type can be used to represent a date or a null value. Making a property optional will mean it can be set to undefined or not supplied at all, which is not the requirement. Also, making a property optional doesn't allow it to accept null values.
132
Is this a valid function? If not what is the error?
`const add = (a:number, b:number):number => { a + b};`
No. The return statement is missing in the body and should be:
`{return a + b};`
133
Is this a valid function? If not what is the error?
`const add = (a:number, b:number):number => a + b;`
Yes. It's valid.
134
Is this a valid function? If not what is the error?
`const add = (a:number, b:number):number => { return a + b};`
Yes. It's valid.
135
Declare an array of numbers called items without using generic (don't use Array).
const items : number[] = [1,2,3,4];
136
Create a function called unreachable that you can use to flag regions of code that should never be reached
`function unreacheable(never: never) {}`
137
How do can you comment a single line of code or add a comment at the end of a line of code in TS?
Using //
