Setting, deleting and retrieving cookies in Typescript.

cookie-typescript-utils.ts

/*
 * General utils for managing cookies in Typescript.
 */
export function setCookie(name: string, val: string) {
    const date = new Date();
    const value = val;

    // Set it expire in 7 days
    date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));

    // Set it
    document.cookie = name+"="+value+"; expires="+date.toUTCString()+"; path=/";
}

export function getCookie(name: string) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    
    if (parts.length == 2) {
        return parts.pop().split(";").shift();
    }
}

export function deleteCookie(name: string) {
    const date = new Date();

    // Set it expire in -1 days
    date.setTime(date.getTime() + (-1 * 24 * 60 * 60 * 1000));

    // Set it
    document.cookie = name+"=; expires="+date.toUTCString()+"; path=/";
}

You are missing the return type for getCookie.

Just commenting to say that with the latest typescript you could solve the pop undefined scenario like this

export function getCookie(name: string) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    
    if (parts.length == 2) {
        return parts.pop()?.split(";").shift();
    }
}

Alternatively if you'd like to consistently return a string you could do it like this

  return (
    (parts.length === 2 &&
      parts
        .pop()
        ?.split(";")
        .shift()) ||
    ""
  );

thank you krub

Thank you. This has helped me weening myself from jQuery Libraries...and morphing my js to ts.

For those seeing this thread in 2023, getting a cookie can be implemented as

const getCookie = (cookieName: string) => new RegExp(`${cookieName}=([^;]+);`).exec(document.cookie)?.[1];

which IMHO is more elegant than shifting values out of an array and splitting out all cookie entries first.

@mctrafik this is good but readability could be better.

Better to use parts.length === 2