1

I was learning Typescript with React and faced some confusion with why it is important to restrict devs to assign only a certain type or types to a certain variable. Moreover, as I can see, Typescript is about the use of validation on what exact types we can assign to a variable(I hope I am right:)). So, let me explain what I mean, say, we have the following code: 

interface Props {
    color?: ColorTypes | 'inherit';
    variant?: TypographyVariant; 
}

Also, TypographyVariant represents this code: export declare type TypographyVariant = 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'body3' | 'caption';

the question is what is the real benefit of, for example, ensuring that "variant" property only accepts 'h0' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'body3' | 'caption'. The same thing with "color" property. I just cannot explain to myself WHY should we care about validating and ensuring that only certain types can be assigned? and what if we do not assign type annotations to variables. Is it true that if we do not use Type annotations in Typescript then we can assign any value which will not then trigger any error and that error is only found during run-time making us lose time and possibility of not finding that missed error. Is that true?

Improve this question
2
  • Is your question what is the value of assigning types? To get compiler time checks instead of run-time errors. In your case, your code won't compile if you try to create something like const props: Props = {color: 'blah'}. Some believe that if you have enough unit tests, you don't need static types because you are making sure all your code paths are covered, but you would need to add type checking in your own code. I prefer to let the compiler do that kind of work. Suggestion, your question should have a single question mark to make it clearer. Commented Mar 18, 2020 at 12:46
  • 1
    @JuanMendes, hi Juan, is it true that thanks to type annotations of Typescript we make it clear that a program only works with only certain type or types of data. We just protect our code from wrong usage. Is that true? Commented Mar 18, 2020 at 13:54

1 Answer 1

Reset to default
3

There are a couple of reasons people use TypeScript (and typed languages in general):

  • To catch programming errors early. If the only valid values are 'a', 'b', and 'c', but someone assigns 'q' to the variable/property, that's a programming error. If a variable should contain a number but you assign a string to it, that's a programming error. You can get notified about those errors early, while working in your IDE or compiling with TypeScript, or you can find out about them later, when the program doesn't run correctly.

  • It enables coding tools (like IDEs) to provide appropriate suggestions when you're assigning to the variable/property. For instance, if you're assigning to a property that accepts only 'a', 'b', or 'c', your IDE can show you a list containing 'a', 'b', and 'c'. Even if it's not a limited list, if the IDE can show you that a number is expected rather than a string, that's useful information.

(That list is likely incomplete, but I think those are the two big ones.)

Whether the cost of assigning the types is worth those benefits is up to you and your team. Some people love it. Some people don't.

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I often find the secondary purpose to be the most useful out of all the benefits
@JuanMendes - Yeah, especially with complex systems. :-)
"that it enables coding tools (like IDEs) to provide appropriate suggestions" this can be generalised to ensuring the infrmation passed between programmers is useful. If you see, for example color: string then...that doesn't even give you a clue what can color be. Is it a name, like "green"? RGB like "rgb(0, 255, 0)"? A hex value, like "00FF00"? Or is it a hex value like "#00FF00"? Or maybe an HSL value "hsl(120, 100%, 50%)"? A type of "red" | "green" | "blue" makes it clear. Having correct types can be very informative and save time, not just prevent errors.
@Wertu - It really is very much a matter of opinion, and probably varies depending on the project. I've only started using TypeScript the last year or so (a bit late to the game!). I'm finding it really useful for the projects I'm currently working on (relatively small React apps with a small development team). I suspect it would be useful on larger projects as well, but can't say from experience. If I'm just doing a quick prototype of something, I'll probably just use JavaScript, but for real work, if I get to make the call, right now TypeScript would be my choice. That may change ofc. :-)
@Wertu yes, on both accounts. You can have type annotations to prevent errors, e.g., you can have id: Guid and that would prevent you from assigning non-GUID values to it. It will also serve to inform other developers that what to assign to id, instead of being confused if it's, for example, a number or string, and what format those would be in. So, it both informs people what data they should pass into your application and tries to prevent them from passing the wrong type of data, too. All that happens before the application is even running, which is a big benefit in preventing errors.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.