Running TypeScript project in the browser - javascript

I found out about TypeScript, and installed the Visual Studio 2012 Plugin, downloaded the source code and ran the first sample after referencing the .ts file in my HTML document:
function Greeter(person) {
return "Hello, " + person + ".";
}
var user = "James Kent";
document.body.innerHTML = Greeter(user);
And then proceeded to compile the code at the command-line, with:
tsc greeter.ts
But I could not compile it, as Visual Studio says:
Command "tsc" is not valid.
After looking all over the TypeScript website, I was unable to find any information about how to get it working. A Google search also yielded no relevant results.
How can I get TypeScript working?
Update: Running any of the samples provided with the source code simply displays a blank page in any browser. However, samples appear to work just fine on the TypeScript website.

Your system cannot find the path to the compiler. The compiler executable is here (on my x64 Win 8 system) if you want to register it yourself.
C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\
Use it to compile the .ts file to a .js, and use that in your html instead of trying to compile it directly in the browser. That would be really slow.
You can look at the "HTML Application with TypeScript" project in VS, it is configured to compile your TypeScript at the project build.

A simple way to get tsc working on the command line is using nodejs and the corresponding package manager npm. You can get them from nodejs.org. Once you have set up nodejs, all you have to do is install the compiler with
npm install -g typescript
Executing Typescript directly in the browser is rather complicated. Typescript compiles to Javascript, so what you want is reference the compiled code in your html.

Related

How to see output on VS Code with Typescript?

I am doing some code challenges using Typescript in VS code. When I try to run the code and see the output, I get "Code Language is not supported or defined". The language mode is set to Typescript React (I also tried just Typescript). And the file has a .tsx ending. Finally, I also did compile the file and make a duplicate .js version. Is there something I am forgetting?
You cannot run a typescript file the way you would run a javascript file. You will need to first compile your typescript file into javascript with the command below in the directory containing your .ts file:
npx tsc -w <your-file-name.ts>
The command above will create a <your-file-name.js> file in the same directory and keep watching for any realtime changes with -w option. Then you can run the .js file in the same directory with either node or nodemon like this:
node <your-file-name.js>
---UPDATE---
Having to input these two commands mentioned above tsc -w and node <your-file-name.js> every time you might get cumbersome after a few times, you can use the ts-node command which combines both of the commands stated above into one:
ts-node <your-file-name.ts>
Run npx tsc -w
And in another terminal run node filename.js
Judging by the fact that your file ends with .tsx you are probably using React. I will also assume that you used create-react-app to init your project.
If both of my assumptions are correct, try:
npm start
If you are new to both React and Typescript, I would also suggest taking a look into that tool as it creates a very decent starting point for you to start learning both. https://create-react-app.dev/

Visual Studio Code not performing error checking in Javascript

I've tried following these instructions:
https://code.visualstudio.com/Docs/runtimes/nodejs
I am not getting the green/red swiggly lines at all. Is there something I'm missing?
You can also see the same thing in this video:
https://youtu.be/sE8_bTEBlFg?t=1m37s
As far as I know, they're running the default editor. I've tried installing typings and typescript using npm. I've Followed that tutorial to get Javascript intellisense for node.js, but I fail to get either error/warning checking or any type information for node.js modules.
Is there a location the type files should be installed to in order to make them global to every JS project you create in VS Code?
OK, so I managed get get some code suggestions working after reading up online. Without using the whole Typings tools, I acquired node.d.ts (found it on my computer inside C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions) and placed that in my project's directory structure inside the ".vscode" folder. At the top of my .js file I added the following line:
/// <reference path=".vscode/node.d.ts" />
The code seems to be recognized now.
I read up on this tip here: How to Import Intellisense files into vsCode (Visual Studio Code)
If you are using ESLint and you have an .eslint.js file in the project root you also need the eslint dependency installed in the project. Otherwise, if there is a .eslint.js file but the ESLint dependency is not installed Visual Studio Code will report nothing in the editor.
Maybe you didn't use the -g flag to install them globally? Alternately, perhaps it's a missing jsconfig.json file?

