Matt Pocock Skills新手入门教程:怎么从零开始掌握TypeScript技巧

落强酱_7675

落强酱_7675

2026-11-04

637人浏览

原创

这篇教程从终端第一行命令开始,教你配置TypeScript开发环境、克隆mattpocock-skills练习项目、完成首个类型推断挑战、运行即时测试反馈,并优化VS Code以获得最佳类型体验。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

matt pocock skills新手入门教程:怎么从零开始掌握typescript技巧 - php中文网

你想在真实项目中写出不靠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’”。

第三步:VS Code会自动在const result前插入: string;但别停在这——继续把光标移到getUserName函数名上,按F12跳转到定义,你会发现它返回的是Promise,而你刚标的string会立刻触发类型错误。这说明手动标注反而破坏了推断链,【必须删掉手动添加的类型标注,让TS自己推导】。

pyhon-skills
pyhon-skills

Python基础语法库,覆盖30+核心主题:数据类型、字符串操作、运算符、列表/元组/字典/集合、条件语句与循环、函数定义与高级函数(lambda/map/filter/reduce)、装饰器、生成器与迭代器、面向对象编程(类/继承/多态/魔术方法)、模块与包管理、文件IO、异常处理、常用内置函数与标准库(os/sys/json/datetime/collections)、类型提示、推导式。适用场景:Python语法查询、数据类型操作、函数编写、面向对象设计、模块使用、文件读写、异常捕获、装饰器编写、生成

下载

第四步:删除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自动显示为string[],并在字符串字面量中启用智能补全——很多初学者卡在类型报错,其实是编辑器没把类型信息正确渲染出来,而不是代码本身有问题。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

312

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

540

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

391

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

306

29

TypeScript Node.js 全栈工程化与Monorepo架构实践
TypeScript Node.js 全栈工程化与Monorepo架构实践

本专题围绕 TypeScript 在 Node.js 全栈开发中的工程化实践展开,系统讲解 Monorepo 架构设计、包管理策略、模块复用机制以及服务端与前端统一类型系统的构建方法。通过真实项目案例,帮助开发者提升大型全栈项目的可维护性与协作效率。

2026.06.16

698

8

TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

2026.02.13

312

17

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

2026.02.25

540

17

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

2026.03.13

391

19

TypeScript 全栈开发进阶指南
TypeScript 全栈开发进阶指南

面向有 JavaScript 基础的开发者,深入讲解 TypeScript 的类型系统与全栈开发实践。

2026.06.03

306

29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.8万人学习