I have got the type definition file for a library - seneca. I don't know know how to import this module into typescript source.
I have used
/// <reference path="../custom_typings/seneca.d.ts" />
Please see the below seneca.d.ts file
I want to use the add(..) function in the seneca module.
Just add it to the module s e.g.
module s {
export var add:Function; // Sample
Related
While trying to render a custom HTML tag <my-element> in JSX an error displayed
Property does not exist on type 'JSX.IntrinsicElements'
I've found some examples of how to do that using
declare global {
interface IntrinsicElements {
"my-element": any
}
}
but this produced another error:
ES2015 module syntax is preferred over custom TypeScript modules and namespaces #typescript-eslint/no-namespace
I've found the useful link to Typescript guide which helped me a lot:
The main idea is to create a new file with extension d.ts (e.g. myModule.d.ts) which should contain the following
export as namespace JSX;
export interface IntrinsicElements {
"my-element": any;
}
I'm facing an issue when I try to bundle Aurelia-hammer with the CLI.
The app still keeps pulling hammer-swipe.js, hammer-tap.js,... from the node_modules folder.
When I inspect the plugin's AMD structure, these are defined as global resources:
function configure(frameworkConfig) {
frameworkConfig.globalResources('./hammer-swipe');
frameworkConfig.globalResources('./hammer-tap');
frameworkConfig.globalResources('./hammer-press');
frameworkConfig.globalResources('./hammer-hold');}
Is there any way to bundle these with the CLI? I tried adding these files to the "resources" element in aurelia.json without success.
the plugin author should export those classes: (HammerPressCustomAttribute...) so they could be traced properly. But you can dummy-import theme yourself as a workaround:
import { HammerPressCustomAttribute } from 'aurelia-hammer/hammer-press';
import { HammerSwipeCustomAttribute } from 'aurelia-hammer/hammer-swipe';
import { HammerTapeCustomAttribute } from 'aurelia-hammer/hammer-tap';
normally you have to do this as well:
import { HammerHoldCustomAttribute } from 'aurelia-hammer/hammer-hold';
but the class exported from hammer-hold.js is named HammerPressCustomAttribute (oops looks like copy-paste issue) so just reference the file even with a non existent class.
import { HammerHoldCustomAttribute } from 'aurelia-hammer/hammer-hold';
this should fix your problem (I hope). It's best to open an issue in the plugin repo and ask the author to export those classes (and rename the duplicate one).
I have sharepoint add-in project, I have inculuded necessary angular2 packages and ts files as you see ss of solution explorer in below:
and here is my ts file contents;
boot.ts
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent)
app.component.ts
import {Welcome} from './app.module';
import {Component} from 'angular2/core';
#Component({
selector: 'app-main',
template:'<h1>${Welcome.getMessage()}</h1>'
})
export class AppComponent {}
app.module.ts
export class Welcome {
static getMessage() {
return "Hello World!";
}
}
when I run this application I always get this error message in output window:
> #"Error 1
> CorrelationId: ae2bcaba-cdac-4178-bd39-2aca278a2e31
> ErrorDetail: There was a problem with activating the app web definition.
> ErrorType: App
> ErrorTypeName: App Related
> ExceptionMessage: Failed to instantiate file "app.module.ts" from module "RootModule": Source path
> "Features\SharePointAddIn4_Feature1\app.module.ts" not found.
> Source: AppWeb
> SourceName: App Web Deployment
I have search but cant find any solution helped me.. any idea how to fix this?
To resolve this, I had to set the tsconfig.json file (and others) to not deploy, and remove it from Elements.xml in the root of the project.
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="RootModule">
</Module>
</Elements>
Hey Buddy there are few points to be clear here before answer
you are using too old version of angular2 may be you are in angular2 beta
(as you are using 'angular2/core' now it is '#angular/*')
you are using wrong syntax according to me
{Welcome.getMessage()}
there are syntax like this
{{Welcome.getMessage()}}
also you are trying to access class Welcome without even initializing in the constructor of app.component.ts file, which is wrong .
I'm studing TypeScript and RequireJS.
I want to simple module require but module type information missing.
Is there smart solution in such situation?
requirejs(['backbone'], (Backbone) => {
// In this function.
// Backbone is 'any'
});
requirejs(['backbone'], (BackboneRef: Backbone) => {
// error : Type reference cannot refer to container
// 型参照でコンテナー 'Backbone' を参照できません。
});
To do so you need to do the following:
Download backbone.d.ts from https://github.com/borisyankov/DefinitelyTyped, the backbone.d.ts provides typescript strongly-typed interface, if you use IDE like Visual Studio, you can have all the intellisense support to Backbone
(Optional) Config backbone in RequireJS
In your TypeScript class, you can reference Backbone like the following
`
/// <amd-dependency path="backbone" />;
/// <reference path="path/to//backbone.d.ts" />;
export class YourModel extends Backbone.Model {
}
The amd-dependency tells the compiler how to reference backbone, so it would generate the correct define statement in JavaScript.
The reference provides a way to Backbone's definition for typed check.
Hope this helps! TypeScript eliminates the hell of writing long define or require js statement, which can be error-prone in situation where there are lots of dependencies.
I want to build root namespaces into assemblies that are external modules.
For example:
// File structure (every file is class or interface export)
Deferred/Deferred.ts
Deferred/Promise.ts
WebApp/ClassOne.ts
WebApp/ClassTwo.ts
I want assembly it to:
Deferred.js
WebApp.js
And both those files are AMD modules, so in Deferred.js (and WebApp.js) is something like:
define("Deferred", [], function() {
(function(Deferred){
// Here is a definition of a module with submodules
})(var Deferred || (Deferred = {}));
return Deferred;
});
How to do that?
Create a file structure like:
// File structure (every file is class or interface export)
Deferred/Deferred.ts
Deferred/Promise.ts
Deferred/index.ts
WebApp/ClassOne.ts
WebApp/ClassTwo.ts
WebApp/index.ts
Where each index.ts imports and re-exports all the stuff from that folder. e.g. Deferred/index.ts:
import deferred_file = require('./Deferred');
export var deferred = deferred_file;
import promise_file = require('./Promise');
export var promise = promise_file;
Then compile this index.ts with amd flag and minify using r.js : http://requirejs.org/docs/optimization.html
PS: there is work being done in grunt-ts to create these index.ts files for you : https://github.com/grunt-ts/grunt-ts/pull/69 which you can work on if you want.