Homepage / Notes / Computer Science / Programming Languages / JavaScript
console.log('Hello, World!')Hello, World!
String concatenation:
return 'hello' + 'world'helloworld
return 1 + 12
return [1, 2, 3][ 1, 2, 3 ]
return {key: 'value'}{ key: 'value' }
function hello(name) {
return "hello " + name;
}
console.log(hello("world"));../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-P72lay.ts(1,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
hello world
function hello(name: string) {
return "hello " + name;
}
console.log(hello("world"));hello world
function hello(name: string) {
return "hello " + name;
}
console.log(hello(2));../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-Rg1elh.ts(5,19): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
hello 2
const obj = { name: "Damien", age: 28 };
obj.location;../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-NiBopQ.ts(2,5): error TS2339: Property 'location' does not exist on type '{ name: string; age: number; }'.
stringnumberbooleannumber[] / Array<number>anylet myName: string = "Damien";function greet(name: string) {
console.log("Hello, " + name.toUpperCase());
}
greet("Damien");Hello, DAMIEN
function greet(name: string) {
console.log("Hello, " + name.toUpperCase());
}
greet(42);^ runtime error
function getFavoriteNumber(): number {
return 9;
}function printCoord(pt: { x: number; y: number }) {
console.log(`${pt.x}, ${pt.y}`);
}
printCoord({ x: 9, y: 2 });9, 2
function printName(obj: { firstName: string; lastName?: string }) {
console.log(`${obj.firstName}${obj.lastName}`);
}
printName({ firstName: "Damien" });
printName({ firstName: "Damien", lastName: "Gonot" });Damienundefined
DamienGonot
function printName(obj: { firstName: string; lastName?: string }) {
if (obj.lastName !== undefined) {
console.log(`${obj.firstName} ${obj.lastName}!`);
} else {
console.log(`${obj.firstName}!`);
}
}
printName({ firstName: "Damien" });
printName({ firstName: "Damien", lastName: "Gonot" });Damien!
Damien Gonot!
When a value could be any of multiple types.
function printId(id: number | string) {
console.log("Your ID is: " + id);
}
printId(101);
printId("202");
printId({ myID: 22342 });../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-lKsnQz.ts(9,9): error TS2345: Argument of type '{ myID: number; }' is not assignable to parameter of type 'string | number'.
Type '{ myID: number; }' is not assignable to type 'number'.
Your ID is: 101
Your ID is: 202
Your ID is: [object Object]
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);
}
printCoord({ x: 100, y: 100 });The coordinate's x value is 100
The coordinate's y value is 100
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);
}
printCoord({ x: 100, y: 100 });The coordinate's x value is 100
The coordinate's y value is 100
When you know what to expect but TS doesn't know about it yet.
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");function printDirection(s: "North" | "East" | "South" | "West") {
console.log(s);
}
printDirection("North");
printDirection("South-West");../../../../../var/folders/5j/jvlb0vrx4kl385s_yhg0h81w0000gn/T/babel-xhBADG/ts-src-F4JdCD.ts(6,16): error TS2345: Argument of type '"South-West"' is not assignable to parameter of type '"North" | "East" | "South" | "West"'.
North
South-West
Not related to types but more of a new features added by TS.
enum Direction {
Up,
Down,
Left,
Right,
}import { match } from 'ts-pattern';
type State =
| { status: 'success'; data: string }
| { status: 'error'; error: Error };
const result: State = { status: 'success', data: 'toast' };
const output = match(result)
.with({ status: 'error' }, () => 'An error occurred')
.with({ status: 'success' }, () => result.data)
.exhaustive();
console.log(output)toast
Pattycake is an optimizing compiler for ts-pattern that lets you have your cake (expressive pattern matching), and eat it too (zero runtime overhead).
https://github.com/aidenybai/pattycake
The React Framework for the Web
https://daily.dev/blog/internationalization-i18n-in-nextjs
Kirimase is a command-line tool (CLI) for building full-stack Next.js apps faster. It supercharges your development workflow, allowing you to quickly integrate packages and scaffold resources for your application with best practices in mind.
Ship. Fast. The Missing Fullstack Toolkit for Next.js Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling world wide applications.
Build faster websites. Pull content from anywhere and serve it fast with Astro's next-gen island architecture. Astro is the web framework that you'll enjoy using.
A fully featured web framework for Node.js AdonisJS includes everything you need to create a fully functional web app or an API server. So stop wasting hours downloading and assembling hundreds of packages — Use AdonisJS and be productive from day one.
React codebase generator: https://divjoy.com/
https://wattenberger.com/blog/react-hooks
Composable state management for React
A state management library for React
https://tanstack.com/query/latest
Powerful asynchronous state management for TS/JS, React, Solid, Vue and Svelte
Similar to React, but compiled, interesting https://github.com/ryansolid/solid
The HTML-first framework. Instant apps of any size with ~ 1kb JS
https://thin.dev/ Paid backend for SPA React apps
Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.
A forward-thinking library of web components.
https://webpack.js.org/ The "OG" bundler
IMO, complex options and config
https://rollupjs.org/guide/en/ Next-generation ES module bundler
IMO still too complex
https://parceljs.org/ Blazing fast, zero configuration web application bundler
https://www.snowpack.dev/ Snowpack is a lightning-fast frontend build tool, designed for the modern web
https://github.com/TryGhost/Ghost
👻 The #1 headless Node.js CMS for professional publishing
The most powerful TypeScript headless CMS there is.
https://www.prisma.io/ Next-generation ORM for Node.js and TypeScript
A modern runtime for JavaScript and TypeScript
The next-gen web framework.
Bun is a fast all-in-one JavaScript runtime
Fast, and friendly Bun web framework.
All-in-one serverless JavaScript runtime
https://www.assemblyscript.org/
A TypeScript-like language for WebAssembly.
https://github.com/JSMonk/hegel
An advanced static type checker
https://github.com/melonjs/melonJS
a fresh & lightweight javascript game engine
Write less, runs faster. Styles, optimizing compiler & UI kit that unify React Native + Web
The Open Source Shopify Alternative
JSX in Markdown
Modern Webpack replacement
Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.
Spreadsheet system in React
An open-source JavaScript library for mobile-friendly interactive maps
Brain.js: GPU accelerated Neural networks in JavaScript for Browsers and Node.js
https://github.com/MathisBullinger/froebel
A strictly typed utility library.
The reactive data store for local‑first apps.
Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
Authentication for the Web.
The perfect Database for JavaScript applications
https://auto-animate.formkit.com/
Add motion to your apps with a single line of code. AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, or any other JavaScript application.
react-magic-motionhttps://www.react-magic-motion.com/
react-magic-motion is a react.js library that ✨ magically animates your components.
react-hot-toastSmoking hot Notifications for React. Lightweight, customizable and beautiful by default.
The first "data-first" and "data-last" utility library designed especially for TypeScript.
https://github.com/sindresorhus/ky
🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API
https://github.com/porsager/postgres
Postgres.js - The Fastest full featured PostgreSQL client for Node.js, Deno, Bun and CloudFlare
TypeScript-first schema validation with static type inference
https://turriate.com/articles/modern-javascript-everything-you-missed-over-10-years
https://exploringjs.com/impatient-js/toc.html