DrillLab
练习Practice

动手做Get your hands on it

练习跟着课文走 —— 每节课尾都有本课的练习。这一页是全部练习的总库,想集中刷题的时候来。 每个练习都写清了它来自哪一节,卡住了就回去看那一节。Practice follows the lessons — every lesson ends with the exercises for that lesson. This page is the whole library, for when you want to drill in one sitting. Each exercise names the lesson it came from, so you can go back when you stall.

0 / 148个做对过you got right
筛一下Filter these地基 · 项目与语言Foundations · project and language
难度LevelL1 → L4 和上面四档同一个意思:给你的东西越来越少L1 → L4: the same idea as the four tiers above — less is handed to you全部难度All levelsL1L1L2L2L3L3L4L4

已筛到你正在学的《地基 · 项目与语言》。想看全部就点上面的「全部」。Filtered to Foundations · project and language — the course you are on. Use “All” above to see everything.

练习Exercises

筛出 16 个练习(共 148 个) · 第 2 / 2 页。Showing 16 of 148 · page 2 / 2.
来自From ESM:import / export 与那些莫名其妙的报错ESM: import / export, and the errors that look strange at first · 地基 · 项目与语言Foundations · project and language
L2Debug LabDebug LabDebug Lab · ERR_MODULE_NOT_FOUNDDebug Lab · ERR_MODULE_NOT_FOUND

你在 node-subgraph/ 里跑 npm start, 服务器起不来。报错很长,但关键信息只有两行。

You run npm start inside node-subgraph/ and the server does not come up. The error is long, but only two lines of it matter.

第 1 步 · 先看现象和代码,别急着改Step 1 · read the symptom and the code before you touch anything
$ npm start node:internal/modules/esm/resolve:274 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/node-subgraph/src/dataSources/orderDataSource' imported from /Users/me/node-subgraph/src/index.js at finalizeResolution (node:internal/modules/esm/resolve:274:11) Did you mean to import "./dataSources/orderDataSource.js"?
JavaScriptsrc/index.js(第 2 行有问题)src/index.js (line 2 is the problem)示意Illustrative
1import { resolvers } from './resolvers/orderResolvers.js';
2import { OrderDataSource } from './dataSources/orderDataSource';
第 2 步 · 这是什么类型的错误Step 2 · what kind of error is this
来自From 类型、type 与 interfaceTypes, type and interface · 地基 · 项目与语言Foundations · project and language
L2填空Fill the blanks补全 NoteTable 的 props 类型Fill in the props type of NoteTable

这是 NoteTable 真实的 props 类型。 三个空:一个数组类型、一个函数类型的参数、一个函数类型的返回值。

This is the real props type of NoteTable. Three blanks: an array type, a parameter of a function type, and the return value of a function type.

TSXsrc/components/NoteTable/index.tsx3 个空3 blanks
1export interface NoteTableProps {
2 notes: ;
3 onDelete: (id: ) => void;
4 onEdit: (note: Note) => ;
5}
把 3 个空都填上才能检查(还差 3 个)Fill all 3 blanks to check (3 to go)
来自From 泛型参数,以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error · 地基 · 项目与语言Foundations · project and language
L1认出来Spot it这是谁的问题Whose problem is this

你刚 clone 好 react-notes-app,一行代码都还没写,先跑了npm run build,得到 10 个TS2582: Cannot find name 'test'。 同时 npx vitest run 显示 4 个测试全过。 最合理的判断是?

You have just cloned react-notes-app, written not one line of code, and run npm run build. You get 10 of TS2582: Cannot find name 'test'. At the same time npx vitest run shows all 4 tests passing. What is the most sensible conclusion?

先选一个选项Pick an option first
来自From 泛型参数,以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error · 地基 · 项目与语言Foundations · project and language
L2填空Fill the blanks补全泛型参数Fill in the generic parameters

两处真实的泛型用法。想清楚「TypeScript 能不能自己推断出来」。

Two real uses of generics. For each one, work out whether TypeScript can infer it on its own.

TSX两个真实片段Two real snippets3 个空3 blanks
1// NoteManager:两个 state
2const [notes, setNotes] = useState<>([]);
3const [noteToEdit, setNoteToEdit] = useState<Note | >(null);
4
5// q2/taskRunner.ts:自定义泛型
6export type Task<T> = () => <T>;
把 3 个空都填上才能检查(还差 3 个)Fill all 3 blanks to check (3 to go)