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=/";
}

Got an Error "Parts might be undefined" on line 20, didn't quite know how to fix that properly so i added a // @ts-ignore.
Works fine now.

Hi @Piratenlulasch, mind sharing bit of the context of how you're using it? Might be worth adding a check for parts before getting its length property. Maybe something like:
if (!parts) return null or if (!parts) throw new Error('Null cookie')

Hey @joduplessis, I tried a few things along those lines and your suggestions don't work ether. I think the .pop can return undefined. Maybe that's the problem?
Anyway, this is my code right now:

export function getCookie(name: string) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");

    if (parts.length == 2) {
        // @ts-ignore
        return parts.pop().split(";").shift();
    }
}

There is nothing else in my file, except for your other two methods.

Edit: Fixed code formatting and added syntax highlighting

My version compatible with tslint: https://gist.github.com/floriancastelain/4a6063edd927c59351b43fa1b3f57b94

I tried https://gist.github.com/floriancastelain/4a6063edd927c59351b43fa1b3f57b94 version, but have the same error, that original gist has
[tsl] ERROR in c:common\cookieUtils.ts(20,16)
TS2532: Object is possibly 'undefined'.
Adding if (!parts) return null doesn't help.
Only // @ts-ignore before return parts.pop(). helps

thanks guy!!

The error Object is possibly 'undefined' appears to be from typescript thinking .pop() can return an undefined result (even though the length check should prevent that).

For me it goes away with:

if (parts.length === 2) {
	const ppop = parts.pop();
	if (ppop) {
		return ppop.split(";").shift();
	}
}

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