TypeScript

1、简介

TypeScript是什么？

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

以JavaScript为基础的语言
一个JavaScript的超集
可以在任何支持JavaScript的平台中执行
TS 不嫩被 JS 解析器直接执行
typescript扩展了JavaScript，并添加了类型！

官网地址： https://www.typescriptlang.org/
中文地址：https://www.tslang.cn/

Github：https://github.com/Microsoft/TypeScript

微软dev版本变更：https://devblogs.microsoft.com/typescript/

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;

GameControl.ts

// 引入其他所有类
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)

TypeScript

TypeScript

1、简介

TypeScript是什么？

TypeScript增加了什么？

2、TypeScript开发环境搭建

3、基本类型

4、编译选项

5、webpack整合

6、babel整合

7、面向对象

1、类(class)

2、构造函数&this

3、继承简介

4、super

5、抽象类（abstract）

6、接口

7、属性的封装

8、泛型

8、项目整合

01、项目搭建

02、项目界面

03、Food类实现

04、ScorePanel实现

05、Snake类实现

06、GameControl控制其他类

07、撞墙和吃到食物的检测以及移动

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

TypeScript

TypeScript

1、简介

TypeScript是什么？

TypeScript增加了什么？

2、TypeScript开发环境搭建

3、基本类型

4、编译选项

5、webpack整合

6、babel整合

7、面向对象

1、类(class)

2、构造函数&this

3、继承简介

4、super

5、抽象类（abstract）

6、接口

7、属性的封装

8、泛型

8、项目整合

01、项目搭建

02、项目界面

03、Food类实现

04、ScorePanel实现

05、Snake类实现

06、GameControl控制其他类

07、撞墙和吃到食物的检测以及移动

热门文章

最新文章

相关电子书