Forge ProjectPage template with Typescript

Forge Forge Platform and Tools
,
1

Hi together,

I create a new app with the ProjectPage template. Here I want use inside the src folder Typescript. But only to change the file extension to ts. Is here a way to use TypeScript with Forge?

Thank you

2

Hi @bongartz. Sure, there should be no problems with using Typescript. You can create a sample app and forge create should allow you to choose one of the example Typescript apps.

3

Hi @Dmitrii,

thank you for your answer, but I don’t get the option to create a project with typescript

Select a category: Custom UI
Select a template: jira-project-page

Which template I should use, or do you have a link to a example, so I can look inside the package.json?

Thank you

4

Hi @bongartz,

To enable typescript, all you should need to do is change your file extension from .js to .ts.

5

@LucyChen

Yes it builds if I change to .ts. But then I get a lot off new errors, if I run forge tunnel. My frontend App is writing with react and typescript. If I build my app all works fine, without forge.

Error: TypeScript errors in the app caused the bundling to fail. Fix the errors listed below before rerunning the command. 
[tsl] ERROR in /app/static/roadmap/src/App.tsx(1,8)
      TS1259: Module '"/app/static/roadmap/node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag
[tsl] ERROR in /app/static/roadmap/src/App.tsx(12,6)
      TS2304: Cannot find name 'ForgeUI'.
1 Like
6

@LucyChen

I had the same problem. my solution was to add a tsconfig file. Here I say for the resolver take only the stuff from the ./src folder. My react app use TS too, but it have its own build process.

{
  "include": ["./src"],
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "importHelpers": true,
    "removeComments": true
  }
}
7

Hi @LucyChen , would you recommend starting a forge app development from scratch in typescript directly? If this is the case, which version of the tools are needed to keep compatibility?

Kind regards :slight_smile:

8

@luis.plaza

I say yes. You will get a lot of problems, but this not related to Typescript more to Forge :wink:

Typescript help you a lot to avoid mistakes and bugs.

1 Like
9

Any updates on this? I am also facing the same issue with TypeScript

10

Hello! You can find a template using TypeScript over here:
https://bitbucket.org/itsuperhighway/forge-router-example/src/master/

You also need to perfrom the following command in the forge folder:
tsc -p tsconfig.hidden.json

it also can happen that in the custom-ui/global-page you would have to execute:
npm i -S prop-types