讲师中心 微信公众号
AI工具推荐 视频效率加速

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

落强酱_7675

落强酱_7675

发布时间:2026-11-04 17:03:33

|

637人浏览过

|

来源于php中文网

原创

这篇教程从终端第一行命令开始,教你配置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’”。

pyhon-skills
pyhon-skills

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

下载

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

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

热门AI工具

更多
咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

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

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

312

2026.02.13

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

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

540

2026.02.25

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

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

391

2026.03.13

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

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

306

2026.06.03

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

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

698

2026.06.16

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

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

312

2026.02.13

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

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

540

2026.02.25

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

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

391

2026.03.13

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

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

精品课程

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

共0课时 | 0人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

共21课时 | 1.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn