# Typescript integration in our projects
---
## Summary
- global types
- redux integration
- react integration
- typing your api calls
---
## Global types
---
### Definition
```typescript=
declare global {
namespace Routing {
/**
*
* Hodor onClick with added information
*
*/
interface IMyCanalOnClick extends IOnClick {
context?: string;
trackingContext?: string;
}
}
```
---
### Use
```typescript=
const value: Routing.IMyCanalOnClick...
```
---
## Redux integration
---
### Action Types
```typescript=
export enum ErrorTypeKeys {
ERROR_TVOD_ADDRESS_VALIDATION='ERROR_TVOD_ADDRESS_VALIDATION'
}
```
---
### Action
```typescript
export interface IErrorTVoDAddressValidationPayload {
message: string;
code: number;
}
export interface IErrorTVoDAddressValidationAction {
type: ErrorTypeKeys.ERROR_TVOD_ADDRESS_VALIDATION;
payload: IErrorTVoDAddressValidationPayload;
}
export const errorTVoDAddressValidation =
(message: string, code: number): IErrorTVoDAddressValidationAction
=> ({
payload: {message, code},
type: ErrorTypeKeys.ERROR_TVOD_ADDRESS_VALIDATION,
});
```
---
### Action
```typescript
export type ErrorActionsTypes =
{OTHER_ACTIONS_INTERFACES} | IErrorTVoDAddressValidationAction
```
### Export all actions
```typescript
export type ActionTypes =
{OTHER_ACTIONS_TYPES} | ErrorActionsTypes
```
---
### Reducers
```typescript=
export const errorReducer = (state = {}, action: ActionTypes = {}) => {
switch (action.type) {
case TvGuideTypeKeys.ERROR_TVOD_ADDRESS_VALIDATION: {
return {
...state,
message: action.payload.message,
code: action.payload.code
};
}
default:
return state;
}
};
```
---
### Redux Thunk
---
### Type definition
```typescript=
export type ThunkResult<R> = ThunkAction<R, object, undefined, IAnyAction>;
```
---
### Implementation
```typescript=
export const apiCall = (contractId: string): Async.ThunkResult<Promise<ApiCallType>> =>
async (dispatch, getState) =>
```
---
## React
---
```typescript=
interface IComponentProps {
text: string;
show: boolean;
children: JSX.Element[] | JSX.Element
}
interface IComponentState {
value: number;
}
const component: FC<IComponentProps, IComponentState> = ({
text,
show = true,
}) => {JSX_RETURN}
```
---
{"metaMigratedAt":"2023-06-15T03:41:35.663Z","metaMigratedFrom":"YAML","title":"Talk slides template","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"1cb13298-4ea0-46e4-bc7f-c19260192f49\",\"add\":5483,\"del\":3005}]"}