mkdir sample-express
cd sample-express
npm init

{
  "name": "sample-express",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

npm install express@4.18.2

npm install --save-dev karma@5.0.0

npm audit --registry=https://registry.npmjs.org/

npm audit fix --registry=https://registry.npmjs.org/ --force

npm prune

npm update

npm uninstall karma

npm install

npm init
npm install express@4.18.2

const express = require('express');
const server = express();
const port = 3000;
server.get('/hello', function (req, res) {
    res.send('Hello World!');
});
server.listen(port, function () {
    console.log('Listening on ' + port);
})

node index.js

function scope() {
    foo = 1; // 赋值
    var foo; // 声明
}
 
// 等价于
 
function scope() {
    var foo;  // 声明被提升
    foo = 1;  // 赋值
}

var globalVar = "global"; // 全局变量
 
function scope() {
    var foo = "1";  // 函数作用域
    if (true) {
        var bar = "2"; // 块作用域无效，仍属于函数作用域
    }
    console.log(globalVar); // "global"
    console.log(window.globalVar); // "global"
    console.log(foo); // "1"
    console.log(bar); // "2"
}
scope();
 

const traditional = function(x) {
  return x * x;
}
 
const arrow = (x) => {
  return x * x;
}

const conciseBody = x => x * x;

this.scope = "lexical scope";
 
const scopeOf = {
    scope: "defining scope",
    traditional: function() {
        return this.scope;
    },
    arrow: () => {
        return this.scope;
    }
};
 
console.log(scopeOf.traditional()); // 输出 "defining scope"
console.log(scopeOf.arrow());       // 输出 "lexical scope"

let numbers = [-2, -1, 0, 1, 2];
 
// 传统函数写法
let traditional = numbers.filter(function(num) {
    return num >= 0;
});
 
// 箭头函数写法（Concise Body）
let arrow = numbers.filter(num => num >= 0);
 
console.log(traditional); // [0,1,2]
console.log(arrow);       // [0,1,2]

let a = 1;
let b = 2;
let string = `${a} + ${b} = ${a + b}`;
console.log(string); // 输出 "1 + 2 = 3"

function tag(literal, ...values) {
    console.log("literal", literal); // ['What is ', ' plus ', '?']
    console.log("values", values);   // [1, 2]
 
    let result;
    switch (literal[1]) {
        case " plus ":
            result = values[0] + values[1];
            break;
        case " minus ":
            result = values[0] - values[1];
            break;
    }
    return `${values[0]}${literal[1]}${values[1]} is ${result}`;
}
 
let a = 1;
let b = 2;
let output = tag`What is ${a} plus ${b}?`;
console.log(output); // 输出 "1 plus 2 is 3"

// Promise
fs.promises.readFile("file.txt")
  .then(data => console.log(data))
  .catch(err => console.log("error"));
 
// async/await
async function readFile() {
    try {
        let data = await fs.promises.readFile("file.txt");
        console.log(data);
    } catch (err) {
        console.log("error");
    }
}

function fetchData(url) {
    fetch(url)
        .then((response) => response.json()) // 数据解析
        .then((json) => console.log(json))   // 处理结果
        .catch((error) => console.error(`Error: ${error}`)); // 错误处理
}
 
fetchData("https://www.usemodernfullstack.dev/api/v1/users");

async function fetchData(url) {
    try {
        const response = await fetch(url);      // 等待 fetch 完成
        const json = await response.json();     // 等待解析 JSON
        console.log(json);
    } catch (error) {
        console.error(`Error: ${error}`);
    }
}
 
fetchData("https://www.usemodernfullstack.dev/api/v1/users");

const newArray = originalArray.map(callback);

const original = [1, 2, 3, 4];
const multiplied = original.map(item => item * 10);
 
console.log(`original array: ${original}`);    // [1,2,3,4]
console.log(`multiplied array: ${multiplied}`); // [10,20,30,40]
 

let object = { fruit: "apple", color: "green" };
 
// 使用 spread 展开对象属性到变量
let { fruit, color } = { ...object };
 
console.log(`fruit: ${fruit}, color: ${color}`); // fruit: apple, color: green
 
color = "red";
console.log(`object.color: ${object.color}, color: ${color}`); 
// object.color: green, color: red

let originalArray = [1,2,3];
let clonedArray = [...originalArray];  // 克隆数组
 
clonedArray[0] = "one";
clonedArray[1] = "two";
clonedArray[2] = "three";
 
console.log(`originalArray: ${originalArray}`); // [1,2,3]
console.log(`clonedArray: ${clonedArray}`);     // ["one","two","three"]

{
    "name": "sample-express",
    "version": "1.0.0",
    "description": "sample express server",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "express": "^4.18.2",
        "node-fetch": "^3.2.6"
    },
    "devDependencies": {}
}

