Typescript type declarations not working as expected

Question

Working on a gatsby side project where I'm also using Typescript. I never used Typescript before so I'm expecting some sort of PHP type declaration behavior, but not sure, if that's how it works. I've done quite a lot of work and happily carried on (thinking how good I'm with Typescript), when just realized that some of my imported interfaces were undefined and never got any error because of it. So I tried to break my code by using wrong types but Typescript seems to be ignoring all the declarations. Here is an example: I got this interface (draggable.ts):

export interface Draggable {
   x: number,
   y: number
}

Exported by this guy (index.ts)

import Draggable from './draggable';
import Resizable from './resizable';
import Stageable from './stageable';
import Page from './page';
import ToolState from './states/tool-state';
import CommonAction from './states/action';
import ToolItem from './tool';

export default {
   Draggable,
   Resizable,
   Stageable,
   ToolState,
   Page,
   CommonAction,
   ToolItem
}

Which is then imported as follows in the component

import Interfaces from '../interfaces';

And used in the following method's type hinting:

 reposition: (event: MouseEvent, diffPos: Interfaces.Draggable) => {
     const position = {
         x: event.screenX - diffPos.x,
         y: event.screenY - diffPos.y
     }

    dispatch({ type: 'UPDATE_BAR_POSITION', payload: { position }})
}

Now if I try to call that method with wrong argument type, the code will run with no problem:

<div 
  className="bg-gray-600 toolbar" 
  style={{top: barPosition.y + 'px', left: barPosition.x + 'px', width: barWidth}}
  onDragStart={dragStart}
  onDrag={e => reposition(e, 'blaa')}
  onDragEnd={e => reposition(e, diffPos)}
  draggable={true}
>

Even if I try something like

onDrag={e => reposition(e, {x: 'blaa', y: 'blablaaa'})}

doesn't make any difference. Probably I'm having some misunderstanding how Typescript works. Thanks.

Answer 1

Typescript does not throw any errors during your javascript runtime. But it should show you errors inside your working environment(IDE), if typescript server is properly working.

I think you should at least read this document provided by Typescript before you start Typescript coding, it explains it's primary rules including below..

Roughly speaking, once TypeScript’s compiler is done with checking your code, it erases the types to produce the resulting “compiled” code. This means that once your code is compiled, the resulting plain JS code has no type information. This also means that TypeScript never changes the behavior of your program based on the types it inferred. The bottom line is that while you might see type errors during compilation, the type system itself has no bearing on how your program works when it runs.

Take a look at the example here, even in the typescript playground you can see that even if it shows errors inside typescript code, it still can be run and get no errors during runtime.

Typescript code should be compiled/transpiled into javascript code for running, and depending on the compile/transpiling environment it may ignore some typescript errors. Which explains why your code was still running without errors.

Exactly. Also at the beginning when I was writing some simple Typescript learning code examples, I was getting type errors in the browser's console as well, now that's not happening. The function just runs with the wrong type

also, it looks like the "Type Error" you mentioned is TypeError, which is Javascript object and this is not thrown by Typescript.

I think you'll have to check your coding environment(IDE maybe?), which should be showing typescript errors found by running typescript server.