![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
TypeScript 随笔
随着前端框架的迅速发展,前端代码的可读性、维护性也变得非常重要。TypeScript无疑是一个黑马正在崛起,零散时间学了一下TypeScript,这里做一些总结。
红鹰_Jake
如果你没产生用户价值,但公司还在给你丰厚的收入,那一定是有人在买单。
展开
-
6、TypeScript接口--方法约束(入参、返回值)
接口--方法约束(入参、返回值)接口 在方法或函数参数上通过接口对入参进行约束接口 在方法或函数参数上通过接口对入参进行约束约束入参的参数个数、数据类型约束方法返回值// 接口 约束//1、方法上使用接口参数//1.1、属性接口,对传入的参数进行约束,属性约束//传入的参数必须是对象,并且必须有属性label属性,是string类型function say(obj:{lable:string}):void{ console.log(obj.lable);}//say('ff')原创 2021-07-12 17:08:03 · 1459 阅读 · 0 评论 -
5、ts中的类、继承及抽象类、多态
ts中的类、继承及抽象类、多态TS中的类及继承使用抽象类及多态TS中的类及继承使用//public private protected staticclass Animal { public name:string; private age:number; protected birthday:string; public speed:number=10; constructor(name:string,age:number,birthday:string){原创 2021-07-12 17:07:40 · 328 阅读 · 0 评论 -
7、接口-数组、对象及类的约束
接口-数组、对象及类的约束接口不仅可以对方法进行约束接口不仅可以对方法进行约束对数组约束对对象约束(不常用)对类约束(多用)// 可索引接口:数组、对象的约束(不常用)//1、对数组的约束,可以用any,数组中传递任何类型interface MyArray { [index:number]:string}let arr:MyArray=['a','b','c'];//值必须是字符串console.log(arr[0]);//2、对对象的约束,索引可以是string类型in原创 2021-07-12 17:07:19 · 214 阅读 · 0 评论 -
8、TypeScript 泛型--函数、类、接口使用泛型
泛型--函数、类、接口使用泛型函数、类及接口中如何使用泛型函数、类及接口中如何使用泛型//泛型//一个方法既可以返回string类型,又可以返回number类型时,需要定义2个方法,这样就会导致方法重了。// 如果用any时,编译器就会放弃类型检查的功能。采用泛型可以满足需求(有类型校验)。//1、泛型函数//定义方法使用泛型,返回泛型的参数function getData<T>(value:T):T { return value;}console.log(getDa原创 2021-07-12 17:06:57 · 111 阅读 · 0 评论 -
9、TypeScript 模块
模块模块模块代码案例创建模块DBHelper.tsindex.ts 中引入模块Node环境运行index.js模块TypeScript 1.5里面属于已经发生变化,“内部模块”成为“命名空间”,“外部模块”简称“模块”。模块里面的变量、函数、类等对象,在模块外部不可访问,必须在模块内export。要使用某个模块,必须import到自己代码中。项目中使用第三方模块就import当前项目暴露功能给其他项目使用export项目中为了提高代码阅读,对于相同功能进行分类整合,使用命名空间模块代码案例原创 2021-07-12 17:06:30 · 68 阅读 · 2 评论 -
10、TypeScript 命名空间
命名空间命名空间命名空间案例BigDog.tx 项目代码SmallDog.tx 项目代码index.ts 使用命名空间Node环境执行JS命名空间在代码内部为了避免命名冲突,组织代码的手段;命名空间内部对象及命名空间都需要export,外部才能够访问;3.4.5版本之后,通过import {} from方式引入命名空间;命名空间案例BigDog.tx 项目代码//命名空间也需要export,外部才能够使用export namespace com.hongying{ //外部使用原创 2021-07-12 17:06:07 · 82 阅读 · 0 评论 -
11、TypeScript 装饰器-装饰器执行顺序
装饰器-装饰器执行顺序装饰器装饰器的写法1、类装饰器 重载方法2、属性装饰器3、方法装饰器4、参数装饰器5、装饰器执行顺序装饰器装饰器是一种特殊类型的声明,能够附加到类声明、方法、属性或参数上,修改类的行为;装饰器就是一个方法,可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。类似 @注解 增强创建的装饰器:类装饰器、属性装饰器、方法装饰器、参数装饰器装饰器的写法:普通装饰器(无法传参)、装饰器工厂(可传参)装饰器是JS过去几年最大的成就之一,已经是ES7的标准特性之一装饰器原创 2021-07-12 17:05:45 · 284 阅读 · 3 评论 -
12、TS声明文件--TS中使用原JS代码
TS声明文件--TS中使用原JS代码声明文件TS中引入 声明文件 格式案例1、原来JS使用方式Calcu.js在HTML中使用2、没有声明文件时,在TS中使用index.tsindex.html 中使用3、在TypeScript里面添加声明如下使用声明信息时,TS编译不会提示错误,并且页面正常运行关于声明文件更多高质量声明查看链接声明文件在开发中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了原创 2021-07-12 17:05:10 · 2094 阅读 · 0 评论 -
4、ES5 类定义,继承
ES5 类定义,继承1、ES5类定义、静态方法、原型链的使用2、类继承2.1、对象冒充继承2.2、原型链继承2.3、通常采用对象冒充+原型链继承1、ES5类定义、静态方法、原型链的使用1、ES5 里面的类、构造方法、属性、实例方法及静态方法 function Animal(name,age) { this.name=name; this.age=age; //1.1、构造函数里面的方法 this.run=function () {原创 2021-07-12 17:04:40 · 190 阅读 · 0 评论 -
3、TypeScript函数
函数函数函数// 1、函数function say(name:string,age:number):string { return `${name}--${age}`;}console.log(say("jake",23));//2、可选参数,可选参数必须放到最后function getInfo(name: string, age?: number):string { if(age){ return `${name}--${age}`; } r原创 2021-07-11 16:59:17 · 50 阅读 · 0 评论 -
2、TypeScript数据类型
数据类型数据类型使用数据类型使用//数据类型let flag:boolean=true;let num:number=23;num=56.8;console.log(num);let str:string="hello typescript";//数组let arr:number[]=[1,2,3];let arr2:string[]=["h","bb","ff"];//通过泛型定义数组类型let arr3:Array<number>=[3,2,3];console原创 2021-07-11 16:58:21 · 218 阅读 · 0 评论 -
1、TypeScript 环境设置
环境设置安装编译TypeScript自动编译TS/TSX初始化TS配置文件参考文档安装yum install -g typescript#oryarn global add typescript编译TypeScripttsc index.ts自动编译TS/TSX编译一个或多个TS文件我们可以使用tsc命令进行编译,这样每次修改TS文件后都需要手动编译。可以配置VSCode 或Idea,可自动编译项目中所有的TS文件,需要提供tsconfig.json 配置文件,配置outDir属原创 2021-07-11 16:57:25 · 179 阅读 · 0 评论