Basics - everyday types Flashcards
List TypeScript primitive types
Same as JavaScript primititve types: string, number, bigint, undefined, null, boolean and symbol
Source typescriptlang
How do you define an Array type in TypeScript?
To specify the type of an array like [1, 2, 3], you can use the syntax number[]; this syntax works for any type (e.g. string[] is an array of strings, and so on). You may also see this written as Array<number>, which means the same thing.
Source typescriptlang
Explain TypeScript special type any?
Special type any can be used whenever you don’t want a particular value to cause typechecking errors.
The any type is useful when you don’t want to write out a long type just to convince TypeScript that a particular line of code is okay.
Source typescriptlang
Why should you NOT use any type?
any type is not type-checked. This means that TypeScript will consider valid a variable with any type. No matter where it is used.
What’s worst is that the use of any type is “contagious” in that it can quitely spread throughout a codebase removing the type safety that TypeScript provieds. For example:
function f1() {
const x: any = expressionReturningFoo(); // Don’t do this
processBar(x);
return x
}
function g() {
const foo = f1(); // Type is any
foo.fooMethod(); // This call is unchecked!
}
What type should you use instead of any?
unknown type
Explain TypeScript special type unknown
The unknown type represents any value. This is similar to the any type, but is safer because it’s not legal to do anything with an unknown value:
function f1(a: any) {
a.b(); // OK
}
function f2(a: unknown) {
a.b(); // NOT OK: Object is of type 'unknown'.
}
Source typescriptlang
How do you define a type anotation?
:type after the name of the variable, parameter or property. There can be a space after the colon.
let myName: string = "Alice";
function(foo: string, bar: number) {}
Note: TypeScript doesn’t use “types on the left”-style declarations like int x = 0; Type annotations will always go after the thing being typed.
Source typescriptlang
How do you define the return type of a declared function?
Adding the return type after the parameter list with a colon :
function getFavoriteNumber(): number {
return 26;
}
Source typescriptlang
How do you define an object type?
To define an object type, we simply list its properties and their types.
For example, here’s a function that takes a point-like object:
// The parameter's type annotation is an object type
function printCoord(pt: { x: number; y: number }) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });
Source typescriptlang
How do you define an optional property on an object type?
Adding a ? after the property name:
function printName(obj: { first: string; last?: string }) {
// ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });
Source typescriptlang
What is a union type?
A union type is a type formed from two or more other types, representing values that may be any one of those types.
We refer to each of these types as the union’s members.
Example:
function printId(id: number | string) {
console.log("Your ID is: " + id);
}
printId(101); // OK
printId("202"); // OK
printId({ myID: 22342 }); // NOT OK
// Throws Error `Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'`.
Source typescriptlang
How can you narrow the type of a union type?
Narrowing occurs when TypeScript can deduce a more specific type for a value based on the structure of the code.
For example, TypeScript knows that only a string value will have a typeof value “string”:
function printId(id: number | string) {
if (typeof id === "string") {
// In this branch, id is of type 'string'
console.log(id.toUpperCase());
} else {
// Here, id is of type 'number'
console.log(id);
}
}
Another example is to use a function like Array.isArray:
function welcomePeople(x: string[] | string) {
if (Array.isArray(x)) {
// Here: 'x' is 'string[]'
console.log("Hello, " + x.join(" and "));
} else {
// Here: 'x' is 'string'
console.log("Welcome lone traveler " + x);
}
}
Source typescriptlang
What are Type Aliases?
A type alias is exactly that - a name for any type. The syntax for a type alias is:
type Point = {
x: number;
y: number;
};
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
You can actually use a type alias to give a name to any type at all. Primitive types, objects, union types, etc.
Source typescriptlang
What is an Interface Declaration?
An interface declaration is one of the ways you can name an object type in TypeScript (type aliases are another way)
interface Point {
x: number;
y: number;
}
function printCoord(pt: Point) {
console.log("The coordinate's x value is " + pt.x);
console.log("The coordinate's y value is " + pt.y);
}
Source typescriptlang
What are the differences between Type Aliases and Interfaces?
- An
interfacecan be extended with theextendskeyword and atypecan not. - Type alias names may appear in error messages, sometimes in place of the equivalent anonymous type (TypeScript version 4.2 or less). Interfaces will always be named in error messages.
- Type aliases may not participate in declaration merging, but interfaces can.
- Interfaces may only be used to declare the shapes of objects, not rename primitives.
- Interface names will always appear in their original form in error messages, but only when they are used by name.
Source typescriptlang