npm install

import fetch from "node-fetch";
const routeHello = () => "Hello World!";
const routeAPINames = async () => {
    const url = "https://www.usemodernfullstack.dev/api/v1/users";
    let data;
    try {
        const response = await fetch(url);
        data = await response.json();
    } catch (err) {
        return err;
    }
    const names = data
        .map((item) => `id: ${item.id}, name: ${item.name}`).join("<br>");
    return names;
};
export { routeHello, routeAPINames };

import { routeHello, routeAPINames } from "./routes.js";
import express from "express";
const server = express();
const port = 3000;
server.get("/hello", function (req, res) {
    const response = routeHello(req, res);
    res.send(response);
});
server.get("/api/names", async function (req, res) {
    let response;
    try {
        response = await routeAPINames(req, res);
    } catch (err) {
        console.log(err);
    }
    res.send(response);
});
 
server.listen(port, function () {
    console.log(`Server running on port ${port}`);
});

npm install --save-dev typescript

npx tsc -init

const x: number = 5;
const y: string = "hello";

let value: number | null = null;

function getWeather(): string {
    const weather = "sunny";
    return weather;
}

const weather = "sunny";
function getWeather(weather: string): string {
    return weather;
};
getWeather(weather);

let stringType: string = "bar";
let booleanType: boolean = true;
let integerType: number = 1;
let floatType: number = 1.5;
let nullType: null = null;
let undefinedType: undefined = undefined;

type WeatherDetailType = {
  weather: string;
  zipcode: string;
  temp?: number;
};

const getWeatherDetail = (
  data: {
    weather: string;
    zipcode: string;
    temp?: number;
  }
) => {
  return data;
};

interface WeatherProps {
    weather: string;
    zipcode: string;
    temp?: number;
}
 
const weatherComponent = (props: WeatherProps): string => props.weather;

npm install --save-dev @types/express

{
    "name": "sample-express",
    "version": "1.0.0",
    "description": "sample express server",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "express": "^4.18.2",
        "node-fetch": "^3.2.6"
    },
    "devDependencies": {
        "@types/express": "^5.0.6",
        "typescript": "^5.9.3"
    }
}
 

{
  "compilerOptions": {
    // ------------------------------
    // 输出 / 文件布局
    // ------------------------------
    "rootDir": "./src",            // TS 源码根目录
    "outDir": "./dist",            // 编译后 JS 输出目录
    "sourceMap": true,             // 生成 source map
    "declaration": true,           // 生成 .d.ts 类型声明文件
    "declarationMap": true,        // 生成 .d.ts 的映射文件
 
    // ------------------------------
    // 环境 / 模块设置
    // ------------------------------
    "module": "nodenext",          // Node.js ES 模块
    "target": "esnext",            // 编译目标现代 JS
    "moduleResolution": "node",    // Node 风格模块解析
    "esModuleInterop": true,       // CommonJS 模块兼容 ES6 import
    "verbatimModuleSyntax": true,  // 保留 TS 原生 module 语法
    "isolatedModules": true,       // 每个文件单独编译，防止依赖副作用
    "moduleDetection": "force",    // 强制 TS 当作模块解析
 
    // ------------------------------
    // 类型检查 / 严格模式
    // ------------------------------
    "strict": true,                        // 启用所有严格类型检查
    "noImplicitAny": true,                 // 禁止隐式 any
    "noUncheckedIndexedAccess": true,      // 对索引访问严格检查
    "exactOptionalPropertyTypes": true,    // 可选属性严格匹配
    "skipLibCheck": true,                  // 跳过声明文件类型检查，提高性能
    "noUncheckedSideEffectImports": true,  // 严格检查副作用导入
 
    // ------------------------------
    // JSX / React
    // ------------------------------
    "jsx": "react-jsx",   // 支持 React 17+ JSX 转换
 
    // ------------------------------
    // 类型声明
    // ------------------------------
    "types": ["node"]     // 指定全局类型，如 Node.js
  },
  "include": ["src/**/*"],   // 包含源码文件
  "exclude": ["node_modules", "dist"]  // 排除输出目录和依赖
}
 

