I am trying to apply advanced styles to the UIStepper and SegmentedBar for the RadDataForm. I have been looking at the examples and I can run the examples locally. When trying to implement it in my own app, I get a few errors though.
ERROR in src/app/round/new/new.component.style.ts:53:44 - error TS2339: Property 'telerik' does not exist on type 'typeof com'.
53 editor.setCustomizeButtons(new com.telerik.android.common.Procedure({
~~~~~~~
src/app/round/new/new.component.style.ts:75:37 - error TS2304: Cannot find name 'TKGridLayoutAlignment'.
75 editorView.labelAlignment = TKGridLayoutAlignment.Left;
~~~~~~~~~~~~~~~~~~~~~
When looking around I found this other Stack Overflow issue on using the TKGridLayoutAlignment and the simply declare it a variable to get rid of the error. I can use the same approach to get rid of that error but I still have the Property 'telerik' does not exist on type 'typeof com' to solve.
I have tried looking at the tsconfigs and package.json's in the examples but I cannot figure out what I need to do.
What configuration/packages do I need to be able to implement the advanced styling?
It seems the reference.d.ts file was missing the dataform dependencies and only contained the android and ios references.
Currently the reference.d.ts should like like this for me:
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
/// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
/// <reference path="./node_modules/nativescript-ui-core/ios.d.ts" />
/// <reference path="./node_modules/nativescript-ui-core/android.d.ts" />
/// <reference path="./node_modules/nativescript-ui-autocomplete/ios.d.ts" />
/// <reference path="./node_modules/nativescript-ui-autocomplete/android.d.ts" />
/// <reference path="./node_modules/nativescript-ui-dataform/ios.d.ts" />
/// <reference path="./node_modules/nativescript-ui-dataform/android.d.ts" />
Related
After updating Catel from 5.12.4 to 5.12.15 every view with xaml parts like this:
<i:Interaction.Triggers>
<i:EventTrigger EventName="...">
<catel:EventToCommand Command="..." />
</i:EventTrigger>
</i:Interaction.Triggers>
causes runtime error:
An instance of type "EventToCommand" cannot be added to a collection of type "TriggerActionCollection". Only items of type 'T' are allowed.
This is caused by the change to move to the (actively maintained) Microsoft.Xaml.Behaviors package. Please use the correct package moving forward and all should be good.
I have been going through [Platypi.io/docs/getting-started/][1] but have gotten stuck at the section about adding functions to allow users to register for the demo app (https://platypi.io/docs/getting-started/allow-users-to-register)
The specific step is
Now, let's add our register function. This function will be fired whenever the plat-button is tapped or clicked. In the template, we defined our button's tap event by specifying a function in the plat-tap attribute. The function name is register, so when that button is clicked, the register function will be fired on our ViewControl. Add the register function to the view control (in public/viewcontrols/register/register.viewcontrol.ts:
register() {
this.context.error = '';
this.userRepository.register(this.context.email,
this.context.password,
this.context.firstname,
this.context.lastname)
.then((success) => {
this.navigator.navigate(HomeViewControl);
}).catch((error) => {
this.context.error = error;
});
}
Where do I add this function? If I put it in the RegisterViewControl (like [this][2]) class I get this error: error TS2094: The property 'navigator' does not exist on value of type 'RegisterViewControl'. this.navigator.navigate(HomeViewControl); Outside the class, the syntax doesn't work.
I know my way around Javascript, but am new to TypeScript. Any suggestions?
Your RegisterViewControl should be extending the BaseViewControl, and at some level it should be extending plat.ui.ViewControl. plat.ui.ViewControl has a property called navigator on it. From your error, it looks like there might be something wrong with how the RegisterViewControl is defined.
If the above solution doesn't work, could you provide the code for the entire RegisterViewControl file?
EDIT: It definitely looks like you have it correct. There is a possibility that something is wrong with the declaration .d.ts files. Try deleting the .tscache folder and then running npm install again. It might give you more useful errors.
We recently (as in yesterday) updated the framework and UI projects to deploy a different structure. It is possible that in your public/typings/tsd.d.ts you have the following references:
/// <reference path="../../node_modules/platypus/platypus.d.ts" />
/// <reference path="../../node_modules/platypusui/platypusui.d.ts" />
Double check the node_modules directories, it is possible you need to change the tsd.d.ts to the following:
/// <reference path="../../node_modules/platypus/dist/platypus.d.ts" />
/// <reference path="../../node_modules/platypusui/dist/platypusui.d.ts" />
If this is the case, you should also go into the public/common/css/main.less file and change this line:
#import "../../../node_modules/platypusui/platypus";
to this:
#import "../../../node_modules/platypusui/dist/platypus";
I've got a NodeJS app (built in Visual Studio) which uses TypeScript, and MongoDB.
I've written a small library which wraps the MongoDB driver in some TypeScript classes and just today it started acting up.
If I include this line at the top of one of my library files:
/// <reference path='./_scripts/typings/mongodb/mongodb.d.ts' />
it build briefly, before begining to complain about "Duplicate identifier"s, and lots of them, for example:
Error 6 Type name 'Transform' in extends clause does not reference constructor function for '"stream".Transform'.
Error 7 Type name 'events.EventEmitter' in extends clause does not reference constructor function for 'events.EventEmitter'.
Error 8 Duplicate identifier 'errno'.
Error 9 Duplicate identifier 'code'.
Error 10 Duplicate identifier 'path'.
So I take that out, and everything is briefly ok, until I start seeing issues reported around this line:
import mongodbNS = require('mongodb');
If I were to then remove that line, I would see errors with things like:
public Connect: () => Promise<mongodbNS.Db>;
I can muddle through by adding a removing things and taking advantage of the brief window of compilability which opens up - but clearly this is not the way.
What is?
and they all come from node.d.ts
This is happening because you have two versions of node.d.ts (i.e. different files on disk) in your project.
My team and I are new to TypeScript and NodeJS, and we're having some serious troubles getting this project off the ground. It's meant to be a modularized game asset pipeline written in TypeScript for use with NodeJS (I wasn't involved in the decision making here, and the discussion is still sort-of-ongoing, but we still need a prototype).
We have a good idea of the architecture already, but it's kinda difficult to even get the prototype running, because I just can't seem to manage to wrap my head around how modules work in combination with interfaces and external dependencies. Some of our components also need to use NodeJS or other library modules (e.g. NodeJS.fs for reading/writing files), and we'd prefer to be able to use ///reference to add the appropriate d.ts files to keep type safety at development time.
An example of the supposed project structure is:
/pipeline
/log
- ILog.d.ts
- StdOutLog.ts
- FileLog.ts
- ...
/reader
- IReader.d.ts
- TextReader.ts
- ...
/parser
- IParser.d.ts
- XmlParser.ts
- JsonParser.ts
- ...
/task
- ITask.d.ts
- JsTask.ts
- CliTask.ts
- ...
/...
The way we want to use it is that we provide default implementations for our interfaces (to cover the basics, e.g. running a console command, logging to a file or a stream, reading JSON and XML configs, ...), as well as the interfaces themselves so that other teams can create their own extensions (e.g. class GitTask extends CliTask to encapsulate repository operations, or class JpgReader implements IReader).
On the calling side, in a different project/runner app, it should work like this:
import pipeline = require('pipeline');
//...
var log = new pipeline.log.FileLog();
log.info("filelog started");
var parser = new pipeline.parser.XmlParser();
parser.parse(somexmldata);
log.info("parsing XML");
// ...
I'm very likely just doing it wrong (tm), but I feel that it's not easily possible to do with TypeScript what we want to do, especially considering that e.g. the definition for the log component can easily have several interfaces and also enums (factory, logger, logitem, logtarget, loglevel). As far as I understand, NodeJS modules need to be a single JS file, but using even a single import turns your module into an external module and those won't compile into a single file anymore, so that seems like a pretty steep roadblock to me.
Is there a way to realize that strucute and intended usage with TypeScript targeting NodeJS? If yes, what would the files need to look like (especially regarding the module hierarchy and component FQNs, e.g. pipeline.log.X, pipeline.task.Y, etc; how would I properly use module and export for it)? If no, what are suitable alternatives to achieve our goal?
[Update] I've refactored my prototype according to basarat's suggestion, and it already looks much better than before. However, I've encountered a compile error when using one class from another:
error TS2095: Could not find symbol 'LogItem'.
LogItem is a class defined in /log and it's used by StdOutLog.ts in the same folder. IntelliJ gives me multiple definitions for it (obviously, one the LogItem class itself, and the other in /log's index file where it's exported). I've tried using the module notation log.LogItem, but that didn't work. Adding all default implementation files to the global declarations file didn't work either. [/Update]
[Update2] Here's some more code around where the error happens. I don't get any errors/markings in IntelliJ, only when running the grunt-ts task.
// src/log/LogItem.ts:
///<reference path='../pipeline.d.ts'/>
class LogItem implements ILogItem {
// ...
constructor(level:LogLevel, message:string) {
// ...
}
public static create(level:LogLevel, message:string):ILogItem {
return new LogItem(level, message);
}
// ...
}
export = LogItem;
// src/log/Log.ts:
///<reference path='../pipeline.d.ts'/>
class Log implements ILog {
// ...
private getLogItem(level:LogLevel, message:string):ILogItem {
return LogItem.create(level, message); // <-- that's where I get the "symbol not found" error
}
// ...
}
export = Log;
// src/pipeline.d.ts:
///<reference path="../typings/node/node.d.ts" />
//grunt-start
/// <reference path="pipeline.ts" />
/// <reference path="log/Log.ts" />
/// <reference path="log/LogFactory.ts" />
/// <reference path="log/LogItem.ts" />
/// <reference path="log/StdLogEmitter.ts" />
/// <reference path="log/log.d.ts" />
/// <reference path="log/log.ts" />
/// <reference path="parser/JsonParser.ts" />
/// <reference path="parser/parser.d.ts" />
/// <reference path="parser/parser.ts" />
//grunt-end
[/Update2]
Reference all your .d.ts files in a global globals.d.ts file that has ///<reference tags to all your individual references + vendor.d.ts (e.g. node.d.ts) files.
/pipeline
/globals.d.ts
/log
- ILog.d.ts
- StdOutLog.ts
- FileLog.ts
- ...
/reader
- IReader.d.ts
- TextReader.ts
- ...
/parser
- IParser.d.ts
- XmlParser.ts
- JsonParser.ts
- ...
/task
- ITask.d.ts
- JsTask.ts
- CliTask.ts
- ...
/...
This keeps you from constantly referencing .d.ts files.
Now each typescript file will export some class e.g. XmlParser.ts:
/// <reference path='../globals.d.ts'/>
class XMLParser implements IParser{
}
export = XMLParser;
Each folder also has an index.ts that imports and the exports all the classes in that folder External module style:
export import XmlParser = require('./xmlParser');
// so on
Same for the one level up (pipeline/index.ts):
export import parser = require('./parser/index');
Now if you import pipeline/index.ts you code will work as expected :
import pipeline = require('./pipeline/index');
var parser = new pipeline.parser.XmlParser();
parser.parse(somexmldata);
log.info("parsing XML");
Note : Grunt-ts can create these import / export statements for you so that you do not need to worry about file paths : https://github.com/grunt-ts/grunt-ts/issues/85
I'm trying to use 3rd-Party-Libraries such as Knockout in my TypeScript-project.
As of organising my code, I am using AMD (requireJS to be specific) and to use the libraries in my project, I load d.ts-files from the great definitelytyped-project.
Now while I can use my own modules and libraries - which are all built with TypeScript - with ththis e simple 1 liner:
import PeopleViewModel = require("../ViewModels/PeopleViewModel");
I can't do that with the d.ts-files supplied by definitelytyped.
Now I know about the amd-dependency-command, but I don't understand how that is useful.
In my JS-code, I do get a reference to the path in the in the define-call, but not the variable in the created callback.
To "say" it in code:
My TS-File (removed the openening-tag from the ///-commands, otherwise it won't get shown here in stackoverflow):
/// reference path="../../../../Libs/Knockout/knockout.d.ts" />
/// amd-dependency path="../../../../Libs/Knockout/knockout-3.1.0" />
import PeopleViewModel = require("../ViewModels/PeopleViewModel");
var johnViewModel = new PeopleViewModel("john");
var exampleVar = ko.observable(johnViewModel);
That compiles to:
define(["require", "exports", "../ViewModels/PeopleViewModel", "../Libs/Knockout/knockout-3.1.0"], function(require, exports, PeopleViewModel) {
var johnViewModel = new PeopleViewModel("john");
var exampleVar = ko.observable(johnViewModel);
});
Now you can see, that the amd-dependency created the correct link to the knockout-js-file, but it does not yiel the "ko"-variable, which is declared in the d.ts-file.
How do I get this to work without touching the js-file?
Maybe there is an argument in the amd-dependency-command, but there is still no documentation about that.
Thank you all every much!
To use the definition files you just need references like this at the head of your files:
/// <reference path="jquery/jquery.d.ts" />
Or if using visual studio you don't even need them!
If using visual studio 2012 and nuget you may have fallen for the incorrect content type issue. Make sure that all typing files (*.d.TS) are set as TypeScriptCompile in the solution explorer.
No need for require syntax for typing files.