TypeScript Example (CJS) #4942

Segmentational · 2022-06-28T18:49:23Z

The following PR relates to a simple TypeScript implementation using express@5.0.

Additionally, example (found in examples/typescript) includes a tsconfig.json that compiles down to ES5 JavaScript. A merge request I made previously had failed some tests relating to version limitations (node), so this should handle that case.

However, the compiled JavaScript and other generated assets are set to be tracked via VCS (git). It's of normal operation to usually untrack them via including *.js in the .gitignore.

We can later add a .gitignore in the example folder itself. But I do want to see what the GitHub actions returns with. If appropriate, I'll update/discuss changes to these tests to account for the typescript example.

Discussion

Looking at the other example folders, often they are without README.mds, package.jsons, etc. etc.

While totally fine, the example this PR relates to, as well as another I have outstanding, perhaps could be exceptions. I know the package maintainers and other contributors see, almost daily, issues & questions relating to ESM, TypeScript, and even both.

Providing examples, like this one, hopefully will make everyone's life a bit easier :D.

Segmentational · 2022-07-02T20:23:01Z

Nice, seems to have passed

bozzelliandrea · 2022-07-05T07:03:26Z

examples/typescript/index.ts

+const app: import("express").Application = module.exports = express();
+
+app.get('/', function(request, response) {
+    console.log(request.url);


Hi @Segmentational, can you use the types here? like Request and Response types, also the import import express from 'express'; instead of the require function.

Absolutely, I can clean this up!

bozzelliandrea · 2022-07-05T07:05:38Z

examples/typescript/index.ts

@@ -0,0 +1,13 @@
+const express = require("express");
+
+const app: import("express").Application = module.exports = express();


Why are you using this statement? you can easily set app value like this const app = express();

Speaking from memory, I believe it was due to the narrowing and the strictness of using the @types/express npm package. Overall, it's to my understanding there's a few issues with @types/expess.

Again speaking from memory, I thought I had read in the documentation that express is 100% http compliant (relating to the built-in node.js library); however, there's loss of the exposed HTTP.Server types. Example

import express from "express"; import type HTTP from "http"; import type { Express } from "express-serve-static-core"; const Application: Express & HTTP.Server = express();

Does not allow compilation.

Regardless, I certainly can simplify

bozzelliandrea · 2022-07-05T07:06:59Z

examples/typescript/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnC,MAAM,GAAG,GAAkC,MAAM,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC;AAEtE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,UAAS,OAAO,EAAE,QAAQ;IACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEzB,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAEjB,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAC","sourcesContent":["const express = require(\"express\");\n\nconst app: import(\"express\").Application = module.exports = express();\n\napp.get('/', function(request, response) {\n    console.log(request.url);\n\n    response.send(\"Hello World\");\n});\n\napp.listen(3000);\n\nconsole.log('Express started on port 3000');\n"]}


I believe this file should not be released, is the build result? same for the file tsconfig.build.info

100% - I'll clean up

bozzelliandrea · 2022-07-05T07:14:29Z

examples/typescript/index.js

+    console.log(request.url);
+    response.send("Hello World");
+});
+app.listen(3000);


Why is the index file cloned?

Segmentational · 2022-07-15T06:33:51Z

@bozzelliandrea, thank you for the feedback; I've since updated with your recommended changes, and point of replacing require with import.

Sorry my response took so long, I'll try and get back sooner next time around :D.

P.S. I updated the tsconfig.json and package.json to align much closer to what a standard, default configuration would look like. Notice, too, the latest package version reference(s).

Using latest is to avoid (haha hopefully) any technical debt down the road with issues coming through asking to update the typescript example.

- Updated `README.md` to better reflect context - Removed unnecessary instruction

bozzelliandrea

@Segmentational everything looks ok and clean, nice work! 😃

Just my curiosity, what does CJS mean?

Segmentational · 2022-07-25T07:54:56Z

@Segmentational everything looks ok and clean, nice work! 😃