type responseItemType = {
    id: string;
    name: string;
};
 
type WeatherDetailType = {
    zipcode: string;
    weather: string;
    temp?: number;
};
 
interface WeatherQueryInterface {
    zipcode: string;
}

import fetch from "node-fetch";
 
// 普通同步函数
const routeHello = (): string => "Hello World!";
 
// 异步函数
const routeAPINames = async (): Promise<string> => {
    const url = "https://www.usemodernfullstack.dev/api/v1/users";
    let data: responseItemType[];
    try {
        const response = await fetch(url);
        data = (await response.json()) as responseItemType[];
    } catch (err) {
        return "Error";
    }
    const names = data
        .map((item) => `id: ${item.id}, name: ${item.name}`)
        .join("<br>");
    return names;
};
 
// 天气查询
const routeWeather = (query: WeatherQueryInterface): WeatherDetailType =>
    queryWeatherData(query);
 
const queryWeatherData = (query: WeatherQueryInterface): WeatherDetailType => {
    return {
        zipcode: query.zipcode,
        weather: "sunny",
        temp: 35
    };
};
 
export { routeHello, routeAPINames, routeWeather };

import express from "express";
import type { Request, Response } from "express";
import { routeHello, routeAPINames, routeWeather } from "./routes.js";
 
const server = express();
const port = 3000;
 
server.get("/hello", (_req: Request, res: Response): void => {
  const response = routeHello();
  res.send(response);
});
 
server.get("/api/names", async (_req: Request, res: Response): Promise<void> => {
  const response: string = await routeAPINames();
  res.send(response);
});
 
server.get("/api/weather/:zipcode", (req: Request, res: Response): void => {
  const zipcode = req.params.zipcode;
  if (!zipcode) {
    res.status(400).send({ error: "Missing zipcode" });
    return;
  }
 
  const response = routeWeather({ zipcode });
  res.send(response);
});
 
server.listen(port, (): void => {
  console.log("Listening on " + port);
});

npx tsc
node index.js

{"zipcode":"4589","weather":"sunny","temp":35}

import React from "react";
 
export default function App() {
    const getElement = (weather: string): JSX.Element => {
        const element = <h1>The weather is {weather}</h1>;
        return element;
    };
    return getElement("sunny");
}

<h1>The weather is sunny</h1>

interface WeatherProps {
  weather: string;
}
 
const WeatherComponent = (props: WeatherProps) => {
  return <h1>The weather is {props.weather}</h1>;
};

import React from "react";
 
export default function App() {
    // 定义接口
    interface WeatherProps {
        weather: string;
	}
 
    // 定义事件处理函数
    const clickHandler = (text: string): void => {
        alert(text);
    };
    
    // 定义组件
    const WeatherComponent = (props: WeatherProps): JSX.Element => {
        const text = `The weather is ${props.weather}`;
        return (<h1 onClick={() => clickHandler(text)}>{text}</h1>);
    };
    
    // 传参，渲染组件
    return (<WeatherComponent weather="sunny" />);
}

import React from "react";
 
export default function App() {
    // 定义一个接口
    interface WeatherProps {
        weather: string;
    }
    // 定义一个类型别名
    type WeatherState = {
        count: number;
    };
    // 定义类组件
    class WeatherComponent extends React.Component<WeatherProps, WeatherState> {
        constructor(props: WeatherProps) {
            super(props);
            this.state = {
                count: 0
            };
        }
        // 生命周期方法
        // componentDidMount：组件挂载到 DOM 后调用
        componentDidMount() {
            this.setState({ count: 1 });
        }
        // 点击事件处理
        clickHandler(): void {
            this.setState({ count: this.state.count + 1 });
        }
        // 渲染
        render() {
            return (
                <h1 onClick={() => this.clickHandler()}>
                    The weather is {this.props.weather}, and the counter shows{" "}
                    {this.state.count}
                </h1>
            );
        }
    }
    // 渲染组件到页面
    return (<WeatherComponent weather="sunny" />);
}

