Typescript

Configuring ESLint for TypeScript projects involves enabling and disabling specific rules to suit your project’s needs. Here’s a quick guide on how to manage these rules in your eslint.config.mjs file. Example Configuration import typescriptPlugin from "@typescript-eslint/eslint-plugin"; import typescriptParser from "@typescript-eslint/parser"; export default [ { files: ["**/*.{ts,tsx}"], languageOptions: { parser: typescriptParser, parserOptions: { ecmaVersion: "latest", sourceType: "module", project: "./tsconfig.json", }, }, plugins: { "@typescript-eslint": typescriptPlugin, }, rules: { ...typescriptPlugin.configs.recommended.rules, "no-console": "warn", "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": "warn", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/ban-ts-comment": "off", }, }, ]; Key Points Disabling Rules: Set the rule to "off". For example, to disable the @typescript-eslint/no-explicit-any rule: ...

Contents The Firebase documentation leaves much to be desired. If you just want answers, these docs were made just for you. If you want more questions, head over here and start reading. In this blog, I’m going to walk you through setting up the Resize Images Firebase Extension and listening to a custom event so you can add the resized images to documents in your Firestore database. Setting Up the Extension Navigate to your Firebase project and select the Extensions item from the “Build” side menu. Select the “Explore all Extensions” button and then search for “resize images”. Press the “Install” button. Good job, buddy. ...

Contents TypeScript has become increasingly popular due to its ability to bring static typing to JavaScript, enhancing code quality and developer productivity. Converting your existing JavaScript package to TypeScript can make it more robust and easier to maintain. In this guide, we’ll walk through the essential steps to transform your JavaScript package into a TypeScript package. 1. Install TypeScript and Necessary Dependencies Begin by adding TypeScript and type definitions for Node.js to your development dependencies. ...

TypeScript Cheat Sheet 1. Basic Syntax Comments // Single-line comment /* Multi-line comment */ /** * Documentation comment */ Variables and Data Types // Type inference let name = 'Bob'; let age = 30; // Explicit typing let name: string = 'Bob'; let age: number = 30; let isStudent: boolean = true; let numbers: number[] = [1, 2, 3]; let tuple: [string, number] = ['hello', 10]; let anyType: any = 'anything'; Constants const PI: number = 3.14; Operators // Arithmetic: +, -, *, /, %, ** // Increment/decrement: ++, -- // Equality and relational: ==, ===, !=, !==, >, <, >=, <= // Logical: &&, ||, ! // Nullish coalescing: ?? // Optional chaining: ?. Type Casting let x: any = 'hello'; let len: number = (x as string).length; 2. Control Structures Conditional Statements if (condition) { // code } else if (otherCondition) { // code } else { // code } switch (variable) { case value1: // code break; case value2: case value3: // code break; default: // code } Loops for (let i = 0; i < 5; i++) { // code } while (condition) { // code } do { // code } while (condition); for (let item of iterable) { // code } iterable.forEach((item) => { // code }); 3. Functions Function Declaration and Definition function add(a: number, b: number): number { return a + b; } // Arrow function const multiply = (a: number, b: number): number => a * b; Parameters and Return Values // Optional parameters function greet(name: string, greeting?: string): string { greeting = greeting || 'Hello'; return `${greeting}, ${name}!`; } // Default parameters function createPoint(x: number = 0, y: number = 0): [number, number] { return [x, y]; } // Rest parameters function sum(...numbers: number[]): number { return numbers.reduce((total, num) => total + num, 0); } Function Overloading function padding(all: number): number; function padding(topBottom: number, leftRight: number): number; function padding(top: number, right: number, bottom: number, left: number): number; function padding(...args: number[]): number { // Implementation } 4. Data Structures Arrays let fruits: string[] = ['apple', 'banana', 'cherry']; fruits.push('date'); let firstFruit: string = fruits[0]; Objects let person: { name: string; age: number } = { name: 'Alice', age: 30 }; person.age = 31; Maps let scores = new Map<string, number>(); scores.set('Alice', 90); scores.set('Bob', 85); let aliceScore = scores.get('Alice'); Sets let uniqueNumbers = new Set<number>([1, 2, 3, 4, 5]); uniqueNumbers.add(6); 5. Object-Oriented Programming Classes and Objects class Person { constructor(public name: string, public age: number) {} sayHello(): void { console.log(`Hello, I am ${this.name}`); } } const person = new Person('Alice', 30); person.sayHello(); Inheritance class Student extends Person { constructor(name: string, age: number, public school: string) { super(name, age); } } Interfaces and Abstract Classes interface Shape { getArea(): number; } abstract class AbstractShape implements Shape { abstract getArea(): number; } class Circle extends AbstractShape { constructor(private radius: number) { super(); } getArea(): number { return Math.PI * this.radius ** 2; } } 6. Exception Handling try { // code that might throw an error } catch (error) { if (error instanceof Error) { console.error(error.message); } else { console.error(String(error)); } } finally { // always executed } 7. Modules // Exporting export function sayHello(name: string): string { return `Hello, ${name}!`; } // Importing import { sayHello } from './greetings'; 8. Generics function identity<T>(arg: T): T { return arg; } let output = identity<string>("myString"); 9. Type Manipulation // Union types type StringOrNumber = string | number; // Intersection types type Employee = Person & { employeeId: number }; // Type aliases type Point = { x: number; y: number }; // Utility types type Readonly<T> = { readonly [P in keyof T]: T[P] }; type Partial<T> = { [P in keyof T]?: T[P] }; 10. Asynchronous Programming async function fetchData(): Promise<string> { // Simulating network request await new Promise(resolve => setTimeout(resolve, 2000)); return 'Data'; } async function main() { try { const data = await fetchData(); console.log(data); } catch (error) { console.error(error); } } 11. Decorators function logged(target: any, key: string, descriptor: PropertyDescriptor) { const original = descriptor.value; descriptor.value = function (...args: any[]) { console.log(`Calling ${key} with`, args); return original.apply(this, args); }; return descriptor; } class Example { @logged method(arg: string) { return `Hello, ${arg}`; } } 12. Important Language-Specific Features Strong static typing Type inference Interfaces Enums Tuple types Null and undefined handling (strict null checks) 13. Best Practices and Style Guide Use const for values that won’t be reassigned Use let for variables that will be reassigned Use PascalCase for type names and enum values Use camelCase for variable and function names Use meaningful and descriptive names 14. Useful Resources Official Documentation: https://www.typescriptlang.org/docs/ TypeScript Playground: https://www.typescriptlang.org/play DefinitelyTyped (Type definitions): https://github.com/DefinitelyTyped/DefinitelyTyped TSConfig Reference: https://www.typescriptlang.org/tsconfig

Welcome to this tutorial where we will create a simple API using TypeScript and deploy it using Vercel. This guide is suitable for beginners and assumes basic familiarity with Node.js. Let’s dive in! Setting Up Your Project Create a New Directory: Start by creating a new directory for your project. Open your terminal and run: mkdir chitter-vercel This creates a directory named chitter-vercel. Initialize Your Node.js Project: Navigate into your new directory and initialize a Node.js project: ...

Slack 1. Create a new Slack channel Create a slack channel in your workspace where the notifications will be displayed (ex. “notifications”) 2. Create a Slack app Visit the Slack API webpage and “Create New App”. Give the app a name and select the Slack workspace you’re working with. 3. Configure the Slack app Select “Incoming Webhooks” and flip the “Active Incoming Webhooks” switch on. 4. Create the webhook Add New Webhook to Workspace and select the “notifications” channel you created before. ...

Instead of hardcoding Supabase interfaces or types in your TypeScript projects, you can use the Supabase CLI to generate types directly from your database tables. Make sure to add the output inside your src folder so the rest of your application can access it: supabase gen types typescript --project-id abcdefghijklmnopqrst > src/types/database.types.ts This command will generate a .types.ts file that contains a single Database interface containing all of your tables and their columns. The output looks something like this (I pulled this from the official docs): ...