TypeScript
1、简介
TypeScript是什么？
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
-
以JavaScript为基础的语言
-
一个JavaScript的超集
-
可以在任何支持JavaScript的平台中执行
-
TS 不嫩被 JS 解析器直接执行
-
typescript扩展了JavaScript，并添加了类型！
TypeScript增加了什么？
-
类型
-
添加ES不具备的新特性
-
支持ES的新特性
-
强大的开发工具
-
丰富的配置选项
2、TypeScript开发环境搭建
1、下载Node.js
-
win64位：https://npmmirror.com/mirrors/node/v16.16.0/node-v16.16.0-x64.msi
-
mac (.pkg)：https://npmmirror.com/mirrors/node/v16.16.0/node-v16.16.0.pkg
2、安装Node.js，官网地址：http://nodejs.cn/
3、使用npm全局安装typescript
-
进入命令行
-
输入：npm install -g typescript
4、创建一个ts文件
5、使用tsc对ts文件进行编译
-
进入命令行
-
进入ts文件所在目录
-
执行命令：tsc xxx.ts
3、基本类型
类型声明
-
类型声明是TS非常重要的一个特点
-
通过类型声明可以执行TS中变量（参数、形参）的类型
-
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
-
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
语法：
let 变量：类型;
let 变量：类型 = 值;
function fn(参数：类型，参数：类型)：类型{
...
}自动类型判断
-
TS拥有自动的类型判断机制
-
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
-
所以如果你的变量的声明和赋值是同时进行的，可以省略掉类型声明
类型：
| 类型 | 例子 | 描述 |
|---|---|---|
| number | 1，-33，2.5 | 任意数字 |
| string | ‘hi’，“hi”,hi | 任意字符串 |
| boolean | true、false | 布尔值false或true |
| 字面量 | 其本身 | 限制变量的值就是该字面量的值 |
| any | * | 任意类型 |
| unknown | * | 类型安全的any |
| void | 空值（undefined） | 没有值（或undefined） |
| nerver | 没有值 | 不能是任意值 |
| object | {name:’yykk’} | 任意的 JS 对象 |
| array | [1,2,3] | 任意的 JS 数组 |
| tuple | [4,5] | 元素，TS 新增类型，固定长度数组 |
| enum | enum{A,B} | 枚举，TS中新增类型 |
基本类型的测试
// 声明一个变脸a，同时指定它的类型为number
var a;
//a 的类型设置为number，在以后的使用过程中a只能是数字
a = 10;
a = 1;
// a = 'hi'; // 此行代码会报错，因为变量a的类型是number，不能赋值字符串
var b;
b = 'hello';
// b = 123;
// 声明变量完直接赋值
// let c:boolean = false;
// 如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测
let c = false;
c = true;
// js中的函数时不考虑参数的类型
// function sum(a,b) {
// return a + b;
// }
// console.log(sum(123,456));
// console.log(sum(123,"456"));
function sum(a:number,b:number):number {
return a + b;
}
// console.log(sum(123,"345"));
---------------------------------------------------
// 也可以直接使用字面量进行类型声明
let x: 10;
x = 10;
// 也可以使用 | 来连接多个类型（联合类型）
let o: "male" | "fmale";
o = "male";
o = "fmale";
let e:boolean | string;
e = true;
e = "hello";
// any 表示的是任意类型，一个变量类型设置为any后相当于关闭了ts的类型检测！
// let d:any;
// 声明变量如果不指定类型，则ts解析器会自动判断类型为any（隐式any）
let d;
d = 10;
d = true;
d = 'hello';
// unknown 表示未知的类型
let f:unknown;
f = 10;
f = true;
f = 'hello';
let s:string;
// d 的类型是any，他可以给任意变量赋值
// f = d;
e = 'hello';
// unknown 实际上就是一个类型安全的any
// unknown 类型的变量，不能直接赋值给其他变量
if (typeof e === 'string') {
f = e;
}
// 类型断言,可以用来告诉解析器变量的实际类型
/**
* 语法：
* 变量 as 类型
* <类型>变量
*/
f = e as string;
f = <string>e;
// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn() :void {
}
// never 表示永远不会返回结果
function fn2() :never {
throw new Error("报错了!");
}
---------------------------------------------------
let q :object;
q = {};
q = function () {};
// {} 用来指定对象中可以包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
// 在属性名后面加上？，就表示是可选的
let w :{name:string,age?:number};
w = {name : 'yykk',age: 3}
// [propName:string]:any 表示任意类型的属性
let t :{name:string,[propName:string]:any};
t = {name : 'yykk',age: 3,gender:"男"}
/**
* 设置函数结构的类型声明：
* 语法：（形参：类型，形参：类型...）=> 返回值
*/
let g :(a:number,b:number) => number;
g = function(n1:number,n2:number) :number {
return 10;
}
/**
* 数组的类型声明：
* 类型[]
* Array<类型>
*/
// string[] 表示字符串数组
let h :string[];
h = ['a','b','c']
// number[] 表示数字数组
let z:number[];
let l :Array<number>;
l = [1,2,3]
/**
* 元组：元组就是固定长度的数组
* 语法：[类型,类型,类型]
*/
let y: [string,number];
y = ['hello',123]
/**
* enum 枚举
* */
enum Gender{
Male,
Fmale
}
let p: {name:string,gender:Gender.Male}
p = {
name: 'yykk',
gender:Gender.Male
}
console.log(p.gender === Gender.Male)
// & 表示同时
let j : {name: string} & {age:number};
j = {name:'yykk',age:1}
// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k : myType;
let v :myType;4、编译选项
-
自动编译文件
-
编译文件时，使用 -w指令后，TS 编译器会自动监测文件的变化，并在文件发生变化时对文件进行重新编译。
-
实例：
-
tsc xxx.ts -w
-
-
自动编译整个项目
-
如果直接使用tsc指令，就可以自动将当前项目下的所有文件编译成 js 文件。
-
但是能直接使用tsc命令的前提是，要先在根目录下创建一个ts的配置文件 tsconfig.json
-
命令：tsc --init
-
tsconfig.json是一个JSON文件，添加配置文件后，只需要tsc命令即可完成对整个项目的编译
-
配置选项：
-
include
-
定义希望被编译文件所在的目录
-
默认值：[“** */ *”]
-
示例：
-
"include":["src/**/*","tests/**/*"] -
上述示例中，所有src目录下和tests目录下的文件都会被编译
-
-
-
exclude
-
定义需要排除在外的目录
-
默认值：[“node_modules”,”brow_components”,”jspm_packages”]
-
示例：
-
"exclude":["./src/hello/**/*"] -
上述示例中，src下的hello 目录都不会被编译
-
-
-
extend
-
定义被继承的配置文件
-
示例：
-
"extends":"./configs/base" -
上述案例中，当配置文件中自动包含config目录下base.json中的所有配置信息
-
-
-
files
-
指定被编译文件的列表，只有需要编译的文件少时才会用到
-
示例：
-
"files":[ "core.ts", "sys.ts", "scanner.ts", "binder.ts", "tsc.ts", "checker.ts", "utilties.ts", "parser.ts" ] -
列表中的文件都会被TS编译器所编译
-
-
-
compilerOptions
-
编译选项是配置文件中非常重要也比较复杂的配置选项
-
在compilerOptions中包含了多个子项目，用来完成对编译的配置
-
配置选项
-
target
-
设置ts代码的编译的版本
-
可选值：
-
ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
-
-
示例：
-
"compilerOptions":{ "target":"ES6" } -
如上设置，我们锁编译的ts代码会被编译成ES6版本的js代码
-
-
lib
-
指定代码运行时所包含的库（宿主环境）
-
可选值：
-
ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext、DOM、WebWorker、ScriptHost…
-
-
示例：
-
"compilerOptions":{ "target":"ES6". "lib":["ES6,""DOM], "outDir":"dist", "outFile":"dist/xxx.js" }
-
-
-
module
-
设置编译后代码使用的模块化系统
-
可选值：
-
CommonJS、UMD、ADM、System、ES2020、ESNext、None、ES6
-
-
示例：
-
"compilerOptions":{ "module":"CommonJS" }
-
-
-
outDir
-
编译后文件的所在目录
-
默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以更改编译成功后的文件位置
-
-
outFile
-
将代码合并为一个文件
-
outFile 设置后，所有的全局作用域中的代码会合并到同一个文件中
-
-
allowJS
-
默认为false，是否对 JS 文件进行编译
-
-
checkJS
-
是否检查对 JS 代码是否符合语法规范，默认为false
-
-
removeComments
-
是否移除注释，默认为false
-
-
noEmit
-
不生成编译后的文件，默认为false
-
-
noEmitOnError
-
当有错误时不生成编译后的文件，默认为false
-
-
alwaysStrict
-
用来设置编译后的文件是否使用严格检查模式，默认为false
-
-
noImplicitAny
-
不允许隐式的any类型
-
-
noImplicitThis
-
不允许不明确类型的this，默认值为false
-
-
strictNullChecks
-
严格的检查空值
-
-
strict
-
所有严格检查的总开关
-
-
……
-
-
-
-
-
配置文件参数如下：
{
"compilerOptions": {
/* 访问 https://aka.ms/tsconfig.json 以阅读有关此文件的更多信息 */
/* 基本选项 */
"incremental": true, /* 启用增量编译 */
"target": "ESNEXT", /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */
"module": "commonjs", /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */
"lib": [], /* 指定要包含在编译中的库文件。 */
"allowJs": true, /* 允许编译 javascript 文件。 */
"checkJs": true, /* 报告 .js 文件中的错误。 */
"jsx": "preserve", /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */
"declaration": true, /* 生成相应的“.d.ts”文件。 */
"declarationMap": true, /* 为每个对应的“.d.ts”文件生成一个源映射。 */
"sourceMap": true, /* 生成相应的“.map”文件。 */
"outFile": "./", /* 连接输出到单个文件。 */
"outDir": "./", /* 将输出结构重定向到目录。 */
"rootDir": "./", /* 指定输入文件的根目录。用于通过 --outDir 控制输出目录结构。 */
"composite": true, /* 启用项目编译 */
"tsBuildInfoFile": "./", /* 指定文件存放增量编译信息 */
"removeComments": true, /* 不要向输出发出注释（删除除代码注释）。 */
"noEmit": true, /* 不发出输出（不生成编译后的文件）。 */
"noEmitOnError": true, /* 在输出js代码时，如果有错将不编译文件。 */
"importHelpers": true, /* 从 'tslib' 导入发射助手。 */
"downlevelIteration": true, /* 以“ES5”或“ES3”为目标时，为“for-of”、展开和解构中的迭代提供全面支持。 */
"isolatedModules": true, /* 将每个文件转换为一个单独的模块（类似于 'ts.transpileModule'）。 */
/* 严格的类型检查选项 */
"strict": true, /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */
"strictNullChecks": true, /* 启用严格的空（undefined、null）检查，可以防止“未定义不是对象”。 建议开启*/
"strictFunctionTypes": true, /* 启用函数类型的严格检查。 */
"strictBindCallApply": true, /* 在函数上启用严格的“绑定”、“调用”、应用”方法。 */
"strictPropertyInitialization": true, /* 启用对类中属性初始化的严格检查。 */
"noImplicitThis": true, /* 使用隐含的“any”类型在“this”表达式上引发错误。 */
"noImplicitAny": true, /* 使用隐含的“any”类型在表达式和声明上引发错误（主要用于控制变量、参数是否必须知道它们的类型【类型检查】），如果是将JavaScript迁移到TypeScript时，可以关闭此项，但不建议这样做。 */
"alwaysStrict": true, /* 以严格模式解析并为每个源文件发出“使用严格”。 */
/* 额外检查 */
"noUnusedLocals": true, /* 报告未使用的本地人的错误。 */
"noUnusedParameters": true, /* 报告未使用参数的错误。 */
"noImplicitReturns": true, /* 不是函数中的所有代码路径都返回值时报告错误。 */
"noFallthroughCasesInSwitch": true, /* 在 switch 语句中报告失败情况的错误。 */
/* 模块分辨率选项 */
"moduleResolution": "node", /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */
"baseUrl": "./", /* 解析非绝对模块名称的基目录。 */
"paths": {}, /* 一系列将导入重新映射到相对于“baseUrl”的查找位置的条目。 */
"rootDirs": [], /* 根文件夹列表，其组合内容代表运行时项目的结构。 */
"typeRoots": [], /* 包含类型定义的文件夹列表。 */
"types": [], /* 类型声明文件要包含在编译中。 */
"allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */
"esModuleInterop": true, /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */
"preserveSymlinks": true, /* 不解析符号链接的真实路径。 */
"allowUmdGlobalAccess": true, /* 允许从模块访问 UMD 全局变量。 */
/* 源映射选项 */
"sourceRoot": "", /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置。 */
"mapRoot": "", /* 指定调试器应该定位映射文件而不是生成位置的位置。 */
"inlineSourceMap": true, /* 发出带有源映射的单个文件而不是单独的文件。 */
"inlineSources": true, /* 在单个文件中与源映射一起发出源； 需要设置“--inlineSourceMap”或“--sourceMap”。 */
/* 实验选项 */
"experimentalDecorators": true, /* 启用对 ES7 装饰器的实验性支持。 */
"emitDecoratorMetadata": true, /* 为装饰器的发射类型元数据启用实验性支持。 */
/* 高级选项 */
"skipLibCheck": true, /* 跳过声明文件的类型检查。 */
"forceConsistentCasingInFileNames": true /* 禁止对同一文件的大小写不一致的引用。 */
}
}
tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息对代码进行编译
-
“include” 用来指定哪些ts文件需要编译
-
路径 **代表任意目录
-
-
代表任意文件
-
-
-
“exclude”不需要被编译的文件目录
-
默认值：[“node_modules”,”brow_components”,”jspm_packages”]
-
5、webpack整合
通常情况下，实际开发中我们需要使用构建工具对代码进行打包，TS 同样也可以结合构建工具一起使用，下边以webpack为例介绍一下结合构建工具使用TS。
步骤：
-
初始化项目
-
进入项目根目录，执行命令：
npm init -y -
主要作用：创建package.json文件
-
-
下载构建工具
-
npm i -D webapck webapck-cli webpack-dev-server typeescript ts-loader clean-webpack-plugin -
安装以上依赖
-
webpack
-
构建webpack
-
-
webpack-cli
-
webpack的命令行工具
-
-
webpack-dev-server
-
webpack的开发服务端
-
-
typescript
-
ts编译器
-
-
ts-loader
-
ts加载器，用于在webpack中编译ts文件
-
-
clean-webpack-plugin
-
webpack的清除操作，每次构建都会先清除目录
-
-
-
-
根目录下创建webpack的配置文件webpack.config.js
// 引入一个包
const path = require('path')
// webpack 中的所有配置信息都应该写在module.export中
module.exports = {
// 指定入口文件
entry:"./src/index.html",
devtool:"inline-source-map",
devServer:{
contentBase:'./dist',
},
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname,'dist'),
// 打包后文件的目录
filename:"bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选！
}
},
// 指定webpack 打包时使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test 指定的是规则生效的文件
test:/\.ts$/,
// 要使用的loader
use:'ts-loader',
// 要排除的文件
exclude:/node_modules/
}
]
}
}-
创建tsconfig.json文件，如果是vscode，命令创建：
tsc --init
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
}
}-
将package.json文件中的script添加如下：
"scripts": {
"build":"webpack"
}-
执行命令：
npm run build，将我们的文件进行打包编译！
在这里我们发现一个问题，如果想要生成html页面，还需要进行对应的配置以及页面的引入，这无疑是很麻烦的，所以在这里推荐使用以下方式进行：
1、安装html插件实现页面自动生成配置！
npm i -D html-webpack-plugin
2、打开配置webpack.config.js
// 引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 配置webpack插件
plugins: [
new htmlWebpackPlugin({
title:'自定义title',
// template:'./src/index.html' // 可以实现自定义模板！
}),
]
}3、然后再次执行 npm run build 你会发现你的dist/ 会生成html页面！
实现热部署
-
安装插件
npm i -D webpack-dev-server
-
配置package.json
"scripts": {
"start": "webpack serve --open --mode development"
},如果你报错显示没有配置mode，那么还需要在webpack.config.js文件中进行配置：
module.exports = {
mode: 'development' // 设置mode
}-
测试！
npm run build
参考博客：https://blog.csdn.net/qq_34979346/article/details/99840181
区别是，你更新代码时一个文件不再被需要了，并把源文件删除，然后替换的问题就是，编译后的文件还在dist文件夹里，并没有一起删除，然后替换的问题就是，编译后的文件还在dist文件夹里，并没有一起删除！
就是说如果你每次更新不会删除你之前打包好的，直接更新你的dist下的文件，步骤如下：
1、安装依赖
npm i -D clean-webpack-plugin
2、配置webpack.config.js
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
]3、测试！
npm run build
注意：我们这里实现了很多，但是还有一个很重要的问题，那就是文件的引入，在我们的webpack中需要进行如下配置：
// 用来设置引用模块
resolve: {
extensions:['.ts','.js']
}如果你不进行配置，webpack是没办法识别的，配置的意思就是将以 .ts / .js 文件可以进行引入！
6、babel整合
在我们的业务开发中，如果只是使用webpack，无法满足我们的要求，这个时候我们就需要babel配合webpack进行使用！
1、首先导入依赖！
npm i -D @babel/core @babel/preset-env babel-loader core-js
2、配置文件的编写webpack.config.js文件配置：
// 引入一个包
const path = require('path')
// 引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 中的所有配置信息都应该写在module.export中
module.exports = {
// 指定入口文件
entry:"./src/index.ts",
// devtool:"inline-source-map",
// devServer:{
// contentBase:'./dist',
// },
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname,'dist'),
// 打包后文件的目录
filename:"bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选！
}
},
// 指定webpack 打包时使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test 指定的是规则生效的文件
test:/\.ts$/,
// 要使用的loader
use:[
// 配置babel---开始babel配置
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"88",
"ie":"11"
},
// 指定core-js的版本
"corejs":"3",
// 使用core-js的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
}, // --- 结束
'ts-loader'
],
// 要排除的文件
exclude:/node_modules/
}
],
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
title:'自定义title',
// template:'./src/index.html'
}),
],
// 用来设置引用模块
resolve: {
extensions:['.ts','.js']
},
mode: 'development' // 设置mode
}3、进行测试，可以看到我们的代码可以在老版浏览器中运行了！
npm run build | npm start
如果进行npm start进行运行记得配置package.json：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open --mode development"
}
完整配置如下：
package.json
{
"name": "part3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.24.0",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
}
}webpack.config.js
// 引入一个包
const path = require('path')
// 引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 中的所有配置信息都应该写在module.export中
module.exports = {
// 指定入口文件
entry:"./src/index.ts",
// devtool:"inline-source-map",
// devServer:{
// contentBase:'./dist',
// },
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname,'dist'),
// 打包后文件的目录
filename:"bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选！
}
},
// 指定webpack 打包时使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test 指定的是规则生效的文件
test:/\.ts$/,
// 要使用的loader
use:[
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"88",
"ie":"11"
},
// 指定core-js的版本
"corejs":"3",
// 使用core-js的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude:/node_modules/
}
],
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
title:'自定义title',
// template:'./src/index.html'
}),
],
// 用来设置引用模块
resolve: {
extensions:['.ts','.js']
},
mode: 'development' // 设置mode
}
7、面向对象
面向对象是程序中一个非常重要的思想， 它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。
-
举例来说:
-
操作浏览器要使用window对象
-
操作网页要使用document对象
-
操作控制台要使用console对象
-
一切操作都要通过对象， 也就是所谓的面向对象，那么对象到底是什么呢?这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如:照片是对一个具体的人的抽象， 汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一 颗子弹等等所有的事物。 -个事物到了程序中就变成了一个对象。
在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中切皆是对象。
1、类(class)
要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。 要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说:可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。
-
定义类
class 类名 {
属性名: 类型;
constructor(参数:类型) {
this.属性名 = 参数;
}
方法名() {
...
}
}示例：
/**
* 使用class关键字定义
* 对象中主要包含了两个部分：
* 属性
* 方法
*/
class Person {
/**
* 直接定义的属性是实例属性，需要通过对象去访问：
* const per = new Person(); per.name
* 使用static开头的属性是静态属性（类属性），可以直接通过类去访问！Person.name
*
* readonly 开头的属性表示这是一个只读属性无法修改，可以搭配static 一起使用！static readonly
*/
readonly name: string;
age: number;
// 在属性前使用static关键字可以定义类属性（静态属性）
// static age:number = 12;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 调用方法
/**
* 方法加上static就是类方法，可以通过类去直接调用！
*/
static sayHello() {
console.log("hi,nice to meet you!");
}
}
const per = new Person('yykk', 1);
console.log(per.name, per.age);
// console.log(Person.age)
// per.sayHello()
Person.sayHello()
2、构造函数&this
示例：
class Dog{
name :string;
age :number;
/**
* constructor 被成为构造函数，会在对象创建时调用！
* @param name
* @param age
*/
constructor(name:string,age:number) {
/**
* 在实例方法中，this就表示当前的实例
* 在构造函数中当前对象就是新创建的那个对象
* 可以通过this向新建的对象中添加属性
*/
this.name = name;
this.age = age;
}
bark() {
alert('汪汪汪！')
// 在方法中可以通过this来表示当前调用方法的对象
console.log(this);
}
}
const dog = new Dog('yykk',3);
const dog2 = new Dog('jacker',2);
console.log(dog);
console.log(dog2);
dog.bark()
3、继承简介
(function () {
// 定义一个动物类
class Animal {
name:string;
age:number;
constructor(name:string,age:number) {
this.name = name;
this.age = age;
}
sayHello() {{
console.log("动物们在叫~~~!");
}}
}
// 定义一个表示狗的类
class Dog extends Animal{
run() {
console.log(`${this.name}在跑~~`);
}
sayHello() {{
console.log("汪汪汪");
}}
}
// 定义一个表示猫的类
class Cat extends Animal{
sayHello() {{
console.log("喵喵喵");
}}
}
const dog = new Dog('旺财',3)
const cat = new Cat('咪咪',3)
console.log(dog);
dog.run()
console.log(cat);
dog.sayHello()
cat.sayHello()
})()
4、super
示例：
(function () {
// 定义一个动物类
class Animal {
name:string;
constructor(name:string) {
this.name = name;
}
sayHello() {{
console.log("动物们在叫~~~!");
}}
}
class Dog extends Animal{
age: number;
// 如果子类中写了构造函数，在子类构造函数中必须对父类进行调用super()
constructor(name:string,age:number) {
super(name); // 调用父类的构造函数
this.age = age;
}
sayHello() {{
console.log("汪汪汪");
}}
}
const dog = new Dog("旺财",3)
})()
5、抽象类（abstract）
示例：
(function () {
/**
* 以abstract开头的类是抽象类
* 抽象类与其他的区别：只是不能用来创建对象
* 抽象类就是专门用来继承的类
*/
abstract class Animal {
name:string;
constructor(name:string) {
this.name = name;
}
/**
* 定义一个抽象方法
* 抽象方法使用abstract开头，没有方法体
* 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写！
*/
abstract sayHello():void ;
}
class Dog extends Animal{
sayHello() {{
console.log("汪汪汪");
}}
}
const dog = new Dog("uk")
dog.sayHello()
})()
6、接口
示例：
(function () {
type myType = {
name:string,
age:number,
[propName:string] :any
};
/**
* 接口用力啊定义一个类结构,用来定义一个类中应该包含哪些属性和方法
* 同时接口也可以当成类型声明去使用！
*/
interface myIntergace {
name: string,
age:number
}
interface myIntergace {
gender: string
}
const obj: myIntergace = {
name: 'cv',
age: 1,
gender: '男'
}
/**
* 接口在定义类的时候去限制类的结构
* 接口中的所有属性都不能有实际的值
* 接口指定以对象的结构，而不考虑实际值
* 在接口中的所有方法都是抽象方法
*/
interface myInter {
name:string,
sayHello():void;
}
/**
* 定义类时，可以使类去实现一个接口
* 实现接口的类满足接口的需求
*/
class MyClass implements myInter{
name: string;
constructor(name:string) {
this.name = name;
}
sayHello(): void {
console.log("hello,word");
}
}
})()
7、属性的封装
示例：
(function () {
// 定义一个表示人的类
class Person {
/**
* public 修饰的属性可以在任意地方访问（修改）默认值
* private 私有属性，私有属性只能在类内部进行修改（访问）
* 通过在类中添加方法使得私有属性可以被外部访问
* protected 受保护的属性，只能在当前类和子类中使用
*/
private _name: string;
private _age: number;
constructor(name:string,age:number) {
this._name = name;
this._age = age;
}
/**
* getter() 用来读取数据
* setter() 用户设置属性
* - 他们被称为属性的存取器
*
*/
// getName() {
// return this._name;
// }
// // 定义方法，用来设置name
// setName(value:string) {
// this._name = value;
// }
// getAge() {
// return this._age;
// }
// // 定义方法，用来设置name
// setAge(value:number) {
// if (value >= 0) {
// this._age = value;
// }
// }
// TS 中设置getter、setter方法的方式
get name() {
return this._name
}
set name(value) {
this._name = value
}
get age() {
return this._age
}
set age(value) {
if (value >= 0) {
this._age = value
}
}
}
const per = new Person("yykk",18)
console.log(per);
/**
* 现在属性是在对象中设置的，属性可以任意的被修改
* 属性可以被任意修改会导致对象中的数据变的非常不安全
*/
// per._name = 'uk';
// per._age = 3
// per.setName('uk')
// per.setAge(3)
// console.log(per.getName());
console.log(per.name);
class A {
protected num:number
constructor(num:number) {
this.num = num;
}
}
class B extends A{
test() {
console.log(this.num);
}
}
const b = new B(123);
// b.num = 3
class C {
/**
* 可以直接将属性定义在构造函数中：
* 好处：省略了定义、省略了this.xxx = xxx
* */
constructor(public name: string,public age :number) {
}
}
})()命令生成get、set方法！
tsc 项目名 -t es5 就可以用get 和 set了
8、泛型
示例：
// function fn(a:any):any {
// return a;
// }
/**
* 在定义函数或是类时，如果遇到类型不确定就可以使用泛型
*/
function fn<T>(a:T): T{
return a;
}
// 可以直接调用具有泛型的函数
let res = fn(10); // 不指定泛型，ts就会自动对类型进行推断
let rs = fn<string>('hello'); // 指定泛型
function fn2<T,K>(a: T,b: K): T {
console.log(b);
return a;
}
fn2<number,string>(123,'yykk')
interface Inter{
length: number;
}
// T extends Inter 表示泛型T必须是Inter的实现类（子类）
function fn3<T extends Inter>(a: T):number {
return a.length;
}
fn3({length:10})
class MyClass<T> {
name: T;
constructor(name: T) {
this.name = name
}
}
const my = new MyClass<string>("yykk")
8、项目整合
01、项目搭建
这里使用编译器：vscode
-
创建一个Gluttonous Snake目录，作为项目的根目录
-
代开命令行窗口，使用npm 初始化项目，代码如下：
npm init -y-
在项目中导入ts
`npm i -D webapck webapck-cli webpack-dev-server typeescript ts-loader clean-webpack-plugin html-webpack-plugin `
# 可以根据自己需要是否整合babel
@babel/core @babel/preset-env babel-loader core-js
npm i -D less less-loader css-loader style-loader
# 实现不同浏览器兼容的处理
npm i -D postcss postcss-loader postcss-preset-env-
ts编译配置
创建tsconfig.json文件，这个文件是ts编译器的配置文件，文件内容如下：
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
"noEmitOnError": true,
"sourceMap": false,
"outDir": "./dist"
},
"exclude": ["node_modules"],
"include": ["./src/**/*"]
}
-
package.json
{
"name": "snake",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve --open --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.24.0",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"postcss": "^8.1.10",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.7.2",
"postcss-url": "^10.1.1",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}-
webpack.config.js
// 引入一个包
const path = require('path')
// 引入html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// webpack 中的所有配置信息都应该写在module.export中
module.exports = {
// 指定入口文件
entry:"./src/index.ts",
// devtool:"inline-source-map",
// devServer:{
// contentBase:'./dist',
// },
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname,'dist'),
// 打包后文件的目录
filename:"bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选！
}
},
// 指定webpack 打包时使用的模块
module: {
// 指定要加载的规则
rules: [
{
// test 指定的是规则生效的文件
test:/\.ts$/,
// 要使用的loader
use:[
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"88",
"ie":"11"
},
// 指定core-js的版本
"corejs":"3",
// 使用core-js的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude:/node_modules/
},
// 指定less文件处理
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options: {
postcssOptions: {
// 这里不能写成数组，一定是写成这种函数形式，否则会一直提示如下错误！
// Error: [object Object] is not a PostCSS plugin
plugins: () => {
"postcss-preset-env",
{
browsers:'last 1 versions'
}
}
}
}
},
"less-loader"
]
}
],
},
// 配置webpack插件
plugins: [
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
// title:'自定义title',
template:'./src/index.html'
}),
],
// 用来设置引用模块
resolve: {
extensions:['.ts','.js']
},
mode: 'development' // 设置mode
}如果你在这里遇到：Error: [object Object] is not a PostCSS plugin，说明你的plugins是写成数组了，建议写成函数可以避免报错！数组也可以需要再去探索以下！
02、项目界面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
</head>
<body>
<!-- 创建一个主窗口 -->
<div id="main">
<!-- 设置游戏的舞台 -->
<div id="stage">
<!-- 设置蛇 -->
<div id="snake">
<!-- snake内部的div，表示蛇的各部分 -->
<div></div>
</div>
<!-- 设置食物 -->
<div id="food">
<!-- 添加4个小div设置食物的样式 -->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- 设置游戏的记分牌 -->
<div id="score-panel">
<div>
SCORE: <span id="score">0</span>
</div>
<div>
level: <span id="level">1</span>
</div>
</div>
</div>
</body>
</html>index.less
// 设置变量
@bg-color :#b7d4a8;
// 清除默认样式
* {
margin: 0;
padding: 0;
// 改变盒子模型的计算方式
box-sizing: border-box;
}
body {
font: bold 20px Courier;
}
// 设置主窗口的样式
#main {
width: 360px;
height: 420px;
background-color: @bg-color;
margin: 100px auto;
border: 10px solid black;
border-radius: 10px;
// 开启弹性盒模型
display: flex;
// 设置主轴的方向
flex-flow: column;
// 设置侧轴的对齐方式
align-items: center;
// 设置主轴的对齐方式
justify-content: space-around;
#stage {
width: 304px;
height: 304px;
border: 2px solid black;
// 开启相对定位
position: relative;
}
// 设置蛇的样式
#snake {
&>div {
width: 10px;
height: 10px;
background-color: #000;
border: 1px solid @bg-color;
// 开启绝对定位
position: absolute;
}
}
// 设置食物
#food {
width: 10px;
height: 10px;
// background-color: red;
// border: 1px solid @bg-color;
position: absolute;
left: 40px;
top: 100px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
&>div {
width: 4px;
height: 4px;
background-color: black;
// 使4个div旋转45°
transform: rotate(45deg);
}
}
#score-panel {
width: 300px;
display: flex;
// 设置主轴上的对齐方式
justify-content: space-between;
}
}
03、Food类实现
代码如下：
// 引入样式
import './style/index.less';
// 定义食物类Food
class Food {
// 定义一个属性表示食物所对应的元素
element: HTMLElement;
constructor() {
// 获取页面中的food 元素并将其赋值给element
this.element = document.getElementById('food')!;
}
// 定义一个获取食物X轴的坐标
get X() {
return this.element.offsetLeft;
}
// 定义一个获取食物Y轴的坐标
get Y() {
return this.element.offsetTop;
}
// 修改食物的位置
change() {
/**
* 生成一个随机的位置
* 食物的位置最小是0 最大是290
* 蛇移动一次就是一格，一格的大小就是10，所以要求食物的坐标必须是整10
*/
let top = Math.round(Math.random() * 29) * 10
let left = Math.round(Math.random() * 29) * 10
this.element.style.left = left + 'px';
this.element.style.top = top + 'px';
}
}
// 测试代码
const food = new Food();
console.log(food.X,food.Y);
food.change()
console.log(food.X,food.Y);
04、ScorePanel实现
示例代码：
// 定义表示记分牌的类
class ScorePanel {
// score 和level用来记录分数和等级
score = 0;
level = 1;
// 分数和等级所在的元素，在构造函数中进行初始化
scoreEle: HTMLElement;
levelEle: HTMLElement;
// 设置一个变量限制等级
maxLevel:number;
// 设置多少分进行升级一次
upScore:number;
constructor(maxLevel:number = 10,upScore:number = 10) {
this.scoreEle = document.getElementById('score')!;
this.levelEle = document.getElementById('level')!;
this.maxLevel = maxLevel;
this.upScore = upScore;
}
// 设置一个加分的方法
addScore() {
// 分数增加
this.scoreEle.innerHTML = ++this.score + '';
// 判断分数是多少
if (this.score % this.upScore === 0) {
this.levelUp()
}
}
// 提升等级的方法
levelUp() {
if (this.level < this.maxLevel) {
this.levelEle.innerHTML = ++this.level + '';
}
}
}
export default ScorePanel;
// 测试代码
// const scorePanel = new ScorePanel(100,2);
// for (let i = 0; i < 10; i++) {
// scorePanel.addScore()
// }
05、Snake类实现
代码实现：
class Snake {
// 表示蛇头的元素
head: HTMLElement;
// 蛇的身体（包括蛇头）
bodies:HTMLCollection;
// 获取蛇的容器
element: HTMLElement;
constructor() {
this.element = document.getElementById('snake')!;
this.head = document.querySelector('#snake > div')! as HTMLElement;
this.bodies = this.element.getElementsByTagName('div');
}
// 获取蛇的坐标（蛇头的坐标）
get X() {
return this.head.offsetLeft;
}
// 获取蛇的Y轴坐标
get Y() {
return this.head.offsetTop;
}
// 设置蛇头的坐标
set X(value:number) {
this.head.style.left = value + 'px';
}
set Y(value:number) {
this.head.style.top = value + 'px';
}
// 蛇增加身体的方法
addBody() {
// 向element中添加一个div
this.element.insertAdjacentHTML("beforeend","<div></div>")
}
}
export default Snake;
06、GameControl控制其他类
键盘事件
// 引入其他所有类
import Food from './Food';
import ScorePanel from './ScorePanel';
import Snake from './Snake';
// 游戏控制器，控制其他所有类
class GameControl {
// 定义蛇的三个属性
// 蛇
snake: Snake;
// 食物
food: Food;
// 记分牌
scorePanel: ScorePanel;
// 创建一个属性来存储蛇移动的方向（也就是按键的方向）
direction: string = '';
// 创建一个属性记录游戏是否结束
isLive = true;
constructor() {
this.snake = new Snake();
this.food = new Food();
this.scorePanel = new ScorePanel();
this.init();
}
// 游戏的初始化方法，调用后游戏即开始
init() {
// 绑定键盘按下的事件
document.addEventListener('keydown', this.keydownHandler.bind(this));
// 调用run()，使蛇移动
this.run();
}
/**
* 左边是一般浏览器，右面是ie！
* @param event ArrowUp Up
ArrowDown Down
ArrowLeft Left
ArrowRight Right
*/
// 创建一个键盘按下的响应函数
keydownHandler(event: KeyboardEvent) {
// console.log(this);
// 需要检查event.key的值是否合法（用户是否按了正确的按键）
// 修改direction属性
this.direction = event.key;
// console.log( event.key);
}
// 创建一个控制蛇移动的方法
run() {
/**
* 根据放行（this.direction）来使蛇的位置改变
* 向下 top 减少
* 向上 top 增加
* 向左 left 减少
* 向右 right 增加
*/
// 获取蛇现在的坐标
let X = this.snake.X;
let Y = this.snake.Y;
// 根据键盘方向来修改X值、Y值
switch (this.direction) {
case 'ArrowUp':
case 'Up':
// 向上移动 top减少
Y -= 10;
break;
case 'ArrowDown':
case 'Down':
// 向下移动 top增加
Y += 10;
break;
case 'ArrowLeft':
case 'Left':
// 向左移动 left增加
X -= 10;
break;
case 'ArrowRight':
case 'Right':
// 向右移动 right增加
X += 10;
break;
}
// 修改蛇的X/Y值
this.snake.X = X;
this.snake.Y = Y;
// 开启一个定时调用
this.isLive && setTimeout(this.run.bind(this),300 - (this.scorePanel.level-1) * 30)
}
}
export default GameControl;
index.ts
// 引入样式
import './style/index.less';
import GameControl from './modules/GameControl';
const gameControl = new GameControl()
// setInterval(()=> {
// console.log(gameControl.direction);
// },1000)
07、撞墙和吃到食物的检测以及移动
代码如下：
Snake.ts
class Snake {
// 表示蛇头的元素
head: HTMLElement;
// 蛇的身体（包括蛇头）
bodies: HTMLCollection;
// 获取蛇的容器
element: HTMLElement;
constructor() {
this.element = document.getElementById('snake')!;
this.head = document.querySelector('#snake > div')! as HTMLElement;
this.bodies = this.element.getElementsByTagName('div');
}
// 获取蛇的坐标（蛇头的坐标）
get X() {
return this.head.offsetLeft;
}
// 获取蛇的Y轴坐标
get Y() {
return this.head.offsetTop;
}
// 设置蛇头的坐标
set X(value: number) {
// 如果新值与旧值相同，则返回不在修改
if (this.X === value) {
return;
}
// X的值的合法范围0~290之间
if (value < 0 || value > 290) {
// 进入判断说明蛇撞墙了
throw new Error('蛇撞墙了!');
}
// 修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动，不能掉头，反之亦然
if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
// console.log('水平方向发生了掉头');
// 如果发生了掉头，让蛇反方向继续移动
if (value > this.X) {
// 如果新值value大于旧值X,说明蛇在向下走，此时掉头，应该使蛇向左走
value = this.X - 10;
} else {
value = this.X + 10;
}
}
// 移动身体
this.moveBody();
// 检查是否撞到自己
this.head.style.top = value + 'px';
this.head.style.left = value + 'px';
}
set Y(value: number) {
// 如果新值与旧值相同，则返回不在修改
if (this.X === value) {
return;
}
// Y的值的合法范围0~290之间
if (value < 0 || value > 290) {
// 进入判断说明蛇撞墙了
throw new Error('蛇撞墙了!');
}
// 修改y时，是在修改水平坐标，蛇在左右移动，蛇在向左移动，不能掉头，反之亦然
if (this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value) {
// console.log('水平方向发生了掉头');
// 如果发生了掉头，让蛇反方向继续移动
if (value > this.Y) {
// 如果新值value大于旧值X,说明蛇在向下走，此时掉头，应该使蛇向左走
value = this.Y - 10;
} else {
value = this.Y + 10;
}
}
// 移动身体
this.moveBody();
this.head.style.top = value + 'px';
// 检查是否撞到自己
this.head.style.top = value + 'px';
}
// 蛇增加身体的方法
addBody() {
// 向element中添加一个div
this.element.insertAdjacentHTML('beforeend', '<div></div>');
}
// 添加一个蛇身体移动的方法
moveBody() {
/**
*将后边的身体设置为前边身体的位置
举例：
第4节 = 第3节的位置
以此类推...
*/
// 遍历所有的身体
for (let i = this.bodies.length - 1; i > 0; i++) {
// 获取前边身体的位置
let X = (this.bodies[i - 1] as HTMLElement).offsetLeft;
let Y = (this.bodies[i - 1] as HTMLElement).offsetTop;
// 将值设置到当前身体上
(this.bodies[i] as HTMLElement).style.left = X + 'px';
(this.bodies[i] as HTMLElement).style.top = Y + 'px';
}
}
checkHeadBody() {
// 获取所有身体，检查是否与蛇头坐标重叠
for (let i = 1; i < this.bodies.length; i++) {
let db = this.bodies[i] as HTMLElement;
if (this.X === db.offsetLeft && this.Y === db.offsetTop) {
// 进入判断说明蛇头撞到了身体，游戏结束
throw new Error('撞到自己');
}
}
}
}
export default Snake;
// 引入其他所有类
import Food from './Food';
import ScorePanel from './ScorePanel';
import Snake from './Snake';
// 游戏控制器，控制其他所有类
class GameControl {
// 定义蛇的三个属性
// 蛇
snake: Snake;
// 食物
food: Food;
// 记分牌
scorePanel: ScorePanel;
// 创建一个属性来存储蛇移动的方向（也就是按键的方向）
direction: string = '';
// 创建一个属性记录游戏是否结束
isLive = true;
constructor() {
this.snake = new Snake();
this.food = new Food();
this.scorePanel = new ScorePanel();
this.init();
}
// 游戏的初始化方法，调用后游戏即开始
init() {
// 绑定键盘按下的事件
document.addEventListener('keydown', this.keydownHandler.bind(this));
// 调用run()，使蛇移动
this.run();
}
/**
* 左边是一般浏览器，右面是ie！
* @param event ArrowUp Up
ArrowDown Down
ArrowLeft Left
ArrowRight Right
*/
// 创建一个键盘按下的响应函数
keydownHandler(event: KeyboardEvent) {
// console.log(this);
// 需要检查event.key的值是否合法（用户是否按了正确的按键）
// 修改direction属性
this.direction = event.key;
// console.log( event.key);
}
// 创建一个控制蛇移动的方法
run() {
/**
* 根据放行（this.direction）来使蛇的位置改变
* 向下 top 减少
* 向上 top 增加
* 向左 left 减少
* 向右 right 增加
*/
// 获取蛇现在的坐标
let X = this.snake.X;
let Y = this.snake.Y;
// 根据键盘方向来修改X值、Y值
switch (this.direction) {
case 'ArrowUp':
// case 'Up':
// 向上移动 top减少
Y -= 10;
break;
case 'ArrowDown':
// case 'Down':
// 向下移动 top增加
Y += 10;
break;
case 'ArrowLeft':
// case 'Left':
// 向左移动 left增加
X -= 10;
break;
case 'ArrowRight':
// case 'Right':
// 向右移动 right增加
X += 10;
break;
}
// 检查蛇是否吃到了食物
this.checkEat(X, Y);
// 修改蛇的X/Y值
try {
this.snake.X = X;
this.snake.Y = Y;
} catch (e) {
// 进入到catch，说明出现了异常，游戏结束，弹出一个提示信息
alert((e as Error).message + 'Game Over!');
// 将isLive设置为false
this.isLive = false;
}
// 开启一个定时调用
this.isLive && setTimeout(this.run.bind(this), 300 - (this.scorePanel.level - 1) * 30);
}
// 定义一个方法，用来检测蛇是否吃到食物
checkEat(X: number, Y: number) {
if (X === this.food.X && Y === this.food.Y) {
// 食物的位置要重置
this.food.change();
// 分数增加
this.scorePanel.addScore();
// 蛇要增加一节
this.snake.addBody();
}
}
}
export default GameControl;
在根目录创建index.ts文件，导入GameControl
index.ts
// 引入样式
import './style/index.less';
import GameControl from './modules/GameControl';
const gameControl = new GameControl()
// setInterval(()=> {
// console.log(gameControl.direction);
// },1000)
