I want to do:
let server = {}
for(var i = 0; i < 20; i++) {
server[i] = 'none';
}
but I get this annoying error saying that my element implicitly has an 'any' type because type '{}' has no index signature. My code works but I get all these errors. Is there a way to disable them with gulp by passing a compiler flag or make the element explicit?
Just declare it as type any. There might be some compiler options you need to switch as well
let server: any = {}
for(var i = 0; i < 20; i++) {
server[i] = 'none';
}
The file is called tsconfig.json and it should be in your root directory.
Here is what mine looks like
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es2018",
"lib": ["esnext", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": false, //here
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
Related
I have a fresh Laravel 9 app with Vue 3 SPA built with TS (using Metronic 8.1 template) and I'm using webpack. Whenever I try to build the assets, it stays stuck at 12% and then does absolutely nothing.
Running Laravel using Sail on WSL2. After doing some research I found out that it could be a memory issue, so I tried to change this like so:
.wslconfig
[wsl2]
memory=10GB
localhostForwarding=true
And then running Restart-Service LxssManager as administrator.
However, nothing I've tried so far seems to work. I have another Laravel 9 app in a different container, which does not use any framework and uses vanillaJS and that compiles no problem. Any help here?
webpack.mix.js
const mix = require("laravel-mix");
const path = require("path");
mix.ts("resources/ts/app.ts", "public/js")
.vue({ version: 3 })
.webpackConfig({
module: {
rules: [
{
test: /.mjs$/i,
resolve: {
byDependency: { esm: { fullySpecified: false } },
},
},
],
},
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/ts/src/"),
},
},
});
.tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noImplicitAny": false,
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"#/*": [
"resources/ts/src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"resources/ts/src/**/*.ts",
"resources/ts/src/**/*.tsx",
"resources/ts/src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
I develop an application using Vue and Typescript 4.2.4. I can't use optional parameters in functions. Eslint doesn't complain. My code works fine on TS Playground as well. Here is a sample:
const f = (a: object, b?: object): void => {
console.log(a);
if (b) {
console.log(b);
}
}
f({ lorem: 'ipsum' });
f({ foo: 'bar' }, { optional: 'test' });
Every time I want to compile I get
TS2554: Expected 2 arguments, but got 1.
in first call.
Is there some config to enable or something else I should do? I have no experience with Typescript. I appreciate any help.
Laravel mix:
const mix = require('laravel-mix');
const config = require('./webpack.config');
mix
.webpackConfig(config)
.setResourceRoot(config.output.publicPath)
.disableNotifications()
.ts('resources/assets/js/app.ts', 'public/js').vue().extract()
.sass('resources/assets/sass/app.scss', 'public/css').sourceMaps()
.copyDirectory('node_modules/layout/images/', 'public/images')
.copyDirectory('node_modules/layout/icons/', 'public/icons')
.version();
Webpack config for mix
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: { esModule: true },
},
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'ts-loader',
options: { appendTsSuffixTo: [/\.vue$/] },
},
],
},
output: {
publicPath: `/${process.env.APP_ALIAS}/` || '/',
chunkFilename: 'chunks/[name].js?id=[chunkhash]',
},
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['**/*', '!.htaccess', '!index.php', '!robots.txt'],
}),
],
resolve: {
alias: {
'#': path.resolve('resources/assets/js'),
},
},
};
tsconfig
{
"compilerOptions": {
"target": "es2015",
"module": "esnext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"strict": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noImplicitAny": false,
"noImplicitReturns": false,
"noImplicitThis": false,
"noUnusedLocals": true,
"importHelpers": true,
"skipLibCheck": true,
"allowUnusedLabels": false,
"sourceMap": true,
"esModuleInterop": true,
"allowJs": true,
"baseUrl": ".",
"paths": {
"#/*": ["resources/assets/js/*"],
},
"lib": ["esnext", "dom"]
},
"include": [
"resources/assets/js/**/*"
],
"exclude": [
"node_modules",
]
}
EDIT:
Ok, I suppose Typescript in my Laravel project is not working properly. When I changed configuration to:
"noImplicitAny": true,
"noImplicitReturns": true,
my playground code causes another errors:
./resources/assets/js/app.ts 6:11-12
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(6,12)
TS7006: Parameter 'a' implicitly has an 'any' type.
ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts
./resources/assets/js/app.ts 6:14-15
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(6,15)
TS7006: Parameter 'b' implicitly has an 'any' type.
ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts
./resources/assets/js/app.ts 12:0-21
[tsl] ERROR in D:\Dev\Laravel\processes\resources\assets\js\app.ts(12,1)
TS2554: Expected 2 arguments, but got 1.
As you can see, function and parameters have their types defined.
What can be wrong there?
OK, thanks everyone, I have a solution. I figured out that webpack config for ts-loader and vue-loader causes some problems with Laravel Mix. I have just removed rules section from config and left Laravel Mix do the job. My playground code works fine now.
I'm using Visual studio 2017 (15.5.1) and trying to get tsLint to work correctly. For some reason, i'm getting linting errors (in the visual studio Error List (Build+intellisense)) from all of the files in node_modules and any of my declaration (*.d.ts) files as well. Nothing I do seems to fix the issue. I would like to exclude those files from my errors. Everywhere seems to think this is possible, but most examples i find aren't dealing with visual studio and i'm wondering if there is some other extra setting i'm missing. Below are my associated files.
tslint.json:
{
"extends": [
"tslint:latest",
"tslint-config-prettier"
]
}
tsconfig.json:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"noImplicitAny": false,
"allowUnusedLabels": true,
"target": "es5",
"sourceMap": true,
"strictNullChecks": false,
"removeComments": true,
"declaration": false,
"plugins": [ { "name": "tslint-language-service" } ],
"lib": [
"dom",
"es6",
"scripthost",
"es5",
"es2015",
"es2015.promise"
],
"types": [
"angular-ui-bootstrap",
"angular",
"autolinker",
"bootbox",
"bootstrap-notify",
"bootstrap",
"cldrjs",
"dragula",
"globalize",
"googlemaps",
"google.analytics",
"imagesloaded",
"jquery.blockui",
"jquery.bootstrap.wizard",
"jquery",
"jqueryui",
"jquery.validation",
"jsts",
"kendo-ui",
"masonry-layout",
"qtip2",
"signalr",
"urijs",
"moment"
]
},
"exclude": [
"node_modules",
"bower_components",
"build"
],
"typeRoots": [
"node_modules/#types",
"node_modules/moment"
],
"awesomeTypescriptLoaderOptions": {
"useBabel": true,
"useCache": true
},
"compileOnSave": true,
"buildOnSave": true
}
I use this configuration in launch.json file to debug my server file .js, but it doesn't work with typescript file:
{
"type": "node",
"request": "launch",
"name": "Avvia programma",
"program": "${workspaceRoot}\\bin\\www",
"env": {
"NODE_ENV": "developement",
"DEBUG": "node-rest:*"
},
"sourceMaps": true,
"outFiles": []
}
putting a breakpoint i receive this message: "Breakpoint ignored because generated code not found”
tsconfig.json:
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es5",
"dom"
]
}
}
I also have a tsconfig.aot.js file (if i'm not wrong, it need for build):
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es5",
"dom"
],
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
I tried several solution found here, but nothing worked.
Thanks for any tip.
Max
I'm coding a project in VS 2015 update 3 and just installed Typescript 2.0.
After a lot of errors I've been on a trail and error mission to get it working again. Now I don't have any errors anymore, but I'm not getting my output file.
My source files are all in the client folder, and that folder is in the root of the project.
This is my tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outDir": "./client",
"outFile": "./client/app.js",
"sourceRoot": "./client"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
The project did compile when it was on version 1.8.x.
This is an example of one of my .ts files:
namespace app {
'use strict';
angular
.module('app', [
'ngRoute',
'ngAnimate',
'officeuifabric.core',
'officeuifabric.components'
]);
}
Am I missing something?
---edit---
If I remove these lines:
"outDir": "./client",
"outFile": "./client/app.js",
"sourceRoot": "./client"
it builds without an issue. Are the parameters still supported?
--edit 2--
I've also been testing with an empty project an VS Code and the command line tsc.
My tsconfig that's working:
{
"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outFile": "app.js",
"sourceRoot": "./client"
},
"exclude": [
"node_modules"
]
}
However when I add Outdir, either nothing is compiled, or at the wrong location.
This does work:
"outFile": "./build/app.js",
I got this for a different reason. I had "extends": "#tsconfig/react-native/tsconfig.json", and the external tsconfig was setting "noEmit": true. An explicit "noEmit": false in my file fixed it.
This config is working for me:
{
"compileOnSave": false,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outFile": "./build/app.js"
},
"exclude": [
"node_modules",
"wwwroot"
]
}