These days it is much easier as vscode has better support for this.
You can use this directory structure so all the code is independent:
├── frontend/
│ ├── src/
│ │ ├── <frontend code>
│ ├── package.json
│ ├── tsconfig.json
├── shared/
│ ├── package.json
├── backend/
│ ├── src/
│ │ ├── <backend code>
│ ├── package.json
│ ├── tsconfig.json
Then in both the backend and frontend tsconfig.json
:
{
"compilerOptions": {
"paths": {
"~shared/*": ["../shared/*"]
},
"rootDirs": [
"./src",
"../shared"
]
}
}
To allow access to the shared code e.g.:
import { Foo } from '~shared/foo';
Old Answer
Use a single tsconfig.json
for the root. And then extend it for each project (backend tsconfig.server.json
, frontend tsconfig.webpack.json
).
- Root
tsconfig.json
include: ['src']
to ensure all files get typechecked in the IDE
- Backend
tsconfig.server.json
exclude: ['src/app']
the frontend files
- Frontend :
tsconfig.webpack.json
exclude: ['src/server']
the backend files
Folder Structure
├── src/
│ ├── app/ < Frontend
│ ├── server/ < Backend
│ ├── common/ < Shared
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.webpack.json
Config Files
tsconfig.json
{
"compilerOptions": {
"noImplicitAny": true,
"strictNullChecks": true
},
"include": [
"src"
]
}
tsconfig.webpack.json
{
"extends": "./tsconfig.json",
"exclude": [
"src/app"
]
}
tsconfig.server.json
{
"extends": "./tsconfig.json",
"exclude": [
"src/server"
]
}
More
Example lesson
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…