import React, { useState,useEffect } from "react";
 
export default function App() {
    interface WeatherProps {
        weather: string;
    }
    const WeatherComponent = (props: WeatherProps): JSX.Element => {
        // useState: 替代 this.state
        const [count, setCount] = useState(0);
        // useEffect: 替代生命周期方法
        useEffect(() => {setCount(1)},[]);
        return (
            // 事件处理
            <h1 onClick={() => setCount(count + 1)}>
                The weather is {props.weather},
                and the counter shows {count}
            </h1>
        );
    };
    return (<WeatherComponent weather="sunny" />);
}

import React, { useState, createContext, useContext } from "react";
 
export default function App() {
    // 初始化 Context 对象 ThemeContext，默认值为空字符串 ""
    const ThemeContext = createContext("");
    // 父组件：提供 Context
    const ContextComponent = (): JSX.Element => {
        const [theme, setTheme] = useState("dark");
        
        return (
            <div>
                <!-- 包裹子组件，提供 Context 值 -->
                <ThemeContext.Provider value={theme}>
                    <!-- button 点击时切换主题 → 更新 theme -->
                    <button onClick={() => setTheme(theme == "dark" ? "light" : "dark")}>
                        Toggle theme
                    </button>
                    <Headline />
                </ThemeContext.Provider>
            </div>
        );
    };
    // 子组件：消费 Context
    const Headline = (): JSX.Element => {
        // 读取父组件提供的主题值
        const theme = useContext(ThemeContext);
        return (<h1 className={theme}>Current theme: {theme}</h1>);
    };
    return (<ContextComponent />);
}

{
    "name": "sample-express",
    "version": "1.0.0",
    "description": "sample express server",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "express": "^4.18.2",
        "node-fetch": "^3.2.6"
    },
    "devDependencies": {
        "@types/express": "^5.0.6",
        "typescript": "^5.9.3"
    }
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
		<title>Weather Component</title>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            function App() {
const WeatherComponent = (props) => {
                    const [count, setCount] = React . useState(0);
React . useEffect(() => {
                        setCount(1);
                    }, []);
                    return (
                        <h1 onClick={() => setCount(count + 1)}>
                            The weather is {props.weather}, 
                            and the counter shows {count}
                        </h1>
                    );
                };
                return (<WeatherComponent weather="sunny" />);
            }
            const container = document.getElementById("root");
            const root = ReactDOM.createRoot(container);
            root.render(<App />);
        </script>
    </body>
</html>

import { routeHello, routeAPINames, routeWeather } from "./routes.js";
import express from "express";
import type { Request, Response } from "express";
import path from "path";
 
const server = express();
const port = 3000;
 
server.get("/components/weather", function (req: Request, res: Response): void {
    const filePath = path.join(process.cwd(), "public", "weather.html");
    res.setHeader("Content-Type", "text/html");
    res.sendFile(filePath);
});
 
server.listen(port, function (): void {
    console.log("Listening on " + port);
});

npx tsc
node index.js

mkdir sample-next
cd ./sample-next
npx create-next-app@latest --typescript --use-npm --no-app

cd my-app
npm run dev

app.get("/hello", (req, res) => {
  res.send("Hello World!");
});

import type { NextPage } from "next";
 
const Hello: NextPage = () => {
    return (<>Hello World!</>);
}
 
export default Hello;

import type { NextPage } from "next";
import React, { useState, useEffect} from "react";
 
const PageComponentWeather: NextPage = () => {
    interface WeatherProps {
        weather: string;
    }
    const WeatherComponent = (props: WeatherProps) => {
        const [count, setCount] = useState(0);
        useEffect(() => {
            setCount(1);
        }, []);
        return (
            <h1 onClick={() => setCount(count + 1)}>
                The weather is {props.weather},
                and the counter shows {count}
            </h1>
        );
    };
    return (<WeatherComponent weather="sunny" />);
};
 
export default PageComponentWeather;

import type { NextApiRequest, NextApiResponse } from "next";
 
type responseItemType = {
    id: string;
    name: string;
};
 
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
): Promise<NextApiResponse<responseItemType[]> | void> {
    const url = "https://www.usemodernfullstack.dev/api/v1/users";
    let data;
    try {
        const response = await fetch(url);
        data = (await response.json()) as responseItemType[];
    } catch (err) {
        return res.status(500);
    }
    const names = data.map((item) => {
        return { id: item.id, name: item.name };
    });
    return res.status(200).json(names);
}

