let str: string = "Hello, World";
let num: number = 5;
let bol: boolean = true;
let obj: any = { x: 0 };
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n:number = obj;
- Parameter type annotations
function greet (name: string) {
console.log("Hello, " + name.toUpperCase());
}
great (42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.
- Return type annotations
function getFavoriteNumber(): number {
return 26;
}
- Anonymous Functions
const names = ["Alice", "Bob", "Eve"];
name.forEach(function (s) {
console.log(s.toUppercase()); // Error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
})
name.forEach((s) => {
console.log(s.toUppercase()); // Error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?
})
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 });
- Optional Properties
function printName(obj: { first: string; last?: string }) {
// ...
}
// Both OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });
function printName(obj: { first: string; last?: string }) {
// Error - might crash if 'obj.last' wasn't provided!
console.log(obj.last.toUpperCase());
if (obj.last !== undefined) {
// OK
console.log(obj.last.toUpperCase());
}
// A safe alternative using modern JavaScript syntax:
console.log(obj.last?.toUpperCase());
}
let id: number | string
console.log(id.toUpperCase()); // Error: Property 'toUpperCase' does not exist on type 'string | number'.
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);
}
}
type Point = {
x: number;
y: number;
};
const pt: Point;
type ID = number | string
interface Point = {
x: number;
y: number;
};
const pt: Point;
- Differences Between Type Aliases and Interfaces
Interface | Type |
---|---|
Extending an interface | Extending a type via intersections |
Adding new fields to an existing interface | A type cannot be changed after being created |
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");
alignment: "left" | "right" | "center"
function compare(a: string, b: string): -1 | 0 | 1 {
return a === b ? 0 : a > b ? 1 : -1;
}
- Literal Interface
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
- You can change the inference by adding a type assertion in either location
const req = { url: "https://example.com", method: "GET" as "GET" };
- You can use as const to convert the entire object to be type literals
const req = { url: "https://example.com", method: "GET" } as const;
function liveDangerously(x?: number | null) {
console.log(x!.toFixed());
}
- bigint
const oneHundred: bigint = BigInt(100);
const anotherHundred: bigint = 100n;
- symbol
const firstName = Symbol("name");
const secondName = Symbol("name");
if (firstName === secondName) {
This condition will always return 'false' since the types 'typeof firstName' and 'typeof secondName' have no overlap.
// Can't ever happen
}