火星基地

💡前言最近学习了 Webpack 5 之后，想自己搭建个项目练练手，于是就搭建了一个基于 Webpack 5 的 React 的脚手架。脚手架配置了相关模块，集成了常用功能，便于自己以后 React 新项目的搭建，开箱即用！仓库地址：「Github」🔌模块/功能框架React路由react-router-domTypescript状态管理库redux样式预处理less、sass代码检测eslintgit commit前规范检测commitlint时间库dayjsUI库antd，配

最近使用 React + Hook + TS 写了一个练手的demo，练习了 React + Hook 的 TypeScript 写法。本文主要记录自己在写demo过程中，遇到关于 TypeScript 写法上的坑。demo地址：「ts-todo」1. 创建 TS 项目使用create-react-app创建React项目，应该没有什么坑，记得在创建React项目的时候，添加typescript配置即可：npx create-react-app app-name --template typescr

1. 游戏效果[→点击此处预览效果←]方向键控制蛇的移动方向蛇吃到食物后，身体多出一格，分数+1，食物重新刷新位置最大等级为9级，每3分升一级，升级后蛇的移动速度增加若蛇撞到边界或撞到自己，则游戏结束刷新页面后游戏重新开始2. 实现方法贪吃蛇小游戏用TypeScript编写，HTML骨架和CSS样式部分比较简单，很多方法都可以实现效果，这里就说一说TS的实现思路。因为小游戏比较简单，所以没用使用webpack等打包，直接写将TS编译后的JS文件引入页面。TS部分运用了面向对象的编程思

一、基本类型1. 类型声明类型声明是TS非常重要的一个特点通过类型声明可以指定TS中变量（参数、形参）的类型指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值语法：let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...}2. 自动类型判断TS拥有自动的类型判断机制当对变量的声明和赋值是同时进行

1. 定义类类的属性：实例属性：直接定义的属性，通过对象的实例访问静态属性（类属性）：static开头，无需创建实例，通过类去访问只读属性：readonly开头，无法修改类的方法：实例方法：直接定义的方法类方法：static开头，通过类去访问class Person { // 直接定义的属性 age = 18; // 静态属性（类属性） static gender = 'man'; // 只读属性 readonly name = 'Ja