• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

A practical typeScript. React + Redux

A practical typeScript. React + Redux
 
 
Currently, the development of any modern front-end application is more complex than the level of 3r-3263. hello world The team is working on (the composition of which periodically changes) makes high demands on the quality of the code base. In order to maintain the quality level of the code at the proper level, we are in the front-line team of 3r3122. #gostgroup
We keep up with the times and are not afraid to apply modern technologies that show their practical benefits in projects 3r314. companies of all sizes
.
reference to the documentation and insert a piece of code from it as an illustration:
 
type TypeName
=
T extends string? "string":
T extends number? "number":
T extends boolean? "boolean":
T extends undefined? "undefined":
T extends Function? "function":
"object";
type T0 = TypeName
; //"string"
type T1 = TypeName <"a"> ; //"string"
type T2 = TypeName
; //"boolean"
type T3 = TypeName <() => void>; //"function"
type T4 = TypeName ; //"object"

 
How this feature helps in our case. Looking in 3r3104. type description
libraries react-redux , you can find type InferableComponentEnhancerWithProps which is responsible for ensuring that the types of injected properties do not fall into the external type of component properties, which we must explicitly specify when instantiating a component. In type 3r36332. InferableComponentEnhancerWithProps There are two generalized parameters: TInjectedProps and TNeedsProps . We are interested in the first. Let's try to pull this type out of this connector!
 

    type TypeOfConnect    = T extends InferableComponentEnhancerWithProps  
? Props
: never
;

 

And directly type pulling on a real example from 3r3131. repository (which you can clone and run a test program there):


 
    import React from 'react';
import {connect} from 'react-redux';
import {RootStore, init, TypeOfConnect, thunkAction, unboxThunk} from 'src /redux';
const storeEnhancer = connect (
(state: RootStore) => ({
state,
}), {
init,
thunkAction: unboxThunk (thunkAction),
} rrrr32: 32box323232.
type AppProps = {}
& TypeOfConnect
;
class App extends React.PureComponent {
componentDidMount () {
this.props.init ();
this.props.thunkAction (3000);
}
render () {
return (
<>
{this.props.a}

{this.props.b}
3rr3272.
{String (this .cn.art.r. 3r33272.);
}
}
export default storeEnhancer (App);
 

In the example above, we divide the connection to the repository (Redux) into two steps. In the first stage, we get a higher order component storeEnhancer (aka InferableComponentEnhancerWithProps ) to extract the injected property types from it using our helper type TypeOfConnect and further combining (through the intersection of types 3r3–3263. & 3r3–3264.) the obtained property types with the property types of the component itself. In the second stage, we simply decorate our original component. Now, whatever you add to the connector, it will automatically fall into the component property types. Great, what we wanted to achieve!


 

The attentive reader noted that action generators (for brevity, hereafter, simplify to the term action) with side effects (thunk action creators) are further processed using the function 3r-3263. unboxThunk . What caused such an additional measure? Let's figure it out. First, we will look at the signature of such an action using the example of a program from the repository:


 
    const thunkAction = (delay: number): ThunkAction    => (dispatch) => {
console.log ('waiting for', delay);
setTimeout (() => {3r3323272. console.log ('reset');
dispatch (reset ());
}, delay);
};

 

As can be seen from the signature, our action does not immediately return the target function, but first intermediate, which is picked up by 3r-3263. redux-middleware to be able to produce side effects in our main function. But when using this function in the connected form in the component properties, the signature of this function is reduced, excluding the intermediate function. How to describe it in types? Need a special function converter. And again TypeScript shows its power. First we describe the type that removes the intermediate function from the signature:


 
    CutMiddleFunction    = T extends ( arg: infer Args) => ( args: any[]) => Infer R
? ( arg: Args) => R
: never
;

 

Here, in addition to the conditional types, a completely new innovation from TypeScript 3.0 is used, which allows you to display the type of an arbitrary (rest parameters) number of function arguments. See 3r33333 for details. documentation. . It now remains to cut out the extra part from our action in a rather rigid way:


 
    const unboxThunk =  ThunkAction   ,
) => (
ThunkFn as any as CutMiddleFunction
);

 

Having skipped the action through such a converter, we have the required signature at the output. Now the action is ready for use in the connector.


 

So, by simple manipulations, we reduce our manual work when writing typed code on our stack. If you go a little further, you can also simplify the typing of action games and reducers, as we did in 3r33255. redux-modus .


 

P.S. When using dynamic action binding in the connector through the function and 3r-3263. redux.bindActionCreators we will need to take care of the more correct typing of this utility (perhaps by writing your own wrapper).

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

29-11-2018, 02:31

Publication Date

ReactJS / TypeScript

Category
  • Comments: 0
  • Views: 392
.Net Binary serialization without
TypeScript: Deserializing JSON into
Approach to RBAC implementation in
Development of GLSL shaders on Kotlin
Native inversion of dependencies in
We implement promises on Java
Write a comment
Name:*
E-Mail:


Comments
The Daily Reports is the reliable and authentic news and blog publisher. Visit The Daily Reports for up-to-date US news, international news and policy analysis. Check out: International Politics News
Today, 17:28

saifwordpress

nice post, keep up with this interesting work. It really is good to know that this topic is being covered also on this web site so cheers for taking time to discuss this!  https://l23movies.club/
Today, 15:35

Legend SEO

Extremely helpful post. This is my first time i visit here. I discovered such a large number of intriguing stuff in your blog particularly its exchange. Truly its extraordinary article. Keep it up.먹튀검증사이트

Today, 14:34

raymond weber

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me.  pigmentvlekken verwijderen - dermasensation.nl
Today, 14:25

jacksonseo

Bangalore Escorts provides escort call girls by the escort agency in Bangalore. We have selected the best high profile call girls in Bangalore. Visit us www.piyagupta.com/
South Bangalore  Escorts || Marathahalli Escorts || Electronic City Escorts || Hebbal Escorts || Mg road Escorts || Ulsoor Escorts || Ub city Escorts || Nandi hills Escorts || Malleswaram Escorts || Commercial street  Escorts || Indira nagar Escorts || Hsr layout Escorts

Today, 12:24

piyagupta01

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password