[{"id":1,"name":"Olivia Smith"},{"id":2,"name":"Liam Johnson"},{"id":3,"name":"Noah Williams"},{"id":4,"name":"Emma Brown"},{"id":5,"name":"Oliver Jones"},{"id":6,"name":"Charlotte Garcia"},{"id":7,"name":"Elijah Miller"},{"id":8,"name":"Amelia Davis"},{"id":9,"name":"James Rodriguez"},{"id":10,"name":"Ava Martinez"}]

import type { NextApiRequest, NextApiResponse } from "next";
 
type WeatherDetailType = {
    zipcode: string;
    weather: string;
    temp?: number;
};
 
export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
): Promise<NextApiResponse<WeatherDetailType> | void> {
    return res.status(200).json({
        zipcode: req.query.zipcode,
        weather: "sunny",
        temp: 35
    });
}

import "@/styles/globals.css";
import type { AppProps } from "next/app";
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

.container {
    padding: 0 2rem;
    color: red;
}

import type { NextPage } from "next";
import styles from "@/styles/Home.module.css";
 
const Home: NextPage = () => {
    return (
        <div className={styles.container}>Hello World!</div>
    );
};
 
export default Home;

import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
 
const Hello: NextPage = () => {
    return (
        <div>
            <Head>
                <title>Hello World Page Title</title>
                <meta property="og:title" content="Hello World" key="title" />
            </Head>
            <div>Hello World!</div>
            <div>
                Use the HTML anchor for an <a href="https://nostarch.com">
                    external link</a> and the Link component for an
                <Link href="/components/weather"> internal page</Link>
                <Image
                    src="/vercel.svg"
                    alt="Vercel Logo"
                    width={72}
                    height={16}
                />
            </div>
        </div>
    );
};
export default Hello;

type responseItemType = {
    id: string;
    name: string;
};
 
export const fetchNames = async () => {
    const url = "https://www.usemodernfullstack.dev/api/v1/users";
    let data: responseItemType[] | [] = [];
    let names: responseItemType[] | [];
    try {
        const response = await fetch(url);
        data = (await response.json()) as responseItemType[];
    } catch (err) {
        names = [];
    }
    names = data.map((item) => { return { id: item.id, name: item.name }});
    return names;
};

import type {
    GetServerSideProps,
    GetServerSidePropsContext,
    InferGetServerSidePropsType,
        NextPage,
        PreviewData
} from "next";
import { ParsedUrlQuery } from "querystring";
import { fetchNames } from "../utils/fetch-names";
 
type responseItemType = {
    id: string;
    name: string;
};
 
const NamesSSR: NextPage = (props: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    const output = props.names.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
              {item.id} : {item.name}
            </li>
        );
    });
    return (
        <ul>
            {output}
        </ul>
    );
};
 
export const getServerSideProps: GetServerSideProps = async (
    context: GetServerSidePropsContext<ParsedUrlQuery, PreviewData>
) => {
    let names: responseItemType[] | [] = [];
    try {
        names = await fetchNames();
    } catch(err) {}
    return {
        props: {
            names
        }
    };
};
 
export default NamesSSR;

import type {
GetStaticProps,
    GetStaticPropsContext,
    InferGetStaticPropsType,
    NextPage,
    PreviewData,
} from "next";
import { ParsedUrlQuery } from "querystring";
import { fetchNames } from "../utils/fetch-names";
 
type responseItemType = {
    id: string,
    name: string,
};
 
const NamesSSG: NextPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
    const output = props.names.map((item: responseItemType, idx: number) => {
        return (
            <li key={`name-${idx}`}>
                {item.id} : {item.name}
            </li>
        );
    });
    return (
        <ul>
            {output}
        </ul>
    );
};
 
export const getStaticProps: GetStaticProps = async (
    context: GetStaticPropsContext<ParsedUrlQuery, PreviewData>
) => {
    let names: responseItemType[] | [] = [];
    try {
names = await fetchNames();
    } catch (err) {}
    return {
        props: {
            names
        }
    };
};
 
export default NamesSSG;