Develop Reference

TypeScript not generating declaration files

For whatever reason, I am not getting any .d.ts files. How can I produce definition files correctly?
compile command
npx tsc
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"rootDirs": [
"src",
"stories",
"config"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"jsx": "react-jsx",
// Ensure that .d.ts files are created by tsc, but not .js files
"declaration": true,
"emitDeclarationOnly": true,
// Ensure that Babel can safely transpile files in the TypeScript project
"isolatedModules": true,
"outDir": "./dist"
},
"include": ["./src/**/*.tsx"],
"exclude": [
"node_modules",
"dist",
"docs"
]
}
src
src/components
src/components/FormGenerator
src/components/Input
src/components/Link
src/components/List
src/components/MoneyFormat
src/components/Select
src/components/Svg
src/components/TemplateComponent
src/components/TemplateComponent/index.tsx
src/components/TemplateComponent/TemplateComponent.stories.js
src/components/TemplateComponent/TemplateComponent.test.tsx
src/components/TemplateComponent/TemplateComponent.tsx
src/components/Text
src/components/Text/index.tsx
src/components/Text/Text.stories.js
src/components/Text/Text.tsx
src/components/index.tsx
src/themes
src/themes/default
src/themes/default/fonts
src/themes/default/palette
src/themes/default/typography
src/themes/default/themeDefault.ts
src/themes/default/variables.ts
src/themes/fonts.d.ts
src/react-app-env.d.ts
src/setupTests.js

Angular Upgrade from 8 to 9 - Ivy Compilation Errors in Templates

I successfully upgrade my angular app from version 8 to version 9 according to Angular Update Guide, and i solved all the issues that occurred in ts files.
In version 8 i was not using Ivy, i was using View Engine as it is the default.
After the upgrade to 9 my angular application is working only with the Ivy disabled ("enableIvy": false in tsconfig.json). With Ivy enabled am getting a lot of errors in templates, some of those errors are:
Can't bind to 'my-property' since it isn't a known property of 'my-component'
No directive found with exportAs 'ngForm'
Can't bind to 'ngClass' since it isn't a known property of 'div'
Can't bind to 'routerLink' since it isn't a known property of 'a'
templateUrl: "./my-component.component.html", Error occurs in the template of component
I am not getting those errors using View Engine and the app works fine.
It seems to be a configuration or Modules Import issue?
Am lazy loading modules like:
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
In package.json am using
"postinstall": "ngcc"
And in tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": ["node_modules/#types"],
"types": ["jest"],
"lib": ["es2015", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableIvy": true
},
}
Any Ideas? :)

In the tsconfig.json, I changed the "target" value from "ES5" to "ES2015", the same value of "module" and it work out for me.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES2015",
"typeRoots": ["node_modules/#types"],
"lib": ["es2018", "dom"]
}
}

Try to change EcmaScript target: "es5". nice explain next link
I use angular 9 i have tsconfig.json this way.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
}
}

Can´t get typedefs for "classnames"

I want to use the javascript package called "classnames", but no matter what I do, I cant install the typedefs for it.
I already tried "npm i --save-dev #types/classnames", but there is still this error.
Thanks!
My tsconfig:
{
"compilerOptions": {
"target": "ESNEXT",
"module": "esnext",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"allowSyntheticDefaultImports": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

Why a TypeScript project generated with Create React App can find modules and an Express one doesn't?

I use WebStorm, I created a React project and an Express project with a build-in wizard. I manually added TypeScript to the latter.
Here's my tsconfig.json for React:
{
"compilerOptions": {
"target": "es2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
And here's one for express:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "output",
"esModuleInterop": true,
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"strict": true,
"isolatedModules": true,
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJS" : true
},
"exclude": [
"node_modules"
],
"include": [
"source/**/*"
]
}
For the express project I needed to set "type": "module" in package.json.
The problem: when I use import in the React project I don't need to add the extension .js to file names, but in the Express project it's necessary, otherwise I'm getting ERR_MODULE_NOT_FOUND.
import {serviceRouter} from "./ServiceRouter";
vs
import {serviceRouter} from "./ServiceRouter.js";

When using ES6 modules ("type": "module"), extensions are mandatory, see https://nodejs.org/api/esm.html#esm_mandatory_file_extensions

"export 'default' (imported as 'core_1') was not found in '#angular/core'

I'm building an Angular library with ng-packagr.
When serving my app with the packed library used, I get this warning:
. Furthermore, when serving the app, I get this errormessage:
core_1 is imported alongside other modules in the top:
import core_1, { Component, Inject, Injectable, InjectionToken, NgModule } from '#angular/core';
UPDATE!!
The configuration is as follows:
ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"src": "lib",
"dest": "dist/auth",
"workingDirectory": ".ng_build",
"lib": {
"entryFile": "public_api.ts",
"externals": {
"oidc-client": "./node_modules/oidc-client/dist/oidc-client.min.js",
"rxjs/add/operator/let": "Rx.Observable.prototype"
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": [
"es6",
"dom"
],
"moduleResolution": "node",
"declaration": true,
"experimentalDecorators": true,
"baseUrl": ".",
"stripInternal": true,
"outDir": "./dist",
"sourceMap": true,
"inlineSources": true,
"skipLibCheck": true
},
"exclude": [
"node_modules",
"dist",
"demo",
"config",
"coverage",
"src/**/*.spec.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"trace": true
}
}

EUREKA
Fixed by playing with the tsconfig in both the library, and the angular project :
tsconfig.lib.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
// 👍 these two lines
"target": "es2015",
"module": "esnext",
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
and in the target project :
tsconfig.json
{
"compilerOptions": {
"module": "esnext"
}
}
tsconfig.app.json
{
"compilerOptions": {
"module": "esnext"
}
}