Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
a619c528
Commit
a619c528
authored
Aug 04, 2022
by
杨靖
😂
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
代码提交,装饰器的基本用法
parent
27a9b008
Pipeline
#16486
failed with stage
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
180 additions
and
0 deletions
+180
-0
typeScript装饰器基础用法.md
source/_posts/typeScript装饰器基础用法.md
+180
-0
No files found.
source/_posts/typeScript装饰器基础用法.md
0 → 100644
View file @
a619c528
---
title: TypeScript泛型
date: 2022/08/04 17:00:00
tags:
-
前端
-
typescript
author: 杨靖
---
#### ts装饰器是什么
装饰器是通过添加标注的方式,来对类型进行扩展的一种方式。
-
只能在类中使用
-
减少冗余代码量
-
提高代码扩展性
#### ts装饰器的语法
装饰器的使用非常简单,装饰器本质就是一个函数,在特定的位置调用装饰器函数即可对数据(类、方法、甚至参数等)进行扩展。下面例子演示给 MyTestableClass 类添加静态属性 isTestable:
```
typescript
@
testable
class
MyTestableClass
{}
function
testable
(
target
)
{
target
.
isTestable
=
true
;
}
MyTestableClass
.
isTestable
// true
```
#### 装饰器的分类
装饰器 是一个函数,它可以通过 @funName 在类、方法、访问符、属性、参数上,对它们进行包装,然后返回一个包装后的目标对象(类、方法 、访问符、属性、参数)
1.
类装饰器
类装饰器表达式会在运行时当作函数被调用,类的构造函数作为其唯一的参数。下面例子演示给 MyTestableClass 类添加静态属性 isTestable:
```typescript
@testable
class MyTestableClass {}
function testable(target) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
```
2.
类方法装饰器
方法装饰器表达式会在运行时当作函数被调用,传入下列3个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
成员的属性描述符。
下面的例子演示让类的方法变为只读。
(1)实例方法
```typescript
function readonly(target, name, descriptor) {
descriptor.writable = false;
return descriptor;
}
class Cat {
@readonly
say() {
console.log("meow ~");
}
}
```
(2)静态方法
```typescript
class MyTestableClass {
@testable
static sleep() {}
}
function testable(target, name, descriptor) {
target.isTestable = true;
}
MyTestableClass.isTestable // true
```
3.
类属性装饰器
属性装饰器表达式会在运行时当作函数被调用,传入下列2个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
属性描述符不会做为参数传入属性装饰器,这与TypeScript是如何初始化属性装饰器的有关。官方文档有说明。
```typescript
class MyTestableClass {
@testable
name: string;
constructor(name: string) {
this.name = name;
}
}
function testable(target, name) {
console.log(arguments)
}
```
4.
参数装饰器
参数装饰器表达式会在运行时当作函数被调用,传入下列3个参数:
对于静态成员来说是类的构造函数,对于实例成员是类的原型对象。
成员的名字。
参数在函数参数列表中的索引。
注意 参数装饰器只能用来监视一个方法的参数是否被传入。参数装饰器的返回值会被忽略。
```typescript
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet(@required name: string) {
return "Hello " + name + ", " + this.greeting;
}
}
```
#### 装饰器的执行顺序
实例装饰器:属性装饰 -> 访问器装饰 -> 参数装饰 => 方法装饰
静态装饰器: 属性 => 访问器 => 参数 => 方法
类装饰器
#### 复合装饰器
```
typescript
@
d1
@
d2
class
Greeter
{
greeting
:
string
;
constructor
(
message
:
string
)
{
this
.
greeting
=
message
;
}
greet
()
{
return
"Hello, "
+
this
.
greeting
;
}
}
function
d1
(
target
:
Function
)
{}
function
d2
(
target
:
Function
)
{}
```
#### 装饰器工厂
如果我们需要给装饰器执行过程中传入一些参数的时候,就可以使用装饰器工厂来实现,它返回一个装饰器函数。
```
typescript
@
Controller
(
'user'
)
class
Greeter
{
greeting
:
string
;
constructor
(
message
:
string
)
{
this
.
greeting
=
message
;
}
greet
()
{
return
"Hello, "
+
this
.
greeting
;
}
}
function
Controller
(
path
:
string
)
{
return
function
(
target
:
Function
)
{
(
target
as
any
).
path
=
path
;
}
}
```
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment