How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.
Related
I'm setting up a new project with hardhat, using typescript and yarn.
I'm following https://hardhat.org/guides/typescript.html and when I get to the step "We need to apply three changes to your config for it to work with TypeScript:" there is an instruction to update the hardhat.config.js to hardhat.config.ts
The instructions and the example code say to put import { task } from "hardhat/config"; but vscode and the compiler say Cannot find module 'hardhat/config' or its corresponding type declarations.
What am I missing?
Maybe add this import to your hardhat config file?
import { HardhatUserConfig, task } from "hardhat/config";
And be careful to install all necessary types:
import "#nomiclabs/hardhat-etherscan";
import "#nomiclabs/hardhat-waffle";
import "#typechain/hardhat";
import "hardhat-gas-reporter";
import "solidity-coverage";
I had the same issue as well. I then tried using npm instead of the yarn package manager and the error got resolved.
I'd recommend uninstalling and reinstalling yarn and check if the error gets resolved, or use the npm package manager instead.
Use the below command:
npm install -D hardhat-deploy
Then, require("hardhat-deploy");.
I've started a simple playground project where I only have installed bootstrap (with npm install bootstrap), and the scss compiler package (with node install nose-sass).
I only need the reboot.scss code at the moment.
I would like to import it in my custom scss file and then start writing my bespoke scss code.
My scss file is in /src/scss/style.scss.
And I'm trying to import the bootstrap reboot file, which is /node_modules/bootstrap/scss/bootstrap-reboot.scss.
In my /src/scss/style.scss I wrote:
#import "../../node_modules/bootstrap/scss/bootstrap-reboot";
I need the reboot style from bootstrap. Is there a better way to do it?
Yep, you are correct.
Check this out: this is the documentation on how to do exactly what you mention.
https://getbootstrap.com/docs/4.0/getting-started/theming/#importing
I'm trying to use the 'gsap' node module, explicitly the tool 'Draggable' of that package together with Meteor (a plain Meteor React app).
The installation via meteor npm install gsap works as expected.
However if i want to use the module in my code as suggested in the docs, the client crashes with multiple consecutive errors; the first is:
Uncaught SyntaxError: Unexpected identifier modules.js:132661
The suggested way to import gsap tools is shown here. The error appears when i try to import a sub-module like so:
import Draggable from 'gsap/Draggable';
I don't quite understand the problem here. With other modules a simple npm install and import x from y just works. With gsap modules that does not seem to be the case.
I'd be grateful for any advice.
Update:
It seems the import of 'gsap' node module is now working!
Thanks for your answers!
I had some issues with Draggable import, as gsap wasn't defined inside of its constructor ("_toArray is not a function"). To make it work you have to register the plugin to gsap (added lines in main.jsx):
import { gsap } from "gsap";
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);.
The gsap package contains ES6 code. ES6 in the node_modules folder is not compiled by Meteor. Usually when publishing to npm, packages are transpiled into ES5. The editor of gsap should do it.
Two options for you to make this work inside Meteor:
• Option 1: clone the source from github directly somewhere in your Meteor app, like /imports/lib/gsap. Then import as following import Draggable from '/impots/lib/gsap/Draggable';
• Option 2: clone the source from github directly somewhere outside your Meteor app and use npm install /path/to/the/cloned/folder inside your meteor app (see here for reference). Option 2 seems less robust to me when working as a team in the same project or when you will need to deploy your app
Imagine a very simple program with a main file and some functions in a separate file, using ES6 modules and intended to be run with node.js.
my-utils.ts:
import * as fs from "fs";
export function readSimpleFile() {
return fs.fileReadSync("hello.txt", "utf-8");
}
main.ts:
import {readSimpleFile} from "./my-utils"
console.log(readSimpleFile());
What is the minimum set of files I need to add to the project and commands I have to run to get it building, running and checking types?
If you are to run a typescript project with node you need to have at least node, npm and typescript installed on your plateform.
Using an IDE to setup the project
Using intelliJ IDEA or Webstorm (they are the ones I know the best), the compilation of typescript into javascript is done automatically; you only need to do some settings.
Let us assume you have a file called project.ts containing your hello world code; IDEA or Webstorm will compile your code to project.js. Then you will only need to do node project.js to run your project.
Doing everything from scratch
First you need to know where exactly your npm packages are installed globally. This command can help you identify the path: npm config get prefix. In this folder, you should have a nodes_modules subfolder that contains the typescript module. If there is no typescript module, that is because you did not install typescript globally (npm install -g typescript).
Then you have to add the path of the bin of typescript subfolder in your environment variable.
Now you can compile the project with typescipt: tsc project.ts and you can run it node project.js.
Since you are using node function like fs you will need to install node typings npm install #types/node --save-dev before compiling with tsc.
Compilation option
To enable or disable all strict type checking options, you might need to use compilation option. You have to create the file in which you will specify the compilation option: tsc --init will create a tsconfig.json in which you can specify what behaviour you would like to have during the compilation of your app. All options are listed here.
I would like to use moment.js in my node application, so I installed moment.js using node's package manager npm:
npm install moment#2.4.0
Just to be on the safe side, I checked moment is not installed globally and the installed version is really version 2.4.0 (version 2.4.0 in order to use the correct d.ts file ...)
require("moment").version
Alright, seems to be good. I'm also using the latest version of TypeScript (0.9.5).
So, now I added the following file to my projects root directory https://github.com/borisyankov/DefinitelyTyped/blob/master/moment/moment.d.ts and refernced the file:
/// <reference path="moment.d.ts" />
Now, it should work to import moment using TypeScripts import keyword:
import m = require("moment");
Compiling with the following command
tsc app.ts --module commonjs
produces the following errors
/home/unknown/temp/test/app.ts(3,1): error TS2071: Unable to resolve
external module '"moment"'. /home/unknown/temp/test/app.ts(3,1): error
TS2072: Module cannot be aliased to a non-module type.
Why does this error occur? How do I fix it?
The important line in the d.ts file is this one...
declare var moment: MomentStatic;
It just declares a variable for moment.
You can add the following line to resolve your problem:
export = moment;
This should make it loadable using the import statement you have.
If you do this - you won't need yhe reference comment.