
TypeScript
TypeScript笔记
永久旅途
这个作者很懒,什么都没留下…
展开
-
TS中泛型的使用
function 函数名<泛型名称> (参数 : 泛型名称) : 泛型名称 { // 函数体 }return a;原创 2023-10-08 21:27:39 · 1023 阅读 · 0 评论 -
TS类中初始化属性语法糖
【代码】TS类中初始化属性语法糖。原创 2023-10-08 20:52:00 · 519 阅读 · 0 评论 -
TS类中属性的封装
既然私有属性我们只能在类中进行访问,那我们就在类中定义访问和设置属性方法,对象通过调用方法去访问和设置属性。// 创建一个Person类// 获取name属性// 设置name属性const per = new Person("寻霖");// 打印:"寻霖"// 打印:"XunLin"// 创建一个Person类// getter方法获取name属性// setter方法设置name属性const per = new Person("寻霖");// 打印:"寻霖"原创 2023-10-08 20:45:54 · 346 阅读 · 0 评论 -
TS中interface接口的使用
接口用来定义一个类的结构,用来定义一个接口中应该包含哪些属性和方法语法结构如下:interface 接口名 { // 属性和方法 }原创 2023-10-07 20:18:24 · 1047 阅读 · 0 评论 -
TS中抽象类的使用;解决报错:Non-abstract class ‘ ‘ does not implement all abstract members of ‘ ‘.
以abstract开头的类就是抽象类:abstract class 类名 { }抽象类和其他类的区别不大,只是不能用来创建对象。抽象类就是专门被用来继承的类。我们在使用继承父类的时候更多的时候是希望子类中自己对方法进行定义,这时候就可以使用抽象方法。以abstract开头的方法就是抽象方法,且没有方法体,返回为空:abstract 方法名( ) : void;抽象方法只能定义在抽象类中,且子类必须对抽象方法进行重写。// 父类Animal// 子类Dogbark() {原创 2023-10-07 19:47:22 · 642 阅读 · 0 评论 -
TS中使用super关键字调用父类;解决报错:The constructor of a derived class must contain a ‘super‘ call.
在继承的子类中,我们想要添加一个age属性,但是当我们在子类中写构造函数给age属性赋初始值时却报错:The constructor of a derived class must contain a 'super' call.这是因为在Dog类中对constructor进行了重写,覆盖掉了父类中的constructor。如果在子类中写了构造函数,就必须在子类的构造函数中对父类的构造函数进行调用。因为父类中有一个对name属性的构造函数,所以需要传入name的参数。在子类中super就表示当前类的父类。原创 2023-10-07 19:24:38 · 910 阅读 · 0 评论 -
TS中Class类的继承
我们有下面一个代码,其中创建了一个Dog类和Cat类,这两个类中都有姓名和年龄属性和bark方法但是我们把一个代码写了两次,冗余度增加。原创 2023-10-07 19:07:06 · 1210 阅读 · 1 评论 -
TS中Class类构造函数和this的使用
constructor是构造函数,构造函数会在对象被实例化时调用constructor () { // 构造函数体.. }如下代码中我们实例化了三个对象,每一次都会调用一次constructor函数,输出“构造函数被调用了”我们也可以在实例化对象的时候传入参数,例如我们这里传入姓名和年龄,在constructor函数中接收参数。原创 2023-10-06 22:45:44 · 1649 阅读 · 0 评论 -
TS中class类的基本使用
class 类名 { }// 使用class关键字来定义一个类// 使用new关键字创建一个对象直接定义的属性是实例属性,需要通过对象的实例去访问属性名 : 数据类型 = 属性值;// 数据类型可以省略// 直接定义的属性是实例属性,需要通过对象的实例去访问name: string = "寻霖";// 寻霖使用static关键字开头的属性是静态属性静态属性可以直接通过类去访问,不可以通过实例对象去访问static 属性名 : 数据类型 = 属性值;// 数据类型可以省略。原创 2023-09-27 10:00:55 · 732 阅读 · 0 评论 -
使用Webpack设置TS引用模块,解决Module not found: Error: Can‘t resolve ‘./m1‘ in ...问题
当我们把ts文件作为模块被引用的时候,我们使用Webpack打包代码会报错: Module not found: Error: Can't resolve './m1' in ...原创 2023-09-26 15:24:17 · 1027 阅读 · 0 评论 -
使用Webpack打包TS代码
在项目目录下创建webpack.config.js文件,并编写如下配置信息。在项目目录下创建webpack.config.js文件,并编写配置信息。在控制台中输入如下指定对代码进行Webpack打包。打包完成后就会出现dist目录。原创 2023-09-26 14:42:09 · 98 阅读 · 0 评论 -
TS编译选项——不允许使用隐式any类型、不明确类型的this、严格检查空值、编译后文件自动设置严格模式
在tsconfig.js文件中配置noImplicitAny属性。注意:显式的any类型并不会被禁止。开启后即可禁止使用隐式的any类型。原创 2023-09-25 20:57:47 · 1631 阅读 · 0 评论 -
TS编译选项——TS代码错误不生成编译文件
在tsconfig.js文件中配置noEmit属性。原创 2023-09-25 20:30:03 · 1039 阅读 · 0 评论 -
TS编译选项——TS文件编译后消除注释
在tsconfig.json文件中配置removeComments属性。左边是编写的ts文件,右边是编译的js文件,注释被清除了。原创 2023-09-25 20:18:25 · 572 阅读 · 0 评论 -
TS编译选项——编译TS文件同时对JS文件进行编译
我们在默认情况下编译TS项目时是不能编译js文件的,如下图中的hello.js文件并未编译到dist目录下(这里配置了编译文件放到dist目录下)如果我们想要实现编译TS文件同时对JS文件进行编译,就需要在tsconfig.json文件中对allowJS进行配置如此,dist目录下就编译了hello.js文件。原创 2023-09-25 20:14:08 · 705 阅读 · 0 评论 -
TS编译器选项——指定编译后文件所在目录
compilerOptions是TS的编译器选项,主要在tsconfig.json文件中用于对ts编译为js文件时进行配置。"compilerOptions" : { 配置项 }所有打包的文件都被放到了当前目录下的dist文件下。原创 2023-09-20 19:52:53 · 510 阅读 · 0 评论 -
TS编译器选项——指定编译ES版本和模块化使用规范
compilerOptions是TS的编译器选项,主要在tsconfig.json文件中用于对ts编译为js文件时进行配置"compilerOptions" : { 配置项 }原创 2023-09-20 19:43:42 · 1699 阅读 · 0 评论 -
TS同时打包和监视所有ts文件或只指定ts文件
当我们项目中ts文件较多时,我们如何直接打包所有ts文件为js文件?而不是使用tsc 文件名 一个一个去打包文件。原创 2023-09-20 19:15:06 · 511 阅读 · 0 评论 -
TS自动监视ts文件修改
这下在ts中代码改变就可以被监听(这里报错是因为同时开启了app.ts和app.js文件导致变量声明冲突)那我们该如何监视ts文件中的变化呢?当我们在ts文件中进行修改时,js文件并不会进行变化。当我们对ts文件进行编译后会生成js文件。tsc 文件名.ts -w。原创 2023-09-20 11:08:38 · 429 阅读 · 0 评论 -
TS中的数据类型
我们知道,在JavaScript中函数不设置返回值但是会默认返回undefined,所以即使在返回值为never数据类型的函数中什么都不写也会进行报错。我们在上面的代码中的gender使用“男”来表示,但是性别只有“男”和“女”这两种,用0和1来表示能够更方便,这时候就可以使用enum数据类型。any表示任意的数据类型,一个变量设置了any的数据类型,相当于对该变量关闭了变量数据类型检测。注意:这里的形参个数和数据类型,以及函数的返回值类型都需要和声明时一致,默认为声明时的配置。原创 2023-09-19 21:27:38 · 667 阅读 · 0 评论 -
TS的类型声明
我们以前在JS中指定一个变量时不需要指定其类型,可以对他复制任意数据类型的值。如果我们以TS的语法定义变量,则需要定义数据类型let 变量名 :数据类型;这时我们以JS语法实现的代码就会报错JS中的函数不需要考虑其参数的类型和数量我们给参数加上number的数字类型,当传入字符串的时候就会报错function 函数名 ( [参数1 : 数据类型 , 参数2 : 数据类型] ) { ... }原创 2023-09-18 21:05:25 · 332 阅读 · 0 评论 -
TS开发环境搭建
编译完成后我们的文件目录下出现了一个js文件,内容与ts文件内容一致,因为编写的内容比较简单,所以看不出什么区别。ts代码需要先编译为js代码才能被浏览器所执行,所以我们执行一个ts文件之前需要使用tsc命令进行编译。可以去看别的大佬安装Node.js的文章,因为大部分人都安装了Node环境,这里我就不做说明。想知道typescript是否安装成功可以在终端中输入 tsc ,输出一大堆数据就是安装成功。注意:这里要在当前目录下执行改ts文件。注意:TS文件的文件后缀为.ts。tsc [文件路径]原创 2023-09-18 20:27:47 · 284 阅读 · 0 评论