Skip to content

Instantly share code, notes, and snippets.

@carlrip
carlrip / http.ts
Created January 27, 2019 10:35
async fetch
export const http = async (request: RequestInfo): Promise<any> => {
return new Promise(resolve => {
fetch(request)
.then(response => response.json())
.then(body => {
resolve(body);
});
});
};
@carlrip
carlrip / http.ts
Created January 27, 2019 10:54
async fetch with types
export const http = <T>(request: RequestInfo): Promise<T> => {
return new Promise((resolve) => {
fetch(request)
.then(response => response.json())
.then(body => {
resolve(body);
});
});
};
@carlrip
carlrip / http.ts
Created January 27, 2019 10:57
async fetch with types returning full response
interface IHttpResponse<T> extends Response {
parsedBody?: T;
}
export const http = <T>(request: RequestInfo): Promise<IHttpResponse<T>> => {
let response: IHttpResponse<T>;
return new Promise(resolve => {
fetch(request)
.then(res => {
response = res;
return res.json();
@carlrip
carlrip / http.ts
Created January 27, 2019 11:03
async fetch with types handling errors
export interface IHttpResponse<T> extends Response {
parsedBody?: T;
}
export const http = <T>(request: RequestInfo): Promise<IHttpResponse<T>> => {
return new Promise((resolve, reject) => {
let response: IHttpResponse<T>;
fetch(request)
.then(res => {
response = res;
@carlrip
carlrip / http.ts
Created January 27, 2019 11:05
POST using http
const response = await http<{ id: number }>(
new Request("https://jsonplaceholder.typicode.com/posts", {
method: "post",
body: JSON.stringify({ title: "my post", body: "some content" })
})
);
@carlrip
carlrip / http.ts
Last active August 18, 2019 19:42
Specific functions for different http methods
export const get = async <T>(
path: string,
args: RequestInit = { method: "get" }
): Promise<IHttpResponse<T>> => {
return await http<T>(new Request(path, args));
};
export const post = async <T>(
path: string,
body: any,
@carlrip
carlrip / Store.ts
Created February 3, 2019 10:17
React Redux State with TypeScript
interface IPeopleState {
readonly people: IPerson[];
readonly loading: boolean;
readonly posting: boolean;
}
export interface IAppState {
readonly peopleState: IPeopleState;
}
@carlrip
carlrip / Store.ts
Created February 3, 2019 10:32
React Redux Actions with TypeScript
export interface IGettingPeopleAction extends Action<'GettingPeople'> {}
export interface IGotPeopleAction extends Action<'GotPeople'> {
people: IPerson[];
}
export interface IPostingPersonAction extends Action<'PostingPerson'> {
type: 'PostingPerson';
}
@carlrip
carlrip / Store.ts
Last active February 5, 2019 05:13
React Redux Action Creators with TypeScript - example 1
export const getPeopleActionCreator: ActionCreator<
ThunkAction<
Promise<IGotPeopleAction>, // The type of the last action to be dispatched - will always be promise<T> for async actions
IPerson[], // The type for the data within the last action
null, // The type of the parameter for the nested function
IGotPeopleAction // The type of the last action to be dispatched
>
> = () => {
return async (dispatch: Dispatch) => {
const gettingPeopleAction: IGettingPeopleAction = {
@carlrip
carlrip / Store.ts
Last active February 5, 2019 05:13
React Redux Action Creators with TypeScript - example 2
export const postPersonActionCreator: ActionCreator<
ThunkAction<
Promise<IPostedPersonAction>, // The type of the last action to be dispatched - will always be promise<T> for async actions
IPostPersonResult, // The type for the data within the last action
IPostPerson, // The type of the parameter for the nested function
IPostedPersonAction // The type of the last action to be dispatched
>
> = (person: IPostPerson) => {
return async (dispatch: Dispatch) => {
const postingPersonAction: IPostingPersonAction = {