sharing types across client/server

[dcsan]

thanks for this boilerplate! Minimal but does the parts I needed.

I forked it and created a simple template based here, and started adding material-UI and a few things. https://github.com/dcsan/ts-mern

I hit this error:

export interface AppState {
  ...
  data: App.Item[]
}

'App' only refers to a type, but is being used as a namespace here. TS2702

I assume this is something to do with the shared types and the types/index.d.ts

declare module App {
  interface Item {
    name: string
    value: number
  }
}

I tried instead creating my own Interface for Item and just using Item as the export and used type:
https://github.com/dcsan/ts-mern/blob/master/types/AppTypes.ts

  data: Item[]

this works, but I'm not sure why your version didn't work...

[dcsan]

trying to document it a bit better...

shared-types

There are types in the top level of the app in types/index.ts

This is actually a package and there are links in the client to use it:

"@types/app-shared-types": "link:../types",

[dcsan]

OK i removed namespaces, as it's not a JS feature and seems to be not recommended in typescript now. and i see how you're doing that adding the types to devDeps, so no need for the import. It's a bit of magic behind the scenes i wasn't following so added a bit of documentation in the types file

[dcsan]

OK this often seems to break, and I can't figure out why. maybe the types file is typescript and doesn't get injected into visual code correctly.

in VSCode:

and yet at the command line:

neat as the 'magic types' is, it seems flaky so i'm gonna move to explicit imports.
that's also clearer how the type defs are getting added.

[dcsan]

weirdly after working in this way for a while this error starts to show up:

./src/components/ChatBox/ChatBox.tsx
Module not found: You attempted to import ../../../../types/sharedTypes which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

CRA restriction:

https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

[dcsan]

related

https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

[dcsan]

i had removed declare on the namespace the below works, except for some reason the Enum can't get shared...

declare enum UserType {
  bot = 1,
  user = 2
}

declare interface IChatRow {
  text: string
  who: UserType
}

declare interface IBotReply {
  rows: IChatRow[]
}

[dcsan]

facebook/create-react-app#5645

[dcsan]

sorry to keep harping on about this, it would be great to get it to work if you have more ideas.
i noticed this link: syntax is only supported for yarn and not npm...

➜  frontend git:(react-scope-problem) ✗ npm i
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:../types

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dc/.npm/_logs/2019-06-30T12_58_03_216Z-debug.log

[dcsan]

i finally got around it. I was on my way to creating a published package but this method works

with npm it will accept file instead of link, but you can also just give a path and it seems to work:

"@dcsan/typeroo": "../shared/typeroo",

but it looks like (at least on the mac) this uses a symlink, which is what i was trying to get around for those windows people. not sure if yarn install does something different on windows... can't try it here.

➜  frontend git:(shared-types) ✗ ls -la node_modules/@dcsan
total 0
drwxr-xr-x     3 dc  staff     96 Jun 30 14:32 .
drwxr-xr-x  1071 dc  staff  34272 Jun 30 14:32 ..
lrwxr-xr-x     1 dc  staff     23 Jun 30 14:32 typeroo -> ../../../shared/typeroo
➜  frontend git:(shared-types) ✗

[Fabianopb]

Hi @dcsan so did you get your issue solved? This repo is a simple starter kit and there's definitely a lot to improve and I've been doing it gradually, so thanks for your impressions!

[dcsan]

I did find a fix that works but it's kind of a pain. it involves building the types I need in a local npm package, and then reinstalling it each time things change. working with a link or file just isn't stable it seems and I don't quite recognize/understand when or why it breaks.

[Fabianopb]

I wonder why link or file aren't stable. I've worked for several months in a project that is in production and which uses symlinks and it has been working without problems...

But yeah, turning types into a npm package makes sense in my opinion, then you simply install the types in a similar way as when you install @types from Definitely Typed.

[dcsan]

not sure. i also wanted it to work for windows ppl so IDK how symlinks are handled there...

[dcsan]

I think the problem is that yarn uses link but npm just crashes.
when i changed to file: syntax it actually just copies the files, so no updates happened.

this is all a problem cos create-react-app prevents you using files outside of current src directory....

[Fabianopb]

In this project I mentioned, there were some developers using Windows, they were actually the ones who decided to use symlinks to I imagine that it works just fine in Windows.

And you're right, npm syntax is different, so it's either or. Have you considered making your types a package and using lerna to manage its usage within the repo?

[dcsan]

Lerna looks interesting but quite a heavyweight thing for just sharing a few definitions.
I have it working with yarn now. I found yarn has problems with some native modules though and no npm rebuild equivalent. so i just hope it will be ok.

[Fabianopb]

Sounds reasonable. May I close this issue as there's no action to be taken in this repo at the moment?