Developing TypeScript without an installed IDE or editor

I work in a place that restricts me from downloading and installing any applications, regardless of job roles. I have several web apps that I want to migrate to Angular 2 with TypeScript. I'm a C# developer in my own time and TypeScript is very appealing as it's statically typed and just compiles down to JavaScript.
How can I develop with TypeScript without having access to an installed IDE or code editor? Are there any online environments that allow the use of TypeScript definition files that provide code help/intellisense?
How can I develop with TypeScript without having access to an installed IDE or code editor
I am hoping you can do npm install typescript. If you can just run npm install typescript -g and then run typescript as tsc -w -p tsconfig.json in your code directory. This will allow you to run the compiler in the background leaving you free to use even notepad if you have to.
Alternatively you can just download the zip file from : https://github.com/Microsoft/TypeScript/releases and if you have node you can run node ./bin/tsc etc from the extracted directory.
Use Codenvy:
It needs some manual tweaks but somebody figured them out already: https://groups.google.com/a/codenvy.com/forum/#!topic/codenvy/R4myXA9MygA
You can try the playground: http://www.typescriptlang.org/Playground
Although it doesn't allow references to other files.

How can I use TypeScript compiler through nodejs?

I have a sample code and saved it to a file such as hello.ts
After installing nodejs on windows use below command for installing typescript
npm install -g typescript
How can I compile hello.ts with node.js directly?
When I install "TypeScript 1.6 in VS2015" and use tsc.exe don't have any problem but I want to use node.js instead of VS 2015 extension
Please guide me generate .js and .ds through Node.js
Run tsc in the command line, you'll have the help page. Compiling a script is easy, just tsc hello.ts in the folder containing your script, you'll get a hello.js file.
Please guide me generate .js and .ds through Node.js
You have two options:
Run tsc.js as a node script
Use typescript as an npm module
Run node tsc.js
This is the approach taken by some tools e.g grunt-ts. You basically just call spawn on the current process process.execPath passing in the other commands as args (-d).
One sample
Run TypeScript as a node module
If you are playing with the typescript compiler API highly recommend NTypeScript See the Readme for reasons.
The TypeScript compiler provides a simple function called transpile that you can use to get the expected output and then write it out to disk yourself.
PS: I have some docs on the TypeScript compiler internals here : https://basarat.gitbooks.io/typescript/content/docs/compiler/overview.html
My preferred way to get going is to use typescript-require.
this library basically adds nodejs support for typescript.
your index file should be a javascript file and it will look like this
require('typescript-require');
require('./src/main.ts');
and main.ts is a typescript file.
Here's a programatically way from TS/Node to run the equivalent of tsc from within a code itself (Note: this uses the TypeScript Compiler API):
https://gist.github.com/rnag/0d8fe2e72dc7b48743c13f9ca8837a4c

Debugging Coffeescript jasmine-node Tests in Webstorm/Intellij

I'm using node-jasmine 2 beta4 and writing in coffeescript. I'm happily running tests in Intellij 13.1 having setup the following Run Configuration
Node interpreter: /usr/local/bin/node
Working Dir: [Project Directory]
Javascript File: node_modules/jasmine-node/bin/jasmine-node
Application Parameters: --coffee --verbose spec
I also have setup file watchers for all my coffeescript files and they are building correctly and put into a [Project Directory]/.build subdirectory
Great! But setting breakpoints when debugging is not working. The information sent back to Intellij seems to reference the javascript files given the line numbers I am seeing suggesting that sourcemaps are not being referenced correctly.
Can anyone help?
(Currently i make do by adding a debugger statement instead of intellij's breakpoints)
I think your Javascript file should be node_modules/jasmine-node/lib/jasmine-node/cli.js. The jasmine-node documentation recommends using the cli.js file when using node directly instead of NPM (look under Usage).

Categories