TS基础语法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TS基础语法相关的知识,希望对你有一定的参考价值。
参考技术A基本类型
高级类型
TS中的类型判断一般用于函数的参数和函数的返回值的情况较多,因为JS中的函数是不考虑参数的类型和个数的
类型断言,可以用来告诉编辑器变量的实际类型,使用类型断言一定要对当前对象的类型有百分之百的信心,否则会出现严重的错误
在声明元组的时候一定要指定类型,如果没有指定类型,其实本质上是一个联合类型数组
适合结果在多个值之间进行选择
unknown和any的区别在于:any类型的变量可以赋值给任意变量,unknown类型的变量不能直接赋值给其他变量
never 表示永远不会返回结果,连空都没有,一般用于处理报错,函数只要报错,立即执行结束
一般开发中更多的是对对象的属性进行限制,而不是限制它是不是一个对象
假设要求 c 这个对象有一个name属性,其他属性不做要求,可有可无
2 种定义方式
JS 中声明的数组可以是混合类型 在 TS中同样也可以做到
&
类型的别名
ts基础讲解
- typescript由微软开发的一款开源编程语言。
- ts是jacascript的超集,遵循ES6,ES5规范,ts扩展了js的语法。
- ts更像后端java,c#这样的面向对象的语言,可以让js开发大型的企业项目,
- 谷歌也大力支持ts的推广,谷歌的angular2.x就是基于ts语法开发的
- 最新的Vue,React也继承ts
- Nodejs框架Nestjs,midway中用的就是ts语法.
基础配置
安装:npm i -g typescript
验证是否安装成功:tsc -v
Version 4.4.3
编译ts:tsc index.ts(需要编译的ts文件)
ts开发工具 vscode自动编译ts
- 创建tsconfig.json文件
tsc --init 生成配置文件
只改tsconfig:outdir:\'./js\' - 自动生成js
vscode-->终端-->运行任务-->typescript-->tsc:监视
一、ts中的类型
ts中为了是编写的代码更加规范,更有利于维护,增加了类型校验。
类型赋值错误会报错,
主要类型有:
类型 | 名称 | 解释 | 写法 |
---|---|---|---|
布尔类型 | boolean | true/false | var flag:boolean=true |
数值类型 | number | 整数/小数 | var num:number=123 |
字符串类型 | string | 字符串 | var str:string=\'123\' |
数组类型 | array | 数组 | let arr:number[]=[1,2,3](只能放number类型)/let arr:Array |
元组类型 | tuple | 数组的一种可以指定数组里每项类型 | let arr:[string,number,boolean]=[\'ww\',123,true] |
枚举类型 | enum | enum 枚举名称{标识符[=整形常数]...} | enum Flag{success:1,err:-1},var f:Flag=Flag.err enum Color={red,blue,orage} ,var c:Color=Color.blue //c==1 |
任意类型 | any | 任意的值 | let num:any=\'123\' |
null、undefined | 其他类型子类型 | var num:number | |
void类型 | void | 没有任何类型,一般用于函数没有返回值 | function run():void {} |
其他类型 | never | 包括null,undefined子类型,代表从不会出现的值 | never的变量只能被never类型赋值 |
二、函数定义
ES5函数定义
函数声明
function run() {
return \'run\'
}
匿名函数
var run2 = function () { }
ts函数定义方法
1-函数声明
function run1(): string {
return \'aa\'
}
2-匿名函数
var fun2 = function (): number {
return 123
}
3-传参
function getInfo(name: string, age: number): string {
return `${name}++${age}`
}
console.log(getInfo(\'asd\', 22))
4-无返回值
```function run3(): void { }````
ts方法的可选参数
ES5方法的实参和形参可以不一样,ts中必须一样,如果不一样需要配置可选参数
注意:可选参数必须配置到参数最后面,用?表示可选
function getInfos(name: string, age?: number): string {
return `${name}++${age}`
}
默认参数
es5里面没法设置默认参数,es6和ts找那个可以设置默认参数
默认参数可以不传,类似于可选参数
function getInfo1(name: string, age: number = 20): string {
return `${name}++${age}`
}
剩余参数
1-改进前写法
function sum(a: number, b: number, c: number, d: number): number {
return a + b + c + d
}
2-改进后
三点运算符 接收新传过来的值
function sum1(...arr: number[]): number {
var sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
alert(sum1(1, 2, 3, 4))
另一种
function sum2(a: number, ...arr: number[]): number {
var sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return a + sum
}
alert(sum2(1, 2, 3, 4))
函数重载
java中方法的重载,:两个或以上同名函数,但他们参数不一样,这是会出现函数重载情况
ts中的从在,通过为一个函数提供多个函数类型定义来实现多种功能的目的
ts为了箭筒es5和es6从在写法和java中有区别
es5中出现同名方法,下面的会替换上面的方法
ts重载
function getcon(name: string): string;
function getcon(age: number): number;
function getcon(name: string,age: number): string;
function getcon(str: any,age?:number): any {
if (typeof str == \'string\') {
return \'姓名\' + str
} else {
return \'年龄\' + str
}
}
三、对象的继承
es5继承
-
es5里面的构造函数
function Person() { this.name = \'张珊\' this.age = 20 this.run = function () { } }
-
原型链上的属性会被多个实例共享,构造函数不会
function Person() { this.name = \'张珊\' this.age = 20 this.run = function () { } } Person.prototype.sex = \'男\' Person.prototype.work = function () { console.log(this.name) } Person.getInfo = function () { // 静态方法 } var p = new Person() p.work() // 调用静态方法 Person.getInfo()
-
构造函数与原型链增加方法
function Person() { this.name = \'张珊\' this.age = 20 this.run = function () { } } // 原型链上的属性会被多个实例共享,构造函数不会 Person.prototype.sex = \'男\' Person.prototype.work = function () { console.log(this.name) } Person.getInfo = function () { // 静态方法 } var p = new Person() p.work()
-
类里面的静态方法
function Person() { this.name = \'张珊\' this.age = 20 } // 定义静态方法 Person.getInfo = function () { } var p = new Person() // 调用静态方法 Person.getInfo()
-
es5继承
原型链+对象冒充function Person(age) { this.name = \'张珊\' this.age = age } Person.prototype.sex = \'男\' Person.prototype.work = function () { console.log(this.name) } var p = new Person(18) // 对象冒充继承---不可以继承原型链的属性和方法 function Web(){ Person.call(this) } // 原型链继承-----实例化后没法给父类传参 Web.prototype=new Person() var son=new Web()
ts继承
1、ts定义类
class Person {
name: string; //属性 省略了public关键词
constructor(n: string) {
this.name = n
}//构造函数,实例化类的时候触发的方法
run(): void { }
}
var p = new Person(\'aa\')
p.run()
2、ts中实现继承
关键字:extends,super
子类与父类有相同方法,子类优先级更高
class Person1 {
name: string; //属性 省略了public关键词
constructor(n: string) {
this.name = n
}//构造函数,实例化类的时候触发的方法
run(): string {
return `${this.name}是`
}
}
class Webs extends Person1 {
constructor(name: string) {
super(name)//类似于初始化父类构造函数
}
work() { }
}
var w = new Webs(\'李四\')
3、ts类里面的修饰符
ts里面定义属性的时候给我们提供了三种修饰符
-
public :公有:在类里面,子类,类外面都可以访问
-
protected :保护类型:在类里面,子类都可以访问,类外面不可以访问
-
private:私有:在类里面可以访问,子类,类外面都不可以访问
-
属性不加修饰符默认公有public
class Person2 {
name: string; //属性 省略了public关键词
private age: number
constructor(n: string, a: number) {
this.name = n
this.age = a
}//构造函数,实例化类的时候触发的方法
run(): string {
return `${this.name}是`
}
}
4、静态属性 静态方法
es5里面的
function Person(){}
Person.run2=function(){}//静态方法
ts里面的
静态方法无法调用类里面的属性,可以调用静态属性
class Person3 {
static sex = \'nam\'//静态属性
public name: string
constructor(name: string) {
this.name = name
}
run() { }
static prient() {console.log(this.sex,Person3.sex) }//静态方法
}
var p = new Person3(\'11\')
Person3.prient()//静态方法调用
5、多态
父类定义一个方法不去实现,让继承它的子类去实现,每个子类有不同的表现
多态属于继承的一种表现
class Animal{
name:string
constructor(name:string){
this.name=name
}
eat(){
console.log(\'吃的方法\')
}
}
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+\'吃肉\'
}
}
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+\'吃鱼\'
}
}
6、抽象方法
- ts中的抽象类,他提供其他类集成的基类,不能直接被实例化
- 用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
- abstract抽象方法只能放在抽象类里面
- 抽象类的子类必须事项抽象类里面的方法
抽象类和抽象方法用来定义标准
标准:Animal这个类要求他的子类必须包含eat
abstract class Animals{
/**
* name
*/
public name:string
constructor(name:string){
this.name=name
}
abstract eat():any;
}
// 抽象类的子类必须事项抽象类里面的方法
class Dogs extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+\'吃肉\'
}
}
四、接口
接口的作用:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,换口起到一种限制和规范的作用。接口定义了某一批央所雷要遵守的现范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。typescrip中的接口类似于java,同时还增加了更灵活的接口类型,包括属性面数、可索引和类
1.属性接口
1、对json的约束
ts自定义方法传入对json进行约束
function prientLabel(labelInfo: { label: string }): void {
}
prientLabel({ name: \'aa\' })//错误写法
prientLabel({ label: \'aa\' })//正确写法
2、对批量方法进行约束
接口:行为和动作规范,对批量方法进行约束
参数顺序可以不一样,但必须得有
关键词:interface
interface FullName {
firstName: string;//注意;结束
secondName: string;
}
function prientName(name: FullName) {
// 必须传入对象 firstName secoendName
console.log(name.firstName, name.secondName)
}
var obj = { firstName: \'1\', secondName: \'jj\', age: 1 }
prientName(obj)
prientName({ firstName: \'1\', secondName: \'jj\', age: 1 })//传age有问题
接口:可选属性
interface FullNames {
firstName: string;//注意;结束
secondName?: string;
}
案例
interface Config {
type: string;
url: string;
data?: string
dataType: string
}
function ajax(config: Config) {
var xhr = new XMLHttpRequest()
xhr.open(config.type, config.url, true)
xhr.send(config.data)
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (config.dataType == \'json\') {
JSON.parse(xhr.response)
}
}
}
}
ajax({
type: \'get\',
url: \'http://..\',
data: \'\',
dataType: \'json\'
})
2.函数类型接口
对传入的参数以及返回值进行约束
加密函数类型接口
interface encrypt {
(ke: string, value: string): string
}
var md5: encrypt = function (key: string, value: string): string {
return key + value
}
3.可索引接口
数组,对象的约束(不常用)
interface UserArr {
[index: number]: string
}
var arr: UserArr = [\'11\', \'22\']
interface UserObj {
[index: string]: string
}
var objw: UserObj = { name: \'20\' }
4.类类型接口
对类进行约束和抽象类有点相似
关键字:implements
interface Animal1 {
name: string;
eat(str: string): void
}
class Dog implements Animal1 {
name: string;
constructor(name: string) {
this.name = name
}
eat() {
}
}
5.接口扩展
接口可以继承接口
interface Animalss {
eat(): void
}
interface Person extends Animalss {
work(): void
}
class Son implements Person {
name: string
constructor(name: string) {
this.name = name
}
eat() { }
work() { }
}
class Progeammer {
name: string
constructor(name: string) {
this.name = name
}
coding() { }
}
class web extends Progeammer implements Person {
constructor(name: string) {
super(name)
}
eat() { }
work() { }
coding() { }
}
五、泛型
- 泛型,软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
- 在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
- 通俗理解:泛型就是解决类 接日 方法的复用性、以及对不特定数据类型的支持
普通写法
只能返回string类型的数据
function getData(value:string):string{return value}
返回多种类型的数据 any可以解决这种问题(any放弃了类型检查)
function getData1(value:any):any{return value}
1.泛型定义
- 传入和返回类型相同
- 可以支持不特定的数据类型
- T表示泛型,具体什么类型是调用这个方法的时候决定的
function getData2<T>(value:T):T{return value} getData2<number>(123) // getData2<number>(‘kkk’)/* 错误写法 */
2.泛型类
普通写法
class Minclass{
public list:number[]=[]
add(num:number){
this.list.push(num)
}
min():number{
var min=this.list[0]
for (let i = 0; i < this.list.length; i++) {
if(min>this.list[i]){
min=this.list[i]
}
}
return min
}
}
泛型类写法
class Minclass1<T>{
public list:T[]=[]
add(num:T):void{
this.list.push(num)
}
min():T{
var min=this.list[0]
for (let i = 0; i < this.list.length; i++) {
if(min>this.list[i]){
min=this.list[i]
}
}
return min
}
}
var m1=new Minclass1<number>()
3.泛型接口
interface ConfigFn{
(value:string,value2:string):string
}
var setData:ConfigFn=function(val:string,val2:string):string{
return val+val2
}
interface ConfigFn1{
<T>(value:T,value2:T):T
}
var setData1:ConfigFn1=function<T>(val:T,val2:T):T{
return val
}
setData1<string>(\'123\',\'11\')
interface ConfigFn2<T>{
(value:T):T
}
function getData6<T>(val:T):T{
return val
}
var myGetData:ConfigFn2<string>=getData6
myGetData(\'ll\')
案例
class User{
name:string|undefined;
pass:string|undefined
}
class Mysql{
add(user:User):boolean{
return true
}
}
var u=new User()
u.name=\'zhang\'
u.pass=\'123\'
var db=new Mysql()
db.add(u)
泛型封装
class User1{
name:string|undefined;
pass:string|undefined
}
class Mysql1<T>{
add(info:T):boolean{
return true
}
}
var u=new User1()
u.name=\'zhang\'
u.pass=\'123\'
var db1=new Mysql1<User1>()
db1.add(u)
案例
功能:定义一个操作数据库的库支持 Mysql MssqlMongoDb
要求1:Mysql MsSqlMongoDb功能一样都有 add update delete get方法
注意:约束统一的规范、以及代码重用
解决方案:需要约束规范所以要定义接口,需要代码重用所以用到泛型
1、接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范
2、泛型 通俗理解:泛型就是解决类 接口 方法的复用性、
interface DBI<T>{
add(info:T):boolean;
update(info:T,id:number):boolean
delete(id:number):boolean
get(id:number):any[]
}
// 定义一个操作mysql数据库的类
class MysqlDb<T> implements DBI<T>{
add(info: any): boolean {
throw new Error("Method not implemented.")
}
update(info: any, id: number): boolean {
throw new Error("Method not implemented.")
}
delete(id: number): boolean {
throw new Error("Method not implemented.")
}
get(id: number): any[] {
throw new Error("Method not implemented.")
}
}
// 操作用户表 定义一个User类和数据库映射表
class Users{
name:string|undefined
pass:string|undefined
}
var u=new Users()
u.name=\'00\'
u.pass=\'ii\'
var omysql=new MysqlDb<Users>()
omysql.add(u)
六、模块
- 模块的的概念(官方):
- 关于木语的一点说明:请务必注意一点,TypeScript 1.5里木语名已经发生了变化。“内部模块”现在称做“命名空间”。外部模块“现在则简称为“模块#模块在且自身的作用域里执行,而不是在全局作用域里:
- 这意味着定义在一个模块里的变量,因数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,国数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一。
- 模块的概念(自己理解):
- 我们可以把一些公共的功能单独抽离成一个文件作为一个模块。
- 模块里面的变量 函数 类等默认是私有的,如果我们要在外部访问模块里面的数据(变量、函数、类),我们要要通过export暴露模块里面的数据(变量、团数、类。。》。
- 暴露后我们通过 import 引入模块就可以使用模块里面暴露的数据(变量、函数、类...)。
自定义模块
var dburl=\'xxx\'
export function getData():any[]{
return[{
title:\'123\'
},{
title:\'456\'
}]
}
导入
import {getData} from \'./db\'
getData()
export default 默认导出
每个模块都可以有一个default导出,默认导出使用default关键字标记;并且一个模块只能够有一个default导出,需要使用一个特殊的导入形式
七、命名空间
- 在代码量较大的情况下,为了避免各种变量命名相冲突,可将相似功能的函数、类、接口等放置到命名空间内
- 同Java的包、.Net的命名空间一样,TypeScript的命名空间可以将代码包裹起来,只对外暴露需要在外部访问的对象。命名空间内的对象通过export关键字对外暴露。
命名空间和模块的区别
- 命名空间:内部模块,主要用于组织代码,避免命名冲突。
- 模 块:ts的外部模块的简称,侧重代码的复用,一个模块里可能会有多个命名空间。
namespace A{
interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 在吃狗粮。`);
}
}
export class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃猫粮。`);
}
}
}
namespace B{
interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 在吃狗粮。`);
}
}
export class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 在吃猫粮。`);
}
}
}
var c=new B.Cat(\'小花\');
c.eat();
封装:模块化+命名空间
export namespace A{
interface Animal {
name: string;
eat(): void;
}
export class Dog implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 在吃狗粮。`);
}
}
export class Cat implements Animal {
name: string;
constructor(theName: string) {
this.name = theName;
}
eat() {
console.log(`${this.name} 吃猫粮。`);
}
}
}
import {A} from \'./modules/animal\';
var d=new A.Dog(\'小黑\');
d.eat();
八、装饰器
属性装饰器
装饰器工厂
装饰器定义
- 装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为。
- 通俗的讲装饰器就是一个方法,可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
- 常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器
- 装饰器的写法:普通装饰器(无法传参) 、 装饰器工厂(可传参)
- 装饰器是过去几年中js最大的成就之一,已是Es7的标准特性之一
类装饰器
类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。 类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。 传入一个参数
类装饰器:普通装饰器(无法传参)
function logClass(params:any){
console.log(params);
// params 就是当前类
params.prototype.apiUrl=\'动态扩展的属性\';
params.prototype.run=function(){
console.log(\'我是一个run方法\');
}
}
@logClass
class HttpClient{
constructor(){
}
getData(){
}
}
var http:any=new HttpClient();
console.log(http.apiUrl);
http.run();
类装饰器:装饰器工厂(可传参)
function logClass(params:string){
return function(target:any){
console.log(target);
console.log(params);
target.prototype.apiUrl=params;
}
}
@logClass(\'http://www.itying.com/api\')
class HttpClient{
constructor(){
}
getData(){
}
}
var http:any=new HttpClient();
console.log(http.apiUrl);
类装饰器案例
下面是一个重载构造函数的例子。
装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。
如果类装饰器返回一个值,它会使用提供的构造函数来替换类的声明。
function logClass(target:any){
console.log(target);
return class extends target{
apiUrl:any=\'我是修改后的数据\';
getData(){
this.apiUrl=this.apiUrl+\'----\';
console.log(this.apiUrl);
}
}
}
@logClass
class HttpClient{
public apiUrl:string | undefined;
constructor(){
this.apiUrl=\'我是构造函数里面的apiUrl\';
}
getData(){
console.log(this.apiUrl);
}
}
var http=new HttpClient();
http.getData();
属性装饰器
属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:
- 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
- 成员的名字。
类装饰器
function logClass(params:string){
return function(target:any){
// console.log(target);
// console.log(params);
}
}
属性装饰器
function logProperty(params:any){
return function(target:any,attr:any){
console.log(target);
console.log(attr);
target[attr]=params;
}
}
@logClass(\'xxxx\')
class HttpClient{
@logProperty(\'http://itying.com\')
public url:any |undefined;
constructor(){
}
getData(){
console.log(this.url);
}
}
var http=new HttpClient();
http.getData();
方法装饰器
它会被应用到方法的 属性描述符上,可以用来监视,修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数:
2. 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
2. 成员的名字。
3. 成员的属性描述符。
方法装饰器一
function get(params:any){
return function(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
target.apiUrl=\'xxxx\';
target.run=function(){
console.log(\'run\');
}
}
}
class HttpClient{
public url:any |undefined;
constructor(){
}
@get(\'http://www.itying,com\')
getData(){
console.log(this.url);
}
}
var http:any=new HttpClient();
console.log(http.apiUrl);
http.run();
方法装饰器二
function get(params:any){
return function(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc.value);
//修改装饰器的方法 把装饰器方法里面传入的所有参数改为string类型
//1、保存当前的方法
var oMethod=desc.value;
desc.value=function(...args:any[]){
args=args.map((value)=>{
return String(value);
})
oMethod.apply(this,args);
}
}
}
class HttpClient{
public url:any |undefined;
constructor(){
}
@get(\'http://www.itying,com\')
getData(...args:any[]){
console.log(args);
console.log(\'我是getData里面的方法\');
}
}
var http=new HttpClient();
http.getData(123,\'xxx\');
方法参数装饰器
参数装饰器表达式会在运行时当作函数被调用,可以使用参数装饰器为类的原型增加一些元素数据 ,传入下列3个参数:
- 对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
- 方法的名字。
- 参数在函数参数列表中的索引。
function logParams(params:any){
return function(target:any,methodName:any,paramsIndex:any){
console.log(params);
console.log(target);
console.log(methodName);
console.log(paramsIndex);
target.apiUrl=params;
}
}
class HttpClient{
public url:any |undefined;
constructor(){
}
getData(@logParams(\'xxxxx\') uuid:any){
console.log(uuid);
}
}
var http:any = new HttpClient();
http.getData(123456);
console.log( http.apiUrl);
装饰器执行顺序
属性》方法》方法参数》类
如果有多个同样的装饰器,它会先执行后面的
function logClass1(params:string){
return function(target:any){
console.log(\'类装饰器1\')
}
}
function logClass2(params:string){
return function(target:any){
console.log(\'类装饰器2\')
}
}
function logAttribute1(params?:string){
return function(target:any,attrName:any){
console.log(\'属性装饰器1\')
}
}
function logAttribute2(params?:string){
return function(target:any,attrName:any){
console.log(\'属性装饰器2\')
}
}
function logMethod1(params?:string){
return function(target:any,attrName:any,desc:any){
console.log(\'方法装饰器1\')
}
}
function logMethod2(params?:string){
return function(target:any,attrName:any,desc:any){
console.log(\'方法装饰器2\')
}
}
function logParams1(params?:string){
return function(target:any,attrName:any,desc:any){
console.log(\'方法参数装饰器1\')
}
}
function logParams2(params?:string){
return function(target:any,attrName:any,desc:any){
console.log(\'方法参数装饰器2\')
}
}
@logClass1(\'http://www.itying.com/api\')
@logClass2(\'xxxx\')
class HttpClient{
@logAttribute1()
@logAttribute2()
public apiUrl:string | undefined;
constructor(){
}
@logMethod1()
@logMethod2()
getData(){
return true;
}
setData(@logParams1() attr1:any,@logParams2() attr2:any,){
}
}
var http:any=new HttpClient();
以上是关于TS基础语法的主要内容,如果未能解决你的问题,请参考以下文章