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
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