https://github.com/aaqyaar/typescript-cheatsheet
This Cheatsheet helps for JS Develepors to Migrate into TypeScript
https://github.com/aaqyaar/typescript-cheatsheet
Last synced: 3 months ago
JSON representation
This Cheatsheet helps for JS Develepors to Migrate into TypeScript
- Host: GitHub
- URL: https://github.com/aaqyaar/typescript-cheatsheet
- Owner: aaqyaar
- Created: 2023-09-30T16:43:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-30T17:03:06.000Z (over 1 year ago)
- Last Synced: 2023-09-30T18:22:35.914Z (over 1 year ago)
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TypeScript Cheat Sheet
## Table of Contents
- [Types](#types)
- [Functions](#functions)
- [Classes](#classes)
- [Interfaces](#interfaces)
- [Generics](#generics)
- [Enums](#enums)
- [Type Inference](#type-inference)
- [Type Compatibility](#type-compatibility)
- [Advanced Types](#advanced-types)
- [Decorators](#decorators)
- [Modules](#modules)
- [Namespaces](#namespaces)
- [Declaration Merging](#declaration-merging)
- [JSX](#jsx)
- [Resources](#resources)
## Types
### Boolean
```typescript
let isDone: boolean = false;
```
### Number
```typescript
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
```
### String
```typescript
let color: string = "blue";
color = "red";
```
### Array
```typescript
let list: number[] = [1, 2, 3];
let list: Array = [1, 2, 3];
```
### Tuple
```typescript
let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error
```
## Functions
### Named function
```typescript
function add(x: number, y: number): number {
return x + y;
}
```
### Anonymous function
```typescript
let myAdd = function (x: number, y: number): number {
return x + y;
};
```
### Optional parameter
```typescript
function buildName(firstName: string, lastName?: string) {
if (lastName) return firstName + " " + lastName;
else return firstName;
}
```
### Default parameter
```typescript
function buildName(firstName: string, lastName = "Mohamed") {
return firstName + " " + lastName;
}
let result1 = buildName("Abdi Zamed"); // works correctly now, returns "Abdi Zamed Mohamed"
let result2 = buildName("Abdi Zamed", undefined); // still works, also returns "Abdi Zamed Mohamed"
let result3 = buildName("Abdi Zamed", "Adam", "Sr."); // error, too many parameters
let result4 = buildName("Abdi Zamed", "Adam"); // ah, just right
```
### Rest parameter
```typescript
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Ali", "Jamac", "Muno", "Farxiyo");
```
### Overloads
```typescript
function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x): any {
// Check to see if we're working with an object/array
// if so, they gave us the deck and we'll pick the card
if (typeof x == "object") {
let pickedCard = Math.floor(Math.random() * x.length);
return pickedCard;
}
// Otherwise just let them pick the card
else if (typeof x == "number") {
let pickedSuit = Math.floor(x / 13);
return { suit: suits[pickedSuit], card: x % 13 };
}
}
```
## Classes
### Basic
```typescript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
```
### Inheritance
```typescript
class Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Snake extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
class Horse extends Animal {
constructor(name: string) {
super(name);
}
move(distanceInMeters = 45) {
console.log("Galloping...");
super.move(distanceInMeters);
}
}
```
### Public, private, and protected modifiers
```typescript
class Animal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
}
new Animal("Cat").name; // Error: 'name' is private;
```
```typescript
class Animal {
private name: string;
constructor(theName: string) {
this.name = theName;
}
}
class Rhino extends Animal {
constructor() {
super("Rhino");
}
}
class Employee {
private name: string;
constructor(theName: string) {
this.name = theName;
}
}
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Abdi Zamed");
animal = rhino;
animal = employee; // Error: 'Animal' and 'Employee' are not compatible
```
```typescript
class Person {
protected name: string;
constructor(name: string) {
this.name = name;
}
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in ${this.department}.`;
}
}
let abdi = new Employee("abdi", "Development");
console.log(abdi.getElevatorPitch());
console.log(abdi.name); // error
```
### Readonly modifier
```typescript
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor(theName: string) {
this.name = theName;
}
}
const oct = new Octopus("oct");
oct.name = "test"; // error name is readonly
```
### Accessors
```typescript
const fullNameMaxLength = 10;
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (newName && newName.length > fullNameMaxLength) {
throw new Error("fullName has a max length of " + fullNameMaxLength);
}
this._fullName = newName;
}
}
let employee = new Employee();
employee.fullName = "Abdi Zamed Mohamed";
if (employee.fullName) {
console.log(employee.fullName);
}
```
### Static Properties
```typescript
class Grid {
static origin = { x: 0, y: 0 };
calculateDistanceFromOrigin(point: { x: number; y: number }) {
let xDist = point.x - Grid.origin.x;
let yDist = point.y - Grid.origin.y;
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor(public scale: number) {}
}
let grid1 = new Grid(1.0); // 1x scale
let grid2 = new Grid(5.0); // 5x scale
console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));
```
### Abstract Classes
```typescript
abstract class Department {
constructor(public name: string) {}
printName(): void {
console.log("Department name: " + this.name);
}
abstract printMeeting(): void; // must be implemented in derived classes
}
class AccountingDepartment extends Department {
constructor() {
super("Accounting and Auditing"); // constructors in derived classes must call super()
}
printMeeting(): void {
console.log("The Accounting Department meets each Monday at 10am.");
}
generateReports(): void {
console.log("Generating accounting reports...");
}
}
let department: Department; // ok to create a reference to an abstract type
department = new Department(); // error: cannot create an instance of an abstract class
department = new AccountingDepartment(); // ok to create and assign a non-abstract subclass
department.printName();
department.printMeeting();
department.generateReports(); // error: method doesn't exist on declared abstract type
```
### Constructor functions
```typescript
class Greeter {
static standardGreeting = "Hello, there";
greeting: string;
greet() {
if (this.greeting) {
return "Hello, " + this.greeting;
} else {
return Greeter.standardGreeting;
}
}
}
let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet());
let greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet());
```
## Interfaces
### Basic
```typescript
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
```
### Optional Properties
```typescript
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
let newSquare = { color: "white", area: 100 };
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
let mySquare = createSquare({ color: "black" });
```
### Readonly properties
```typescript
interface Point {
readonly x: number;
readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error! Cannot assign to 'x' because it is a read-only property.
```
### Function Types
```typescript
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function (src: string, sub: string): boolean {
let result = src.search(sub);
return result > -1;
};
```
### Indexable Types
```typescript
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Abdi Zamed", "Adam"];
let myStr: string = myArray[0];
```
### Class Types
```typescript
interface ClockInterface {
currentTime: Date;
}
class Clock implements ClockInterface {
currentTime: Date = new Date();
constructor(h: number, m: number) {}
}
```
### Extending Interfaces
```typescript
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square = {};
square.color = "blue";
square.sideLength = 10;
```
### Hybrid Types
```typescript
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
function getCounter(): Counter {
let counter = function (start: number) {};
counter.interval = 123;
counter.reset = function () {};
return counter;
}
let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;
```
### Interfaces Extending Classes
```typescript
class Control {
private state: any;
}
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control implements SelectableControl {
select() {}
}
class TextBox extends Control {
select() {}
}
class Image implements SelectableControl {
private state: any;
select() {}
}
```
## Generics
We described in part 2, please refer to [Part 2]()