frankwallis / plugin-typescript Goto Github PK
View Code? Open in Web Editor NEWTypeScript loader for SystemJS
License: MIT License
TypeScript loader for SystemJS
License: MIT License
The source-maps are not linking back to the original source
I am building with buildSFX
, setting module
as one of the options in config.js
.
"typescriptOptions": {
"module": "system" // setting any other option like 'commonjs', 'amd', or 'umd'.
}
Produced amount of code is huge and ends up with System.register
so it looks like a "system" option, could you please clarify? Thank you very much.
It could be worth not publishing to npm and just tagging this on GitHub if you prefer.
https://github.com/Microsoft/TypeScript/wiki/tsconfig.json
tsconfig.json is the official project type for TypeScript projects. In particular, it is where compiler options are stored. In many situations, there may be several tools that are running the TypeScript compiler and they should all use the same options for a given project. In order for this to not become a maintenance nightmare, each of the tools should leverage a shared configuration file, which is tsconfig.json.
I would like to see SystemJS's TypeScript transpiler support tsconfig.json so I don't have to store my compiler options in two places.
@frankwallis Traceur Babel and TypeScript all represent supersets of ES6, and as such it makes complete sense to treat TypeScript equally.
Please don't let TypeScript being merged as a transpiler stop development of this plugin though - it is not a portable way to distribute TypeScript by calling it format: 'es6'
in a package.json at all. Transpiler options are not portable as the assumption is made of one ES.
As such, even with TypeScript in core, using a TypeScript plugin will be a far better way to load and share TypeScript code through jspm and SystemJS. In addition proper handling of definitions etc should also be part of plugin code and not something in SystemJS or ES6 Module Loader.
Ultimately the mid-term plan is to turn all transpilers into plugins, and finally separate the "language" from the "module format". This will provide a few benefits including allowing ES6 script transpilation as well as providing a graceful transition into true ES6 environments when ES6 modules can be treated a true "compile-to" format.
That is, in future this plugin will be the only way to load TypeScript in jspm. I'm working on getting there as soon as possible, but lining things up is getting harder these days. Just let me know if you have any questions on this at all.
When I try to run the bundled angular2 example via:
gulp bundle (or jspm bundle ...)
gulp example
navigate to http://127.0.0.1:8080/index-bundle.html
I am getting the following exception:
BaseException {message: "Token must be defined!", stack: "Error: Token must be defined!↵ at new BaseExcep…ry (http://127.0.0.1:8080/build/build.js:4231:22)"}BrowserDomAdapter.logError @ browser_adapter.js:81(anonymous function) @ application_ref.js:166run @ core.js:70(anonymous function) @ ng_zone.js:174NgZone.run @ ng_zone.js:137PlatformRef_._initApp @ application_ref.js:147PlatformRef_.application @ application_ref.js:129commonBootstrap @ application_common.js:56bootstrap @ application.js:25(anonymous function) @ index.ts:16arguments.(anonymous function) @ functions.js:19(anonymous function) @ core.js:56run @ core.js:70zoneBoundFn @ core.js:50
ng_zone.js:255 ## _notifyOnError ##
ng_zone.js:256 TypeError: Cannot read property 'get' of undefined
at http://127.0.0.1:8080/build/build.js:25407:47
at Zone.run (http://127.0.0.1:8080/build/build.js:1851:19)
at Zone.run (http://127.0.0.1:8080/build/build.js:16212:34)
at NgZone.run (http://127.0.0.1:8080/build/build.js:16174:36)
at ApplicationRef_.bootstrap (http://127.0.0.1:8080/build/build.js:25402:18)
at Object.commonBootstrap (http://127.0.0.1:8080/build/build.js:25532:38)
at Object.bootstrap (http://127.0.0.1:8080/build/build.js:25569:33)
at http://127.0.0.1:8080/build/build.js:26893:29
at arguments.(anonymous function) (http://127.0.0.1:8080/build/build.js:1905:26)
at http://127.0.0.1:8080/build/build.js:1837:25
application_ref.js:243 Uncaught TypeError: Cannot read property 'get' of undefined
The dynamically loaded example (index.html) works fine. Any ideas?
I have a local project closely resembling the example code from this repo. But when I add an import statement, the builder errors with a EISDIR status. I know this means I'm pointing to a dir while I should point to anything but a dir. Any idea why this happens? If you need code, please ask and I will supply. Thanks!
My naming convention uses dots in filenames, e.g. layout.module.ts
or admin.controller.ts
. When attempting to import such files using ES6 imports, the browser ends up requesting layout.module
(without the .ts
extension), which obviously ends up with a 404.
This seems like a bug in plugin-typescript, as the correct URLs are requested if using regular .js
-files instead of typescript files.
You can verify this issue by renaming the example-controller.ts
and example-service.ts
to example.controller.ts
and example.service.ts
in your example.
When I don't add a typescriptOptions
to System.config
I get the following error.
System.typescriptOptions is undefined
Adding a empty object (see below) is enough, but couldn't this be made optionally?
System.config({
'typescriptOptions': {}
});
Hi
Mmmm, I don't know if this is an intended feature or I am doing a wrong workflow, but I came across a situation where the plugin fails to work when the tsd.d.ts is referenced from a Typescript file.
The point is it fails to load type definition files when they are referred from the single tsd.d.ts
and managed with tsd.
Trivial example with jquery working on the example
directory (after running jspm install jquery --save
, then tsd install jquery -s
):
typings/tsd.d.ts
/// <reference path="jquery/jquery.d.ts" />
typings/jquery/jqury.d.ts
// Type definitions for jQuery 1.10.x / 2.0.x
// rest of definition code
// ...
index.ts
...
/// <reference path="typings/tsd.d.ts" />
...
In this case, it tries to load jspm_packages/github/components/[email protected]/jquery.d.ts
, which resolves to 404 :-/
As I said, I don't know if this is an intended feature, but I came across the problem and I got a fix by overriding System.normalize
.
Let me/us know whether or not the current is the right functionality and I am messing around or, otherwise, if you want a PR or just the function code, which is pretty small.
Regards
I try to set target: "es3"
in the typescriptOptions, But when I do that, I got this error in the plugin.js
export function translate(load) {
logger.debug(`systemjs translating ${load.address}`);
transpiled to:
function translate(load) {
logger.debug(`systemjs translating ${ + load.address + );
In fact it doesn't matter if I get the target to "es5" or "es6". As long as I set it, it is not working. I don't know if this is the plugin issue or systemjs issue. I guess it is on systemjs, but not sure.
Also, would it be a good idea to write this plugin code in es3 so that systemjs + typescript can work in es3 environment? (or write it in TypeScript and transpile it to es3)
When I try to import a text file like this with the SystemJS text loading plugin, I get a compilation error about being unable to resolve an external module.
import html from './app.html!text';
I manually enabled debug logging in the TypeScript plugin and saw this in the console:
TypeScript Cannot find external module './app.html!text'. (TS2307)
It works fine when I don't try to import as a variable (i.e. import from './app.html!text
), but then I don't have access to the text.
I just starting with jspm as replacement for RequireJS. I have a simple question. Does this pluggin support:
/// <amd-dependency path="moduleName" />
Seems for me not, because when I trying this it is not loading related files. If it is not supported how can I overcome this? Thanks
Hi ...
It is possible to setup options for typescript using the optionTypescript
to element in the config block. Will this remain to to be the case, or will this be moved down to the package -> meta
section, or will we be able to do both ?
The new tsx
format, could be nice to only enable for a single package, as it change some of the language when put into use. It could therefor be nice to setup this option for only one single "view" package.
Is this possible at the moment or are the any plans in this regard ?
/BL
Great work on this plugin. I'd like to improve the readme regarding the default extension configuration, because it took me quite a while to figure out. But to suggest additional documentation I need some things cleared up.
Please correct me if I'm wrong but this is how I understand it. Users can set .ts
as the default extension and this plugin as the default loader in their package. This way they can use System.import('src/app')
instead of System.import('src/app.ts!')
and import Person from './person'
instead of import Person from './person.ts!'
.
This can be done by:
jspm init
the typescript transpiler is installed automatically.defaultJSExtensions
config.app
and use paths
to link that to src
, right?defaultExtension
and with meta
you specify that the ts
loader. plugin should be used for *.ts files.Example config. Parts like map
are automatically added by JSPM.
System.config({
'defaultJSExtensions': true,
'transpiler': 'typescript',
'packages': {
'src': {
'defaultExtension': 'ts',
'meta': {
'*.ts': {
'loader': 'ts'
}
}
}
},
'typescriptOptions': {}
'map': {
'ts': 'github:frankwallis/[email protected]',
'typescript': 'github:mhegazy/[email protected]',
}
});
So my question is basically:
Why are we adding this configuration in packages
? Is this to apply it to the current package and path only? What if you want to place your source files in the root folder? I probably can't use /
because then it would also apply to packages in jspm_modules
?
I guess this is mostly a SystemJS question, I'll try to suggest improvements to the packages part of SystemJS as well.
I'm combining this working ng-2 sample with the typescript plugin:
https://github.com/angular/ts-quickstart
(so this sample works when doing the typescript compilation manually)
I followed the instructions in the readme of plugin-typescript, but the compilation fails.
Any idea?
when using the plugin it is necessary to add an explicit mapping in config.js so that SystemJS can find the lib.d.ts file in the TypeScript npm package. This should be handled automatically by the plugin.
This is due to an issue in systemjs, but it will get resolved once the compiler supports the system module format and inline source maps.
Hi. When I import css in the following manner using the css plugin (https://github.com/systemjs/plugin-css)...
import './some/style.css!';
The css get's loaded and is reflected in the browser. The problem, however, is that the following error is outputted into the console...
TypeScript File '/src/some/style.css!github:systemjs/[email protected]' must have extension '.ts' or '.d.ts'. (TS6054)
http://127.0.0.1:8080/jspm_packages/github/frankwallis/[email protected] Failed to load resource: the server responded with a status of 404
Hello, I am getting the error as above when running the example task. I installed the npm/jspm etc as instructed. I did a global search and replaced the reference to 1.0.1 (the latest version) but still getting errors.
sorry, I am a newbie! Can you help?
Thanks in advance.
I checked out the repo, cd into examples/angular, npm install, install gulp and system-builder and then the gulp bundle
task complains about ts.js:
[Error: ENOENT: no such file or directory, open '/private/tmp/plugin-typescript/example/angular/ts.js']
[15:24:58] 'bundle' errored after 357 ms
[15:24:58] Error: ENOENT: no such file or directory, open '/private/tmp/plugin-typescript/example/angular/ts.js'
at Error (native)
Error loading file:///private/tmp/plugin-typescript/example/angular/ts.js
Full repro steps:
[bnolan@turtle tmp]$ git clone https://github.com/frankwallis/plugin-typescript.git
Cloning into 'plugin-typescript'...
remote: Counting objects: 1448, done.
remote: Compressing objects: 100% (26/26), done.
remote: Total 1448 (delta 8), reused 0 (delta 0), pack-reused 1422
Receiving objects: 100% (1448/1448), 242.20 KiB | 351.00 KiB/s, done.
Resolving deltas: 100% (910/910), done.
Checking connectivity... done.
[bnolan@turtle tmp]$ cd plugin-typescript/
[bnolan@turtle plugin-typescript]$ ls
LICENSE README.md example lib package.json test
[bnolan@turtle plugin-typescript]$ cd example/angular
[bnolan@turtle angular]$ ls
config.js index-bundle.html index.html src
gulpfile.js index-inject.html package.json tsconfig.json
[bnolan@turtle angular]$ npm install
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm WARN package.json @ No license field.
[bnolan@turtle angular]$ gulp
[15:24:21] Local gulp not found in /private/tmp/plugin-typescript/example/angular
[15:24:21] Try running: npm install gulp
[bnolan@turtle angular]$ npm install --save gulp
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm WARN package.json @ No license field.
[email protected] node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
[bnolan@turtle angular]$ gulp bundle
[15:24:43] Using gulpfile /private/tmp/plugin-typescript/example/angular/gulpfile.js
[15:24:43] Starting 'bundle'...
[15:24:43] 'bundle' errored after 239 μs
[15:24:43] Error: Cannot find module 'systemjs-builder'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Gulp.<anonymous> (/private/tmp/plugin-typescript/example/angular/gulpfile.js:19:16)
at module.exports (/private/tmp/plugin-typescript/example/angular/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/private/tmp/plugin-typescript/example/angular/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/private/tmp/plugin-typescript/example/angular/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/private/tmp/plugin-typescript/example/angular/node_modules/gulp/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
[bnolan@turtle angular]$ npm install --save systemjs-builder
npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm WARN package.json @ No license field.
[email protected] node_modules/systemjs-builder
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected])
[bnolan@turtle angular]$ gulp bundle
[15:24:58] Using gulpfile /private/tmp/plugin-typescript/example/angular/gulpfile.js
[15:24:58] Starting 'bundle'...
[Error: ENOENT: no such file or directory, open '/private/tmp/plugin-typescript/example/angular/ts.js']
[15:24:58] 'bundle' errored after 357 ms
[15:24:58] Error: ENOENT: no such file or directory, open '/private/tmp/plugin-typescript/example/angular/ts.js'
at Error (native)
Error loading file:///private/tmp/plugin-typescript/example/angular/ts.js
if you have 2 declaration files which reference each other, then it causes the build stream to stall due to a deadlock. This should ideally succeed, or at least throw a suitable error.
Hi,
I got this error when I use cmd jspm install on exemple folder :
Looking up github:angular/bower-angular
Updating registry cache...
ok Up to date - angular as github:angular/bower-angular@^1.3.15 (1.4.1)
ok Install tree has no forks.
err TypeError: Cannot call method 'forEach' of undefined
at C:\Users\test\AppData\Roaming\npm\node_modules\jspm\lib\core.js:212:11
at tryCatchReject (C:\Users\test\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src
.js:1183:30)
at runContinuation1 (C:\Users\test\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.s
rc.js:1142:4)
at Fulfilled.when (C:\Users\test\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.src
.js:930:4)
at ContinuationTask.run (C:\Users\felix\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-load
er.src.js:1040:24)
at Scheduler._drain (C:\Users\test\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.s
rc.js:97:19)
at Scheduler.drain (C:\Users\test\AppData\Roaming\npm\node_modules\jspm\node_modules\systemjs\node_modules\es6-module-loader\dist\es6-module-loader.sr
c.js:62:9)
at process._tickCallback (node.js:415:13)
warn Installation changes not saved
Anyone have an idea ?
I have the following repo which can outline the issue : https://github.com/kosz/karma-jspm-playground
to reproduce:
npm install && jspm install
jspm build-sfx src/app.ts! dist/build.js
npm start
to hack and fix:
(['src/app.ts!'], function(System) {
with
(['src/app.ts!github:frankwallis/[email protected]'], function(System) {
I tried to run the example and this is the output I get when I run jspm install:
err TypeError: Cannot read property 'forEach' of undefined
at /usr/local/lib/node_modules/jspm/lib/core.js:212:10
at tryCatchReject (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:1183:30)
at runContinuation1 (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:1142:4)
at Fulfilled.when (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:930:4)
at ContinuationTask.run (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:1040:24)
at Scheduler._drain (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:97:19)
at Scheduler.drain (/usr/local/lib/node_modules/jspm/node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.src.js:62:9)
at process._tickCallback (node.js:355:11)
Any ideas?
Thanks for making this plugin.
The bin folder is blocked in IIS out of box so when installing your typescript plugin I got 404s when it attempted to download the typescript.js file from the bin folder of the typescript package... I'm not sure who publishes that or if you can work around it but it is a blocker for using this on IIS. Whoever maintains the typescript package you use should add a web.config allowing browsing of the bin folder or rename the bin folder something else that isn't blocked (preferred).
web.config contents to fix it below:
<configuration>
<system.webServer>
<security>
<requestFiltering>
<hiddenSegments applyToWebDAV="false">
<remove segment="Bin" />
</hiddenSegments>
</requestFiltering>
</security>
</system.webServer>
</configuration>
Hi there,
I've just updated to typescript 1.6.2 from 1.5.something and am now getting errors which appear to be module related. I also uninstalled and reinstalled the typescript plugin (and am currently using 2.0.17).
err ReferenceError: file:///Users/andrew/projects/concertus/src/main.ts!transpiled:2
require('angular-material/angular-material.css!');
^
require is not defined
Evaluating file:///Users/andrew/projects/concertus/src/main.ts
My typescript options are:
typescriptOptions: {
"noImplicitAny": true,
"typeCheck": true,
"resolveAmbientRefs": true,
"module": "system",
"target": "ES5",
"declaration": true,
"noExternalResolve": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
Not sure if I'm missing something obvious. Any help would be greatly appreciated.
Thanks
I tried passing "jsx": "react"
under typescriptOptions
but it seems to have no effect.
Here is what my config.js
looks like:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "traceur",
typescriptOptions: {
"jsx": "react", <---- Doesn't seem to do anything
// Omitting other stuff
},
paths: {
"*": "src/*.tsx",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"app": "src"
},
"packages": {
"app": {
"main": "main",
"defaultExtension": "tsx",
"meta": {
"*.tsx": {
"loader": "tsx"
}
}
}
},
map: {
"react": "npm:[email protected]",
"traceur": "github:jmcriffey/[email protected]",
"traceur-runtime": "github:jmcriffey/[email protected]",
"tsx": "github:frankwallis/[email protected]",
Compiles fine as long as I don't use JSX syntax in the .tsx
file.
Is it possible to pass "jsx": "react"
to the compiler?
I'm trying to use path="mithril.js/mithril.d.js
in my typescript reference, but plugin-typescript
is not translating it. Instead I get the following error:
Not Found: http://127.0.0.1:8080/mithril.js/mithril.d.ts (WARNING: non-Error used)
Here's how to reproduce:
$ jspm init # `yes` to all defaults
$ jspm install ts
$ echo '/// <reference path="mithril.js/mithril.d.ts" />' > test.js
$ echo '<script src="jspm_packages/system.js"></script><script src="config.js"></script><script>System.import("test.ts!");</script>' > index.html
$ npm install -g live-server
$ live-server
I would like to utilize the tsd tool to maintain typescript definition files (and because this is the preferred way for vscode). but the paths that are referenced in the tsd.d.ts file are relative to the tsd.d.ts file and will resolve relative to the index.html file when loaded through your plugin.
e.g
index.html
config.js
typings/
/ tsd.d.ts (contains: )
/ angular2/
/ / angular2.d.ts
app/
/ app.ts (contains: )
this will work for vscode or the normal ts compiler but not through systemjs.
how could I solve this problem?
I had to install gulp, systemjs-builder. Then it says Broken @import declaration of src/index.css
jspm install fails saying the mgeazy typescript 1.5.2 is not a valid version.
TypeError: Invalid Version: v1.5-beta2
So I updated the systemjs-css plugin to latest and it's working.
However I copied the config.js to my own project and set it up and I'm getting errors.
c:\git\pos>gulp bundle
[13:19:53] Using gulpfile c:\git\pos\gulpfile.js
[13:19:53] Starting 'bundle'...
[Error: ENOENT, open 'c:\git\pos\jspm_packages\github\angular\bower-material@mas
ter\angular-material.css.js']
[13:19:54] 'bundle' errored after 951 ms
[13:19:54] Error: ENOENT, open 'c:\git\pos\jspm_packages\github\angular\bower-ma
terial@master\angular-material.css.js'
at Error (native)
Error loading file:///c:/git/pos/jspm_packages/github/angular/bower-mate
rial@master/angular-material.css.js from file:///c:/git/pos/src/app.ts
Error loading file:///c:/git/pos/jspm_packages/github/angular/bower-mate
rial@master/angular-material.css.js
Would you consider adding support to StealJS? StealJS is based on SystemJS. To support it, I think only a few minor additions to package.json would need to be added.
We've had a few people requesting typescript. It would be great if we didn't have to write our own. If there's interest, we can probably get a pull request your way shortly. Thanks!
http://localhost:8080/typescript/bin/lib.d.ts 404 (Not Found)
When trying to load the default library 'typescript' is not resolved to its correct location. It can be worked around by installing npm:typescript in the master project but that should not be necessary.
When I use this plugin, for some reason I'm getting GET file:///Users/guybedford/Projects/jspm-cli/sandbox/test.ts.js net::ERR_FILE_NOT_FOUND.
To fix this I had to add load.address = address.substr(0, address.length - 3);
into the locate function in plugin.js:83
as otherwise it will add the js extension. I know it's not ideal.
Do check you're running the latest jspm for this work.
I name my files mymodule.module.ts or myname.service.ts and this plugin has an issue comping them. It throws module not found errors.
I'm installing the plugin into a custom name - jspm install ts=github:frankwallis/plugin-typescript@master
.
As a result, something, somewhere is expecting to be able to load typescript
without having it declared as a dependency in its own execution context.
Generally all requires should be declared as dependencies so that naming is portable like this.
It seems like this is either in TypeScript itself on compile or the incremental-compiler.js
file as it gets to the translating
step before giving the 404 error in the logging.
Hey, first I can't say thank you enough for this plugin. I am new to typescript and jspm/system and this would have been a sad experience if it wasn't for your time! Thank you.
This is a question on typescript versions. I am building a new api and a lot of the code from TS 1.7 will help. The milestone on github is at 100% so it seems like it won't be to long until they release it so i wanted to build against it now.
Using ntypescript
the nightly builds i can do my dev just fine. Is it possible to make this plugin use that as well? Even if its a hack i do locally i don't care. Anything to get me by until they release 1.7.
Can you provide a simple usage example? When using this similarly to other SystemJS plugins, I only get an error.
As per microsoft/TypeScript#2233, all the pieces are in place to enable TypeScript as a compiler option in SystemJS in the same way as Babel/Traceur. They are:
I believe there is still going to be one issue regarding file-extensions, TypeScript files are currently being registered at runtime with their .ts extension, however this causes issues because if you try to import a file from another package, which is not the main entry point, then at runtime you don't know whether that file is registered with a .ts extension or a .js extension.
A possible solution to this would be for the file extension to be changed from .ts to .js after the source has been converted to javascript. This is how some other bundling tools work.
Where does that leave plugin-typescript? This depends on whether the integrated compiler performs type-checking or simply syntax checks the files and transpiles to javascript. If it is just doing doing simple transpilation then there may be a role for an additional plugin, or build tool which handles the type-checking and potentially the automatic generation of external declaration files.
I plan to start working on this very soon with a target date of 1-2 weeks.
Hi,
I tried your plugin and example, and it was good ;)
But when i added jQuery import into your example it behaves weird...
index.ts
/// <reference path="./_references.d.ts" />
import {module} from "angular";
import "./index.css";
import * as $ from 'jquery';
export var Module = module("example", [
]);
import {ExampleService} from './example-service';
import {ExampleController} from './example-controller';
Module.service("exampleService", ExampleService);
Module.controller("exampleController", ExampleController);
console.log($, $.fn);
$(() => { // this is the line of error from screen above (Error: TypeError: $ is not a function)
$('body').append('<div>Hello, World! </div>')
});
Why does it act like this? I've used jQuery imports always like this and it worked. Do you have any explanation for this case?
This is because plugin-typescript uses the 'Language Service API' and there is currently an issue in TypeScript services.
As a temporary workaround I need to use a private copy of typescriptServices.js compiled from master.
You should be able to specify compiler options via System.config({}), in the same way as Traceur/Babel.
I have installed this plugin and added it to my jspm app:
// TS
"packages": {
"app": {
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
},
typescriptOptions: {
"typeCheck": "strict"
},
When I run this file:
// app/main.ts
var strIdentity = function (x: string) {
return x;
};
window.alert(strIdentity([]));
Everything works, but I get this error in my console (as well as type checking errors):
Unhandled promise rejection ReferenceError: ts is not defined
the compiler errors should be hyperlinks which take you to the error in the original source
So this bug has been fixed: microsoft/TypeScript#4118
But this plugin uses 1.5.3 before it was fixed. How can I use typescript@next with the plugin?
When trying to use the latest jspm (master) + plugin-typescript (master) I get currently following error:
Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
__exec @ system.js:1164load.metadata.execute @ system.js:2227
linkDynamicModule @ system.js:1860
link @ system.js:1722
Promise.all.then.execute @ system.js:2052
doDynamicExecute @ system.js:681
link @ system.js:876
doLink @ system.js:548
updateLinkSetOnLoad @ system.js:596
(anonymous function) @ system.js:417
localhost/:1 Uncaught (in promise) Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
Evaluating http://localhost:8080/lib/app.ts
Error loading http://localhost:8080/lib/app.ts!http://localhost:8080/jspm_packages/github /frankwallis/[email protected]
The file which I've tried to load was (with Babel as transpiler):
// lib/app.ts
class Test {
constructor() {
console.log('Hello World!');
}
}
var t = new Test();
I'm not really sure what's happening there but I've the feeling that the TS sourcecode gets directly passed into the Babel transpiler instead of running through the TS transpiler beforehand.
Should typeChecker.check
fail the build (or prevent the JS application from loading in dev) if there are errors?
The JSPM 0.16 beta added support for transpiling with typescript. I somehow assumed that it would no longer be necessary to have to install plugin-typescript manually but that doesn't seem to be the case. It seems like I still need to install this plugin. Is this correct or am I missing something?
Hi,
When I make an import with a relative path (i.e. import myModule from './myModule'
) the type's errors are not shown anymore.
I've made a project that reproduce this problem here :
https://github.com/blemoine/typescript-plugin-problem
To reproduce, you have to :
npm install
node_modules/.bin/jspm install
./node_modules/.bin/jspm bundle-sfx src/app bundle.js
, which show correctly the type error./node_modules/.bin/jspm bundle-sfx src/app2 bundle.js
, which doesn't show the errorThe only difference between app.ts and app2.ts is that in the second file, there is an import.
In a browser, when not bundled, it's the exact same behaviour.
I have a very simple config.js and react component:
/// <reference path="./../typings/react/react.d.ts" />
import * as React from 'react';
class Hello extends React.Component<{}, {}> {
render() {
return <p>Hello</p>
}
}
React.render(<Hello />, document.body);
However, I'm getting this error in the console:
TypeScript "http://127.0.0.1:8080/src/main.tsx (4, 23):" logger.js!transpiled:16:13
TypeScript Cannot find module 'react'. (TS2307) logger.js!transpiled:16:13
Everything works fine (i.e. I see "Hello" in the browser), but I'm not sure why I get this error.
Is this "Working As Intended"?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.