[TypeScript] Understanding Decorators

Decorators are a feature of TypeScript that are becoming more and more common in many major libraries. This lesson walks you through what decorators are and how to create your own.

Nomarl way to decorate a object :

const Person = {name: ‘John‘};

function addAge(age){
    return function(person){
        return {
            age,
            name: person.name
        }
    }
}

const john = addAge(30)(Person);
console.log(john); // {name: "John", age: 30}

In Typescript, we can enable "experimentaDecorators", which is ES7 feature:

{
    "compilerOptions": {
        "rootDir": "src",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "./dist",
        "noEmitOnError": true,
        "experimentalDecorators": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}
function addAge(age){
    return function(targetClass){
        return class{
            age = age;
            name = new targetClass().name;
        }
    }
}

@addAge(30)
class Person{
    name = "Johnn";
}

const john = new Person();
console.log(john); // {name: "Johnn", age: 30}

As before we create addAge function as decorator, different from before, it return class, because we want to decorate Person class.

After the decorator, we will have age prop on the person class.

时间: 2024-10-27 04:18:39

[TypeScript] Understanding Decorators的相关文章

[TypeScript] Understanding Generics with RxJS

Libraries such as RxJS use generics heavily in their definition files to describe how types flow through different interfaces and function calls. We can provide our own type information when we create Observables to enable all of the auto-complete &

[Vue + TS] Create your own Decorators in Vue with TypeScript

We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript. Import: import {cr

TypeScript学习笔记(九):装饰器(Decorators)

装饰器简介 装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式. 需要注意的是:装饰器是一项实验性特性,在未来的版本中可能会发生改变. 若要启用实验性的装饰器特性,你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项: 1 { 2 "compilerOptions": { 3 "target": "ES5", 4 "experimentalDeco

[TypeScript] Dynamically initialize class properties using TypeScript decorators

Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions when used correctly. In this lesson we will look at how we can use decorators to initialize properties of a class to promises that will make GET reques

[Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the @Inject and @Provide decorators in tandem! When you want to provide some servic

TypeScript 上手教程

无疑,对于大型项目来说,Vanilla Js 无法满足工程需求.早在 2016 年 Anuglar 在项目中引入 TypeScript 时,大概也是考虑到强类型约束对于大型工程的必要性,具体选型考虑可参考这篇文章.然后可以看到 TypeScript 在社区中逐渐升温.但凡社区中举足轻重的库,如果不是原生使用 TypeScript 编写,那么也是通过声明文件的方式对 TypeScript 提供支持,比如 React(虽然不是包含在官方仓库中,而是通过 @types/react),同时官方脚手架工具

TypeScript系列1-1.5版本新特性

1. 简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响.由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova.想要学习好Angula2以及阅读其代码, 就必须了解和学习TypeScript,也因此需要学习好ES6以及Web Component.近期将开始学习TypeScript语言. 下面先看看TypeScript语言的发展: 鉴于JavaScript这种脚本语言很难应用于大规

TypeScript手册翻译系列8-常见错误与Mixins

常见错误 下面列出了在使用TypeScript语言和编译器期间,经常会遇到的一些常见错误. "tsc.exe" exited with error code 1. 解决方案: 检查文件编码为UTF-8 - https://typescript.codeplex.com/workitem/1587 external module XYZ cannot be resolved 解决方案:检查模块路径是大小写敏感- https://typescript.codeplex.com/workit

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript

component 组件 成分; 零件; [数]要素; 组分; Angular2怎么使用第三方的component库(如 jquery,easyUI ,Bootstrap 等) PWA  增强web app helloWorld跑起来了,之前失败是因为Chrome服务器插件要FQ才能下载 https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/ 安装谷歌插件 web-serve