I just found the answer to this in another Stack Overflow question's answer.
declare global {
interface Window { MyNamespace: any; }
}
window.MyNamespace = window.MyNamespace || {};
Basically, you need to extend the existing window
interface to tell it about your new property.
TypeScript uses getter/setter syntax that is like ECMAScript4/ActionScript3.
class foo {
private _bar: boolean = false;
get bar(): boolean {
return this._bar;
}
set bar(value: boolean) {
this._bar = value;
}
}
That will produce this JavaScript, using the ECMAScript 5 Object.defineProperty()
feature.
var foo = (function () {
function foo() {
this._bar = false;
}
Object.defineProperty(foo.prototype, "bar", {
get: function () {
return this._bar;
},
set: function (value) {
this._bar = value;
},
enumerable: true,
configurable: true
});
return foo;
})();
So to use it,
var myFoo = new foo();
if(myFoo.bar) { // calls the getter
myFoo.bar = false; // calls the setter and passes false
}
However, in order to use it at all, you must make sure the TypeScript compiler targets ECMAScript5. If you are running the command line compiler, use --target
flag like this;
tsc --target ES5
If you are using Visual Studio, you must edit your project file to add the flag to the configuration for the TypeScriptCompile build tool. You can see that here:
As @DanFromGermany suggests below, if your are simply reading and writing a local property like foo.bar = true
, then having a setter and getter pair is overkill. You can always add them later if you need to do something, like logging, whenever the property is read or written.
Getters can be used to implement readonly properties. Here is an example that also shows how getters interact with readonly and optional types.
//
// type with optional readonly property.
// baz?:string is the same as baz:string|undefined
//
type Foo = {
readonly bar: string;
readonly baz?: string;
}
const foo:Foo = {bar: "bar"}
console.log(foo.bar) // prints 'bar'
console.log(foo.baz) // prints undefined
//
// interface with optional readonly property
//
interface iFoo {
readonly bar: string;
readonly baz?: string;
}
const ifoo:iFoo = {bar: "bar"}
console.log(ifoo.bar) // prints 'bar'
console.log(ifoo.baz) // prints undefined
//
// class implements bar as a getter,
// but leaves off baz.
//
class iBarClass implements iFoo {
get bar() { return "bar" }
}
const iBarInstance = new iBarClass()
console.log(iBarInstance.bar) // prints 'bar'
// accessing bas gives warning that bas does not exist
// on iBarClass but returns undefined
console.log(iBarInstance.bas) // prints 'undefined'
// note that you could define baz as a getter
// and just return undefined to remove the warning.
//
// class implements optional readonly property as a getter
//
class iBazClass extends iBarClass {
private readonly _baz?: string
constructor(baz?:string) {
super()
this._baz = baz
}
get baz() { return this._baz; }
}
const iBazInstance = new iBazClass("baz")
console.log(iBazInstance.bar) // prints bar
console.log(iBazInstance.baz) // prints baz
Best Answer
As of TypeScript 2.0, typings is no longer required. The npm organization is an entity to setup a developers team. I believe Microsoft setup the @types organization in npm and added the TypeScript developer team to the organization. Packages on under the @types organization are published automatically from DefinitelyTyped using the types-publisher tool as per the docs.
In addition, to there is another way to add
types
to your packages:In your package.json
If your package has a main
.js
file, you will need to indicate the main declaration file in yourpackage.json
file as well. Set thetypes
property to point to your bundled declaration file. For example:Note that the
"typings"
field is synonymous with"types"
, and could be used as well.Also note that if your main declaration file is named
index.d.ts
and lives at the root of the package (next toindex.js
) you do not need to mark the"types"
property, though it is advisable to do so.Regarding searching types
From - http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
But when I did
npm search @types/openlayers
, I did not get any results. But doing the search from the web interface did return me the results. So I guessnpm search
does not search across organizations.