Type guards TypeScript how it works?

I find an example to explain Type guards in Typescript but I don't understand, why this code work:

function add(
   arg1:string|number,
   arg2:string|number
  ):any{
       if (typeof arg1==="string"){
           console.log("string")
           return arg1+arg2;  
        }
        if (typeof arg1==="number" && typeof arg2==="number"){
            console.log("number")
            return arg1+arg2;  
        }
        return arg1.toString()+arg2.toString()
}
console.log (add(1,2));

and why doesn't work, if you change the second if like this:

if (typeof arg1==="number" ){...

without the condition in and doesn't work even if this function work:

function add2():any{
    return (2+"3")
}
 console.log(add2())

So why I have to put the condition in and ? otherwise give an error?