Just my curiosity, what does CJS mean?

@bozzelliandrea, sorry for the delayed response... I just moved halfway across the united states, so that took a little time haha.

Yeah, "CJS" can be seen in a few odd places in the node official documentation. The first example, although referenced as a file extension, can be seen here:

https://nodejs.org/api/modules.html#enabling

I'm unsure of the exact other places, but essentially it's a shorthand sometimes used to describe the commonjs javascript module type.

TypeScript Example (CJS)

4649ba5

dougwilson added examples pr labels Jul 2, 2022

bozzelliandrea suggested changes Jul 5, 2022

View reviewed changes

Segmentational added 2 commits July 15, 2022 01:25

Example Simplification, File Clean-Up

bd67010

Removed CommonJS TS Reference, Replaces require with import

18fa4f8

Segmentational and others added 2 commits July 15, 2022 01:38

Documentation - Conciseness

5ee3511

- Updated `README.md` to better reflect context - Removed unnecessary instruction

Target ES5 Version, Bad Ignore Pattern

4ed8626

bozzelliandrea approved these changes Jul 15, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

TypeScript Example (CJS) #4942

TypeScript Example (CJS) #4942

Uh oh!

Segmentational commented Jun 28, 2022

Uh oh!

Segmentational commented Jul 2, 2022

Uh oh!

bozzelliandrea Jul 5, 2022

Uh oh!

Segmentational Jul 15, 2022

Uh oh!

bozzelliandrea Jul 5, 2022

Uh oh!

Segmentational Jul 15, 2022

Uh oh!

bozzelliandrea Jul 5, 2022

Uh oh!

Segmentational Jul 15, 2022

Uh oh!

bozzelliandrea Jul 5, 2022 •

edited

Loading

Uh oh!

Segmentational commented Jul 15, 2022

Uh oh!

bozzelliandrea left a comment •

edited

Loading

Uh oh!

Segmentational commented Jul 25, 2022

Uh oh!

Uh oh!

		@@ -0,0 +1,13 @@
		const express = require("express");

		const app: import("express").Application = module.exports = express();

		@@ -0,0 +1 @@
		{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";AAAA,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC;AAEnC,MAAM,GAAG,GAAkC,MAAM,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC;AAEtE,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,UAAS,OAAO,EAAE,QAAQ;IACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAEzB,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACjC,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAEjB,OAAO,CAAC,GAAG,CAAC,8BAA8B,CAAC,CAAC","sourcesContent":["const express = require(\"express\");\n\nconst app: import(\"express\").Application = module.exports = express();\n\napp.get('/', function(request, response) {\n console.log(request.url);\n\n response.send(\"Hello World\");\n});\n\napp.listen(3000);\n\nconsole.log('Express started on port 3000');\n"]}

Uh oh!

TypeScript Example (CJS) #4942

Are you sure you want to change the base?

TypeScript Example (CJS) #4942

Uh oh!

Conversation

Segmentational commented Jun 28, 2022

Discussion

Uh oh!

Segmentational commented Jul 2, 2022

Uh oh!

bozzelliandrea Jul 5, 2022

Choose a reason for hiding this comment

Uh oh!

Segmentational Jul 15, 2022

Choose a reason for hiding this comment

Uh oh!

bozzelliandrea Jul 5, 2022

Choose a reason for hiding this comment

Uh oh!

Segmentational Jul 15, 2022

Choose a reason for hiding this comment

Uh oh!

bozzelliandrea Jul 5, 2022

Choose a reason for hiding this comment

Uh oh!

Segmentational Jul 15, 2022

Choose a reason for hiding this comment

Uh oh!

bozzelliandrea Jul 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Segmentational commented Jul 15, 2022

Uh oh!

bozzelliandrea left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Segmentational commented Jul 25, 2022

Uh oh!

Uh oh!

bozzelliandrea Jul 5, 2022 •

edited

Loading

bozzelliandrea left a comment •

edited

Loading