~~~
namespace a {
interface Person {
xx: string;
yy: string
}
function enhancer(target: any) {
target.prototype.xx = 'xx';
target.prototype.yy = 'yy';
}
@enhancer
class Person {
constructor() { }
}
let p = new Person();
console.log(p.xx);
console.log(p.yy);
}
//把类整个替换
namespace b {
function enhancer() {
return function (target: any) {
return class extends Person {
constructor(name: string, age: number) {
super(name, age);
}
getAge() {
console.log(this.age);
}
}
}
}
@enhancer()
class Person {
public name: string = 'person';
public age: number = 10;
constructor(name: string, age: number) { this.name = name, this.age = age }
}
let p = new Person('zhufeng', 10);
p.name;
}
//属性装饰器 装饰属性
namespace c {
//target如果装饰的是个普通属性的话,那么这个target指向类的原型 Person.prototype
//target装饰的是一个类的属性static,那么这个target指定类的定义
function upperCase(target: any, propertyName: string) {
let value = target[propertyName];
const getter = () => value;
const setter = (newVal: string) => {
value = newVal.toUpperCase();
}
delete target[propertyName];
Object.defineProperty(target, propertyName, {
get: getter,
set: setter,
enumerable: true,
configurable: true
});
}
function propertyEnumerable(flag: boolean) {
return function (target: any, methodName: string) {
}
}
function methodEnumerable(flag: boolean) {
return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
propertyDescriptor.enumerable = flag;
}
}
function setAge(age: number) {
return function (target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
target.age = age;
}
}
function toNumber(target: any, methodName: string, propertyDescriptor: PropertyDescriptor) {
let oldMethod = propertyDescriptor.value;
propertyDescriptor.value = function (...args: any[]) {
args = args.map(item => parseFloat(item));
return oldMethod.apply(this, args);
}
}
class Person {
static age: number;
@upperCase
@propertyEnumerable(false)
name: string = 'zhufeng'
@methodEnumerable(true)
getName() {
console.log('getName');
}
@setAge(100)
static getAge() {
}
@toNumber
sum(...args: any[]) {
return args.reduce((accu, item) => accu + item, 0);
}
}
let p = new Person();
p.name = 'jiagou';
console.log(p.name);//JIAGOU
for (let attr in p) {
console.log('attr=' + attr);
}
console.log(Person.age);
console.log(p.sum(1, '2', '3'));
}
namespace d {
interface Person {
age: number
}
//Person.prototype login 1
function addAge(target: any, methodName: string, paramsIndex: number) {
console.log(target, methodName, paramsIndex);
target.age = 10;
}
//参数装饰 方法参数
class Person {
login(username: string, @addAge password: string) {
console.log(this.age, username, password);
}
}
let p = new Person();
p.login('zhufeng', '123');
}
namespace e {
function Class1Decorator() {
return function (target: any) {
console.log("类1装饰器");
}
}
function Class2Decorator() {
return function (target: any) {
console.log("类2装饰器");
}
}
function MethodDecorator() {
return function (target: any, methodName: string, descriptor: PropertyDescriptor) {
console.log("方法装饰器");
}
}
function Param1Decorator() {
return function (target: any, methodName: string, paramIndex: number) {
console.log("参数1装饰器");
}
}
function Param2Decorator() {
return function (target: any, methodName: string, paramIndex: number) {
console.log("参数2装饰器");
}
}
function PropertyDecorator(name: string) {
return function (target: any, propertyName: string) {
console.log(name + "属性装饰器");
}
}
@Class1Decorator()
@Class2Decorator()
class Person {
@MethodDecorator()
greet(@Param1Decorator() p1: string, @Param2Decorator() p2: string) { }
@PropertyDecorator('name')
name: string = 'zhufeng';
@PropertyDecorator('age')
age: number = 10;
}
}
//属性方法先执行,谁先写先执行谁
//方法的时候,先参数再方法,而且 他们一定会在一起
//最后是类
//如果是同类型的,先执行后写的
~~~
- 文档简介
- 基础面试题【珠峰2019.8】
- P01_call,aplly区别
- P02_综合面试题讲解2-2
- P03_箭头函数和普通函数区别-综合面试题讲解2-3
- P05_实现indexOf
- P06_综合面试题讲解2-6
- P07_URL解析题
- P08_原型题
- P09_图片延时加载
- P10_正则-包含数字字母下划线
- P11_综合面试题讲解2-11
- P12_英文字母加空格
- P13_数组扁平化并去重
- P14_模拟实现new
- P15_合并数组
- P16_定时器,打印012345
- P17_匿名函数输出值问题
- P18_a在什么情况下打印输出+1+1+1
- P19_对数组的理解
- P20_冒泡排序
- P21_插入排序
- P22_快速排序
- P23_销售额存在对象中
- P24_求数组的交集
- P25_旋转数组
- P26_ [函数柯理化思想]
- P27_ [柯理化函数的递归]
- 网络协议【珠峰2019.6】
- TypeScript+Axios入门+实战【珠峰2019.11】
- 1.数据结构
- 2.函数和继承
- 3.装饰器
- 4.抽象类-接口-泛型
- 05-结构类型系统和类型保护
- 06-类型变换
- AST-抽象语法树
- React性能优化【珠峰2019.10】
- 1-react性能优化
- 2-react性能优化
- 3.react-immutable
- React Hooks【珠峰2019.12】
- 前端框架及项目面试
- 第07章 React 使用
- 7-1 React使用-考点串讲
- 7-2 JSX基本知识点串讲
- 7-3 JSX如何判断条件和渲染列表
- 7-4 React事件为何bind this
- 7-5 React事件和DOM事件的区别
- 7-6 React表单知识点串讲
- 7-7 React父子组件通讯
- 7-8 setState为何使用不可变值
- 7-9 setState是同步还是异步
- 7-10 setState合适会合并state
- 7-11 React组件生命周期
- 7-12 React基本使用-知识点总结和复习
- 7-13 React函数组件和class组件有何区别
- 7-14 什么是React非受控组件
- 7-15 什么场景需要用React Portals
- 7-16 是否用过React Context
- 7-17 React如何异步加载组件
- 7-18 React性能优化-SCU的核心问题在哪里
- 7-19 React性能优化-SCU默认返回什么
- 7-20 React性能优化-SCU一定要配合不可变值
- 7-21 React性能优化-PureComponent和memo
- 7-22 React性能优化-了解immutable.js
- 7-23 什么是React高阶组件
- 7-24 什么是React Render Props
- 7-25 React高级特性考点总结
- 7-26 Redux考点串讲
- 7-27 描述Redux单项数据流
- 7-28 串讲react-redux知识点
- 7-29 Redux action如何处理异步
- 7-30 简述Redux中间件原理
- 7-31 串讲react-router知识点
- 7-32 React使用-考点总结
- 第08章 React 原理
- 8-1 React原理-考点串讲
- 8-2 再次回顾不可变值
- 8-3 vdom和diff是实现React的核心技术
- 8-4 JSX本质是什么
- 8-5 说一下React的合成事件机制
- 8-6 说一下React的batchUpdate机制
- 8-7 简述React事务机制
- 8-8 说一下React组件渲染和更新的过程
- 8-9 React-fiber如何优化性能
- 第09章 React 面试真题演练
- 9-1 React真题演练-1-组件之间如何通讯
- 9-2 React真题演练-2-ajax应该放在哪个生命周期
- 9-3 React真题演练-3-组件公共逻辑如何抽离
- 9-4 React真题演练-4-React常见性能优化方式
- 9-5 React真题演练-5-React和Vue的区别
- 第10章 webpack 和 babel
- 10-1 webpack考点梳理
- 10-2 webpack基本配置串讲(上)
- 10-3 webpack基本配置串讲(下)
- 10-4 webpack如何配置多入口
- 10-5 webpack如何抽离压缩css文件
- 10-6 webpack如何抽离公共代码和第三方代码
- 10-7 webpack如何实现异步加载JS
- 10-8 module chunk bundle 的区别
- 10-9 webpack优化构建速度-知识点串讲
- 10-11 happyPack是什么
- 10-12 webpack如何配置热更新
- 10-13 何时使用DllPlugin
- 10-14 webpack优化构建速度-考点总结和复习
- 10-15 webpack优化产出代码-考点串讲
- 10-16 什么是Tree-Shaking
- 10-17 ES Module 和 Commonjs 的区别
- 10-18 什么是Scope Hostin
- 10-19 babel基本概念串讲
- 10-20 babel-polyfill是什么
- 10-21 babel-polyfill如何按需引入
- 10-22 babel-runtime是什么
- 10-23 webpack考点总结和复习
- 10-24 webpack面试真题-前端代码为何要打包
- 10-25 webpack面试真题-为何Proxy不能被Polyfill
- 10-26 webpack面试真题-常见性能优化方法