Understanding "public" / "private" in typescript class

The public, private, protected access modifiers, as you have discovered, don't actually affect the final outputted code. What they do affect is the type checking at compile time.

What do they actually do?

As their names suggest, the public and private modifiers limit what can access the class member. Their is also a third modifier in the clan, protected.

The private modifier only allows a class member (variable or method) to be accessed within that class.

The protected modifier allows everything the private modifier does, and also allows other classes that extend that class to use it.

Finally, the public modifier makes it so anything can access the class also has access to the public class property.

For a more in-depth explanation and examples, take a look at the official TypeScript Handbook's explanation.

If it all compiles the same, why should I use the modifiers?!

Using the modifiers will enable the compiler to make sure that your code isn't using things that it shouldn't be using. This is the same reasoning behind using types in the first place, it makes it harder to make mistakes that shouldn't be able to be made in the first place! As an added bonus, if your text editor has TypeScript support, it will also use the access modifiers when showing you autocomplete values for variables and methods.

java script code that is generated is same

They produce the same JavaScript but don't have the same semantics as far as the type is concerned.

The private member can only be accessed from inside the class whereas public can be excessed externally.

More

The differences are covered here : https://basarat.gitbooks.io/typescript/content/docs/classes.html#access-modifiers

Another example

let foo = 123;

will generate the same ES5 as

const foo = 123; 

However in the first case let foo = 123;foo = 456 will compile fine but const foo = 123; foo = 456 will result in a compile time error.