这篇教程从终端第一行命令开始,教你配置TypeScript开发环境、克隆mattpocock-skills练习项目、完成首个类型推断挑战、运行即时测试反馈,并优化VS Code以获得最佳类型体验。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

你想在真实项目中写出不靠any撑场面、改接口时编译器自动报错、别人接手时一眼看懂数据流向的TypeScript代码,但卡在环境配不起来、练习跑不通、类型报错看不懂这三关上——这篇教程就从你打开终端的第一行命令开始。
安装Node.js和pnpm并验证基础环境
先确认你的系统已安装Node.js 18.17+或20.9+,执行node -v查看版本;若未安装,请去官网下载LTS版安装包,勾选“Add to PATH”选项再运行安装程序。
用npm安装pnpm:npm install -g pnpm。这一步不能跳过,因为mattpocock-skills仓库所有脚本都基于pnpm lockfile设计,用npm或yarn会导致依赖解析失败、类型检查路径错乱。
执行pnpm -v输出版本号即表示成功;若提示“command not found”,请重启终端或运行source ~/.zshrc(macOS/Linux)或重新打开PowerShell(Windows)。
克隆并启动mattpocock-skills练习环境
在空文件夹中执行:git clone https://github.com/mattpocock/skills.git && cd skills。
运行pnpm install安装全部依赖;注意此时不要运行pnpm dev——这个命令会启动一个本地Web服务,但新手第一课应直接进VS Code操作源码,避免被浏览器界面干扰注意力。
用VS Code打开当前文件夹,确保已安装官方TypeScript插件;右键点击packages/skills/src/001-infer-return-type.ts,选择“Open in Integrated Terminal”,该文件是第一个练习,也是整个技能树的入口点。
完成首个类型挑战:推断函数返回类型
第一步:观察左侧注释里写的任务目标——“You need to infer the return type of this function”。右侧编辑区里有一段带// @ts-expect-error标记的代码,说明此处必须出错才对,你得把它改成能通过编译的状态。
第二步:把光标放在const result = getUserName();这一行,按下Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),输入“Quick Fix”,回车,选择“Infer type of ‘result’”。
Python基础语法库,覆盖30+核心主题:数据类型、字符串操作、运算符、列表/元组/字典/集合、条件语句与循环、函数定义与高级函数(lambda/map/filter/reduce)、装饰器、生成器与迭代器、面向对象编程(类/继承/多态/魔术方法)、模块与包管理、文件IO、异常处理、常用内置函数与标准库(os/sys/json/datetime/collections)、类型提示、推导式。适用场景:Python语法查询、数据类型操作、函数编写、面向对象设计、模块使用、文件读写、异常捕获、装饰器编写、生成
第三步:VS Code会自动在const result前插入: string;但别停在这——继续把光标移到getUserName函数名上,按F12跳转到定义,你会发现它返回的是Promise
第四步:删除const result: string =中的: string,保存文件;此时左侧测试状态栏应显示绿色勾号,表示你已通过#001挑战。
运行本地测试并理解反馈机制
在终端中执行pnpm test:watch,它会启动一个持续监听文件变更的测试进程。
修改001-infer-return-type.ts中任意一行,比如给getUserName()加个参数,你会立刻看到终端输出红色报错,并精准定位到哪一行破坏了类型契约——这种即时反馈才是mattpocock-skills的核心价值,不是教你语法,而是训练你读报错的能力。
方法一:想快速验证某个练习是否通过,直接在对应文件末尾加一句export {},防止TS将其视为全局脚本;方法二:想跳过当前练习去试下一个,把文件名里的数字前缀改大,比如002-...,测试脚本会自动识别并运行新编号的文件。
配置VS Code以获得最佳类型体验
打开VS Code设置(Cmd+,),搜索“typescript.preferences.includePackageJsonAutoImports”,设为auto;这项设置能让import语句补全时自动从package.json读取types字段,避免手写路径出错。
在工作区根目录创建.vscode/settings.json,粘贴以下内容:
{ "typescript.preferences.useAliasesForBuiltinTypes": true, "editor.quickSuggestions": { "strings": "on" } }
这会让Array














