Skip to main content


TypeScript with Modules lacking Types


We have a custom TYPO3 Backend module which is a small web application. We wrote the web application using TypeScript. But we need to make use of some TYPO3 JavaScript APIs which do not expose types for TypeScript. I'll be going to explain how to set up TypeScript for modules not providing those types. This is a general approach, not specific to TYPO3.

Note


I'm not a frontend developer, but a backend developer. I have not enough experience in order to explain everything here or provide proper pointers. But the following is working for me in one of our projects.

The consuming code


Let's start with our actual TypeScript code consuming ES6 modules not providing types.

<span class="keyword">import</span> Modal <span class="keyword">from</span> <span class="string">'@typo3/backend/modal.js'</span>;
<span class="keyword">import</span> { SeverityEnum } <span class="keyword">from</span> <span class="string">'@typo3/backend/enum/severity.js'</span>;

The error


The above code will result in the following error output, which will lead to missing compiled JavaScript.

Src/Libs/Export/Ui.ts(<span class="number">4</span>,<span class="number">19</span>): error TS7016: Could not find a declaration file <span class="keyword">for</span> <span class="built_in">module</span> <span class="string">'@typo3/backend/modal.js'</span>. <span class="string">'vendor/typo3/cms-backend/Resources/Public/JavaScript/modal.js'</span> implicitly has an <span class="string">'any'</span> type.
Src/Libs/Export/Ui.ts(<span class="number">6</span>,<span class="number">30</span>): error TS7016: Could not find a declaration file <span class="keyword">for</span> <span class="built_in">module</span> <span class="string">'@typo3/backend/enum/severity.js'</span>. <span class="string">'vendor/typo3/cms-backend/Resources/Public/JavaScript/enum/severity.js'</span> implicitly has an <span class="string">'any'</span> type.
TypeScript: <span class="number">4</span> semantic errors
<span class="attr">TypeScript</span>: emit succeeded (<span class="keyword">with</span> errors)

Adding the necessary setup


Now let's continue with the necessary adjustments in order to get rid of the errors.

We need to adjust the tsconfig.json to provide information where to find type information:

{
   <span class="attr">"compilerOptions"</span>: {
       <span class="attr">"typeRoots"</span>: [
           <span class="string">"./local_packages/typescript_types"</span>
       ]
   }
}

The folder structure looks like this:
local_packages/typescript_types
└── TYPO3
   └── index.d.ts

And the content of the file looks like this:
declare <span class="built_in">module</span> <span class="string">'@typo3/backend/enum/severity.js'</span>;
declare <span class="built_in">module</span> <span class="string">'@typo3/backend/modal.js'</span>;

The solution is copied from the TYPO3 Extension https://github.com/quellenform/t3x-iconpack/.

https://daniel-siepmann.de/typescript-with-modules-lacking-types.html



Possible ways of customized display of form data. Including buttons to correct entered data on the respective page.




Import Data within TYPO3


TYPO3 developers are often faced with the same requirement: Import data into TYPO3. TYPO3 itself offers many ways to import data into the system. The DataHandler (TCE) or Extbase might come to your mind, as well as plain Doctrine DBAL queries. This post will explain my views on each of the options and their pros and cons. I don't consider any of them the general solution, but the pros and cons might help you find the one suiting your current use case best.

DataHandler


I always would suggest DataHandler first for the following reasons:

  • API is pretty simple, build a single array and submit.
  • It handles everything you can think of, and everything you don't remember:
  • History
  • Logging
  • Relations
  • Permissions
  • Hooks (indexing in solr, or whatever your system uses hooks for)
  • Cache flushing
  • … (things I forgot)

But there are some downsides:

  • It is slow (You can tweak the DataHandler instance to skip some things and be more performant)
  • It might do more than you want, e.g. history, logging, relations, permissions, hooks, cache flushing, ….


Doctrine DBAL


I than would recommend Doctrine DBAL for the following reasons:

  • You are in full control. You can do exactly what you want the way you want, and can optimize for memory and performance.

But it also has downsides:

  • You need to remember all necessary steps and rebuild integrations, e.g. indexing into solr, triggering cache flushes, etc.


Extbase


And then there is Extbase for the following reasons:

  • You stay in OOP
  • Most developers are probably more familiar with Extbase than the other APIs

With downsides:

  • It was not build for that task.
  • You need to add workarounds to keep performance okay.
  • You still need to do extra work like triggering indexing, cache flushing, etc.


It depends


I would say it depends on:

  • What do you need from the system, do you need hooks, logging (history) and cache flushing?
  • Do you know what you do and want to have full control over every aspect?
  • How much data do you have, how much memory and time do you have?
  • Do you want to keep OOP?

