肥林の仓库

TS项目练习:贪吃蛇小游戏(一) 我们学习ts就是要学习如何将ts引入到我们现成的项目当中,引入ts的好处以及使用ts的编程思想(面向对象)去编写代码,因此我们不仅要学会使用ts还要学会面向对象的编程思想,这种编程思想就一句话概括,所有的东西都要写到一个类上面去,任何代码都要有类,都套通过这个类来实现。 1. 项目的搭建 我们使用回之前练习ts结合webpack的配置文件:webpack.config.js和tsconfig.js和package.json 安装样式的加载器和less预处理语言 npm i -D less less-loader css-loader style-loadernpm i -D postcss postcss-loader postcss-preset-env package.json { "name": "snake", "version": "1.0.0", "description": "", " ...

泛型什么是泛型 泛型简单来说就是不确定的类型变量可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中。，在ts中存在类型，如number、string、boolean等。泛型就是使用一个类型变量来表示一种类型，类型值通常是在使用的时候才会设置。泛型的使用场景非常多，可以在函数、类、interface接口中使用 使用泛型的场景 当我们定义一个函数或类时，某些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。 当然解决问题的方法不止一个,我们也可以使用any来定义变量类型,但是我们都知道,使用any定义时是存在一些问题的：虽然以知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势 这时我们就可以使用泛型来定义变量 泛型的基本使用1. 在函数中使用泛型// 1.在函数中使用泛型// 我们预先不知道函数的传参规定(不知道形参的输入类型),就可以使用泛型function test <T> (a:T):T{ console.log(a); r ...

属性的封装(属性的修饰符)以及属性定义语法糖 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装 在默认情况下，对象的属性是可以任意的修改的，这会将会导致对象中的数据变得非常不安全 为了确保数据的安全性，在TS中新增了几个可以对属性的权限进行设置的修饰符 TS中属性具有三种修饰符 public(公开属性,默认值): 修饰的属性可以在任意位置访问（修改） 默认值 // 1. 公开属性(public): public 修饰的属性可以在任意位置访问（修改） 默认值class Person { public name:string; public age:number; constructor(name:string,age:number){ this.name = name this.age = age }}// 我们可以在任意地方对公开属性进行读取可修改const p1 = new Person('小明',18)p1.age = 19 pri ...

抽象类以及接口(interface)抽象类 我们一般不希望使用父类来创造对象,因为父类的作用是专门被别的类继承的,因此就衍生出抽象类这一关键字了:abstract, 一般在class声明类之前添加这一关键字,如下所示: /* ------- 抽象类 --------*/abstract class Animal { name:string;//创建属性 // 创建构造函数 constructor(name:string){ this.name = name; }} 抽象类和其他的类区别是不大的,只是不能用来创建实例对象,也就是说,抽象类是专门用来继承的类(专门用来当父类的) 抽象类中可以添加抽象方法: 抽象方法同样是使用abstract关键字开头,但是没有函数体 抽象方法只能定义在抽象类中,且继承它的子类必须对该方法进行重写 /* ------- 抽象方法 --------*/abstract class Animal { name:string;//创建属性 // 创建 ...

2.继承1.继承的基本使用 es6中有继承，通过extends关键字定义，ts也支持，我们也可以通过extends关键字实现继承, 使用继承后，子类会拥有父类所有的方法和属性 例子使用继承之前(function (){ // 定义一个狗的类 class Dog { // 定义属性 name: string; age: number; // 创建构造函数 constructor(name: string, age: number) { this.name = name; this.age = age; } // 定义方法 sayHello(){ console.log('汪汪汪!'); } } // 定义一个表示猫的类 class Cat { name ...

TS面向对象学习 什么是面向对象?(之前在js中已经提及到了,可以翻看前面的博客(类与对象)) 面向对象是一种编程思想,这里简单点说,面向对象其实就是字面上的意思,面向就是对着的意思,对象就是一个名词,而所谓的面向对象的编程语言(OA)就是我们在写程序写代码的时候,所有的操作都是通过对象去操作的,比如面向ak47,这时ak47就是一个对象,那我们就可以操作ak47的一些属性去帮我们做一些事,射击… 要想学好面向对象,就要了解什么是对象? 首先我们问一下自己,程序是用来干什么的?程序实际上就是对我们现实事物中一个抽象,那抽象对应的就是具体,举个例子:我在马路上见到一个很可爱的狗,那么这时候我就很想将这个狗带回家,但是家里人不允许,那么我可以将这个狗子用手机拍下来带回家。这个例子中的狗子对应的就是具体,因为它是具体的事物,而我手机中的照片对应的就是抽象,我将一个具体的事物,抽象成为一张简单的照片,回到程序的世界,我们经常在网路上玩到的游戏,看到的报纸,就是对具体事物的一个抽象,也就是说,程序就是对具体事物的一个抽象,而那些被描述道程序里面的抽象就是对象,比如我们的游戏人物,武器,服饰等… ...

webpack结合Typescript使用 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。 基本步骤1. 初始化项目 进入项目根目录，执行命令 npm init -y 主要作用：初始化项目,创建package.json文件 2. 下载构建工具和对应的第三方包 npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin 共安装了7个包 webpack 构建工具webpack webpack-cli webpack的命令行工具 webpack-dev-server webpack的开发服务器 typescript ts编译器 ts-loader ts加载器，用于在webpack中编译ts文件 html-webpack-plugin webpack中html插件，用来自动创建html文件 clean-webpack-plugin w ...

Typescript中的编译选项 官方文档 我们都知道ts与js是有差别的,我们通常写完js过后可以直接运行到浏览器中查看效果,蛋ts不同,浏览器是不认识ts代码的(至少限制不认识),这也就意味着我们需要先将ts编译转化为js代码才能运行到浏览器中 自动编译文件 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。 示例： tsc 文件夹名.ts -w 自动编译整个项目 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json 可以自己在项目的根目录下新建 或者使用tsc --init指令来自动生成 tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译 配置选项： 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件。 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfi ...

Typescript中的基本类型 学习文档 官方文档 类型声明 类型声明是TS非常重要的一个特点 通过类型声明可以指定TS中变量（参数、形参）的类型 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值 语法： let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型(返回值类型的声明){ ...} 自动类型判断 TS拥有自动的类型判断机制 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明 代码展示:// 类型变量的声明// 方法1: 附带类型限制let a:number = 1 //此时限制了a只能赋值为数值型// a = 'abc' // 此时如果给a赋值为字符串型就会报错// 方法2: 自动类型判断(用的较多)let b = 12 // 如果我们在声明变量的时候就给该变量赋值(声 ...

1. 什么是Typescript? 学习文档 官方文档 我们可以同通俗的认为Typescript = Type + JavaScript(再原先的js基础上新增了类型支持) 最简单的代码展示: // Typescript代码: 有明确的类型指向(静态类型), 即:number(数值类型)let a: number = 1 //JavaScript代码: 无明确的类型指向(动态类型)let a = 1 TypeScript 为什么要为 JS 添加类型支持 背景：JS 的类型系统存在“先天缺陷”，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError） 问题：增加了找 Bug、改 Bug 的时间，严重影响开发效率 从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JS 属于动态类型的编程语言。 静态类型：编译期做类型检查； 动态类型：执行期做类型检查。 代码编译和代码执行的顺序：1 编译 2 执行 对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）。 对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早） ...