Fix typescript type with ESM package

[yoyo930021]

I fix the typescript type when using the ESM project.

Change:

• Add the type file to the exports field in the package.json
• Add file extension in *.d.ts when relative import.
• Remove PropType in the Vue component prop with .d.ts.
  • When exist PropType, will get Type 'string' is not assignable to type 'BooleanConstructor | StringConstructor | undefined' error.
  • wrong
  • correct

Fixed #4055

Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.

The best way to propose a feature is to open an issue first and discuss your ideas there before implementing them.

Always follow the contribution guidelines when submitting a pull request.

[nolimits4web]

Add file extension in *.d.ts when relative import.

Why is this required? As far as i am aware it is not allowed to import from .js in .d.ts

[yoyo930021]

Add file extension in *.d.ts when relative import.

Why is this required? As far as i am aware it is not allowed to import from .js in .d.ts

From: https://www.typescriptlang.org/docs/handbook/esm-node.html#type-in-packagejson-and-new-extensions

This code works in CommonJS modules, but will fail in ES modules because relative import paths need to use extensions. As a result, it will have to be rewritten to use the extension of the output of foo.ts - so bar.ts will instead have to import from ./foo.js.

// ./bar.ts import { helper } from "./foo.js"; // works in ESM & CJS helper();

This might feel a bit cumbersome at first, but TypeScript tooling like auto-imports and path completion will typically just do this for you.

One other thing to mention is the fact that this applies to .d.ts files too. When TypeScript finds a .d.ts file in package, whether it is treated as an ESM or CommonJS file is based on the containing package.

[yoyo930021]

I also test tsc and it will generate .js in .d.ts.

yoyo930021@yoyoIUdeMacBook-Pro-2: cat package.json
{
  "name": "my-app",
  "private": true,
  "version": "1.0.0",
  "description": "My App",
  "repository": "",
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "start": "npm run dev",
    "dev": "cross-env NODE_ENV=development vite",
    "build": "cross-env NODE_ENV=production vite build"
  },
  "browserslist": [
    "IOS >= 13",
    "Safari >= 13",
    "last 5 Chrome versions",
    "last 5 Firefox versions",
    "Samsung >= 12"
  ],
  "dependencies": {
    "dom7": "^4.0.4",
    "framework7": "^7.0.5",
    "framework7-vue": "^7.0.5",
    "skeleton-elements": "^4.0.0",
    "swiper": "^8.2.6",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/compiler-sfc": "^3.2.37",
    "cross-env": "^7.0.3",
    "postcss-preset-env": "^7.7.2",
    "sass": "^1.53.0",
    "typescript": "^4.7.4",
    "vite": "^2.9.13"
  }
}
yoyo930021@yoyoIUdeMacBook-Pro-2:  cat tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node16",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["esnext", "dom", "WebWorker"],
    "skipLibCheck": true,
    "declaration": true,
    "outDir": "./dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      // "framework7/lite": ["node_modules/framework7/"],
      // "framework7-vue/bundle": ["node_modules/framework7-vue/"],
      // "framework7/components/login-screen": ["node_modules/framework7/components/login-screen/login-screen"]
    },
    "useDefineForClassFields": false
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}                                                                                                                                                                                                /0.0s
 yoyo930021@yoyoIUdeMacBook-Pro-2: cat src/lib.ts
export const a = 0                                                                                                                                                                               /0.0s
 yoyo930021@yoyoIUdeMacBook-Pro-2: cat src/test.ts
import { a } from './lib.js'

console.log(a)

export default a                                                                                                                                                                                 /0.0s
 ✘ yoyo930021@yoyoIUdeMacBook-Pro-2: yarn tsc -p tsconfig.json
yarn run v1.22.18
$ node_modules/.bin/tsc -p tsconfig.json
src/main.ts:25:17 - error TS2307: Cannot find module './app.vue' or its corresponding type declarations.

25 import App from './app.vue';
                   ~~~~~~~~~~~

src/routes.ts:1:22 - error TS2307: Cannot find module './views/home.vue' or its corresponding type declarations.

1 import HomePage from './views/home.vue';
                       ~~~~~~~~~~~~~~~~~~

src/routes.ts:2:26 - error TS2307: Cannot find module './views/404.vue' or its corresponding type declarations.

2 import NotFoundPage from './views/404.vue'
                           ~~~~~~~~~~~~~~~~~

src/routes.ts:3:23 - error TS2307: Cannot find module './views/LoginView.vue' or its corresponding type declarations.

3 import LoginView from './views/LoginView.vue'
                        ~~~~~~~~~~~~~~~~~~~~~~~

Found 4 errors in 2 files.

Errors  Files
     1  src/main.ts:25
     3  src/routes.ts:1
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.                                                                                                             /1.3s
 ✘ yoyo930021@yoyoIUdeMacBook-Pro-2: cat dist/test.d.ts
import { a } from './lib.js';
export default a;                                                                                                                                                                                /0.0s