This is a recurring topic, but Eric Harrer finally made me write this blog post by bringing up the topic once more at the Fediverse: https://phpc.social/@ErHaWeb/111096230843826340.

Read more about:


https://daniel-siepmann.de/import-data-within-typo3.html


Survey for #TYPO3 #Developers: Data from an external source should be written into #Database tables with #relations via #Symfony #Command. Which method would you choose? Feel free to justify your answer in the comments.






Wireframing is the first step in designing the structure of a website, and it serves many purposes; to describe how information is presented on a page, to determine a website’s structure and how it functions, and to shape the flow of the user journey…


With TYPO3 12 it became possible to call 3rd party application in a uniform way. The new system extension "webhooks" provides everything we need to implement webhooks. In this post we learn how to do it.

AndreasKessel reshared this.



With TYPO3 12 the powerful symfony/messenger component has been integrated into the TYPO3 core. This post explains how to set up a message queue in TYPO3 and what we want it for.





My TYPO3 Journey


I'm a professional web developer doing PHP with TYPO3 since 2012. This post covers my journey from the beginning, how I've become a web developer and how I've become a TYPO3 developer and integrator. I'll also cover my experience back in the old days as a beginner and my current experience, covering my own history as well as TYPO3 history. I hope this will be useful for you, e.g. providing insights in how to become a web developer, how to get started with TYPO3 and how our job and technologies have changed over the years.


https://daniel-siepmann.de/my-typo3-journey.html



An additional CSS class, differing template paths or custom form prototypes – which approach you should use, and when.


I've added https://www.sebkln.de/en/ tutorial and news to this account. Recent posts should soon be mirrored.


Auto migrate PHP code via configuration


We need to update software regularly. E.g. because our framework released a new major version containing breaking changes to APIs. It is a cumber stone and hard and boring task, not meant to be done by humans. Luckily we have computers and software we can use to automate boring tasks. Our example is about TYPO3 and Aimeos updates. TYPO3 is an open source CMS while Aimeos is an open source shop framework. I'll share my experience how to automate the boring tasks during one update and how to use the automation while upgrading further installations. We will check out rector and show how you can use existing rules with custom configuration to auto mate your code migrations.


https://daniel-siepmann.de/auto-migrate-php-code-via-configuration.html



Missing Motivation to Blog


I find motivation crucial. It is the most important energy that drives us. Everyone has different motivations, but it is essential to every one of us. I currently lack motivation to write new blog posts. And I decided to write down my thoughts why I lack motivation and what actually motivates me. Maybe that will help some of you to learn from it regarding your own motivation.


https://daniel-siepmann.de/missing-motivation-to-blog.html




Accurately reflecting a brand’s identity and goals through its website is a layered, multi-step process. It requires strategy, technical know-how, and deep understanding of users to create a strong, visually appealing website.



Whether you’re launching a brand new project or upgrading your decades-old multisite website, you need to make sure your agency fully understands your project goals and your current suite of technology.



Whether you need to upgrade your TYPO3 version, relaunch a website, or build new enterprise functionalities, your choice of digital agency can make or break the project.



TYPO3 is an open source CMS used widely across Europe, but it is still surprisingly little known in some regions.

Uwe Michelfelder reshared this.



User experience design strives to create an outstanding experience for the users of your website or web app. But there is more to it.


People with disabilities constitute one of the most significant segments of online users, but it is an often-overlooked population in the digital world.


Google Analytics is a marketer’s best friend, but you may not be getting as accurate a picture of your data as you think.


While external teams will upgrade your ability to make updates and extend functionality for your customers, integrating them effectively is a challenge because code can quickly become opaque, buggy, and brittle.



The user journey is a substantial part of the user experience (UX). If users are unable to complete a task in your app or on your website, their user experience plummets — so does their opinion of your brand.


Users want to find information fast. If the page navigation is insufficient, they quickly resort to the search functionality.


In an ever-evolving technological landscape, keeping your brand and technology up-to-date and competitive can feel like a full-time job.


The human mind is naturally driven by aesthetics. Interface design, therefore, contributes substantially to building a positive user experience. But when it comes to durability and quality, it's what's on the inside that counts.


Site navigation is one of the most important elements of any website, and can greatly impact user experience. Poor navigation can result in shorter site visits and higher bounce rate.


Enterprises now have many software delivery channel options to choose from. With software-as-a-service (SaaS) and cloud-based implementation models on the rise, you might be trying to figure out the best software delivery channel to support your ente…


TYPO3’s separation of content and code is one of its major strengths. TYPO3 saves content in containers called content elements, which you can stack in content areas on a page record to create pages.


In an effort to reduce the amount of special configuration, many new TCA types have been introduced. Welcome to a streamlined and more intuitive TCA.