What do you think about gulp-typescript and the latest @types typings for TypeScript?

I've added @types/jasmine as a development dependency.

This is my gulp task for compiling TypeScript:

gulp.task('compile:tests', ['compile:typescript', 'clean:tests'], function () {
    var project = ts.createProject('tsconfig.json', { typescript: typescript });

    var tsResult = gulp.src(['spec/**/*spec.ts'])
        .pipe(ts(project));

    return tsResult.js
        .pipe(gulp.dest('spec/'));
});

here's my tsconfig.json file:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node"
    },
    "exclude": [
        "node_modules"
    ]
}

However, I'm encountering these errors:

spec\linter.spec.ts(7,1): error TS2304: Cannot find name 'describe'.
spec\linter.spec.ts(8,3): error TS2304: Cannot find name 'it'.
spec\linter.spec.ts(17,5): error TS2304: Cannot find name 'expect'.
spec\linter.spec.ts(20,3): error TS2304: Cannot find name 'it'.

Is there a way to make TypeScript (being used by gulp-typescript) recognize the typings from @types/...?

typescripttypescript-typingsgulp-typescripttypescript2.0

Answer №1

Revised: The most recent update has resolved the issue: Install by executing

npm install gulp-typescript@3

prior to gulp-typescript@3: To address the problem, I had been manually adding all @types typings, such as: 

gulp.src(['spec/**/*spec.ts', "./node_modules/@types/**/*.d.ts"])

If you encounter conflicting versions of typings (specifically @types/node@x), you can omit them to prevent duplicates: 

gulp.src([
  paths.source + '**/*.ts', 
  "node_modules/@types/**/index.d.ts", 
  "!node_modules/@types/**/node_modules/**/index.d.ts"])

Answer №2

Instead of utilizing 

gulp.src(['typings-glob', 'sources-glob'])
, you can opt for project.src().

Interestingly, in the project I am currently involved with, transpilation seems to take approximately 3 seconds longer when employing project.src(). Therefore, I have decided to continue using the gulp.src approach.

Answer №3

These steps worked for me.

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node"
    },
    "files": [
        "node_modules/@types/**/*.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Oops, that method didn't work either, combining "include" and "exclude" doesn't solve the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access to the server has been restricted due to CORS policy blocking: No 'Access-Control-Allow-Origin'

I’m currently encountering an issue with displaying API content in Angular and I’m at a loss on how to troubleshoot it and move forward. At this moment, my main objective is to simply view the URL data on my interface. Does anyone have any insights or ...

angulartypescriptexpress

The assignment of type 'string' to type 'UploadFileStatus | undefined' is not permissible

import React, { useState } from 'react'; import { Upload } from 'antd'; import ImgCrop from 'antd-img-crop'; interface uploadProps{ fileList:string; } const ImageUploader:React.FC <uploadProps> ...

javascripttypescript

What is the best way to trim a string property of an object within an array?

I am seeking a solution to access the "description" property of objects within an array and utilize a string cutting method, such as slice, in order to return an array of modified objects. I have attempted using for loops but have been unsuccessful. Here ...

javascriptarraystypescriptobjectslice

What is the method for comparing fields within an input type in type graphql with the assistance of class validator decorators?

I am working with the following example input type: @InputType() class ExampleInputType { @Field(() => Number) @IsInt() fromAge: number @Field(() => Number) @IsInt() toAge: number } Can I validate and compare the toAge and fromAge fields in th ...

typescriptgraphqltypeormclass-validatortypegraphql

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui

The Art of Dynamic Component Manipulation in Angular

The current official documentation only demonstrates how to dynamically alter components within an <ng-template> tag. https://angular.io/guide/dynamic-component-loader My goal is to have 3 components: header, section, and footer with the following s ...

htmlangulartypescript

How can you initialize Boostrap components or Materialize css in Angular 5 without using any external libraries?

I am a beginner exploring the world of Typescript and Angular. I am curious about how to initialize Bootstrap elements in an Angular-friendly manner without using the ngx-Bootstrap wrapper. For instance, if I wish to initiate a Bootstrap carousel. As per ...

angulartypescriptangular5angular-bootstrapangular2-materialize

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

javascriptangularinputtypescriptoutput

Blob is unable to open the PDF file as it is not

Currently, I am utilizing ASP.NET Core and Angular to create a web application. In one of the controller actions, I am returning a File like this: return Ok(Microsoft.AspNetCore.Mvc.File(await GetFileContents(args), "application/pdf")); Then in TypeScript ...

c#typescriptasp.net-corewebapi

Examining the function of a playwright script for testing the capability of downloading files using the window.open

Currently, we are working on a project that uses Vue3 for the frontend and we are writing tests for the application using Playwright. Within our components, there is a download icon that, when clicked, triggers a handler to retrieve a presigned URL from S3 ...

typescriptvuejs3playwrightwebapi

The issue with functions not executing when triggered by HammerJS

In my application, there is a component that displays information for different days as they are cycled through using the functions dayUp() and dayDown(). Here is an example of how these functions are structured: dayUp() { if (this.dayCount == 7) { ...

angulartypescripthammer.js

Creating interactive features for a TypeScript interface

I was looking to create a dynamic interface with custom properties, like so: data: dataInterface []; this.data = [ { label: { text: 'something', additionalInfo: 'something' } }, { bar: { text: ' ...

typescript

Ways to expand the width of mat-dialog-actions component in Angular 8

Is there a way to make the cancel and save buttons in the dialog window take up the entire available space? If anyone has any suggestions on how to achieve this, please let me know! https://i.sstatic.net/rfQrN.png ...

cssangulartypescriptangular-material

A circular reference occurs when a base class creates a new instance of a child class within its own definition

My goal is to instantiate a child class within a static method of the base class using the following code: class Baseclass { public static create(){ const newInstance = new Childclass(); return newInstance; } } class Childclass ex ...

typescript

Typescript overloaded function parameters explained

I am currently working on the following code snippet: import React from "react"; interface BaseFormValue { name: string; } export interface NewFormValue extends BaseFormValue { email: string; } export interface ExistingFormValue extends Ba ...

reactjstypescript

Yep, identifying InferType optional attributes

Here's an example of a Yup schema I created to fetch entities known as Parcels: export const FindParcelsParamsSchema = Yup.object({ cursor: Yup.number().optional(), pageSize: Yup.number().positive().integer().optional(), }); All fields are option ...

typescriptyup

Avoid using dot notation with objects and instead use `const` for declaring variables for more

interface obj { bar: string } function randomFunction() { let foo: obj = { bar: "" } foo.bar = "hip" } let snack: obj = { bar: "" } snack.bar = "hop" Upon transcompiling, a warning from tslint pops up: Identifier 'foo' is never reassi ...

typescripttslint

Error: The nested property of the dynamic type cannot be indexed

Within my coding project, I've devised an interface that includes various dynamic keys for API routes, along with the corresponding method and response structure. interface ApiRoutes { "auth/login": { POST: { response: { ...

typescripttypescript-generics

Identify when the Vue page changes and execute the appropriate function

Issue with Map Focus Within my application, there are two main tabs - Home and Map. The map functionality is implemented using OpenLayers. When navigating from the Home tab to the Map tab, a specific feature on the map should be focused on. However, if th ...

javascripttypescriptvue.jsionic-frameworkvuejs3

Best Practices for TypeScript and React: How to Handle Component State for Mounted Components

One technique to avoid calling .setState() on an unmounted component is by using a private property like _isMounted to keep track of it, as discussed in a blog post. I have implemented this method as follows: class Hello extends React.PureComponent{ _isM ...

reactjstypescript