In trying to understand TypeScript a little more, what are the relations between all of the file extensions?
TypeScript, *.ts
Definition, *.d.ts
Map, *.map
JavaScript, *.js
I initially started entering the question above thinking to myself that someone would come along and help me out. Then I noticed an "answer your own question" option and I was inspired by Jeff Atwood's encouraging blog post - so I decided I should attempt to answer my own question. I had to do some research but now I have the understanding I was originally looking for.
TypeScript, *.ts
A typed superset of JavaScript that "compiles" to plain JavaScript. These files have the potential to utilize type-safety and strongly-typed syntax, with IDE intellisense.
Definition, *.d.ts
A *.d.ts file is used to provide TypeScript type information about an API that's written in JavaScript. Type definition files contain the defining types for all of the public APIs within a corresponding .js, for example - JQuery has jQuery.js without the jQuery.d.ts a TypeScript file consuming jQuery wouldn't know about its types, therefore intellisense is gone.
Map, *.map
A .map file is a source map file that let tools "map" between the emitted JavaScript code and the TypeScript source files that created it. This concept has been around since CoffeeScript.
JavaScript, *.js
According to MDN:
JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.
The relationship between a .ts file and a .js file is that a TypeScript file compiles down to a JavaScript file.
Related
So I've started using VsCode over Atom recently and love it, the issue is I develop for software that uses its own JS API with no proper integration into anything.
I've started trying to implement my own autocomplete/intellisense structure using their pdf into VsCode to speed up my workflow, currently I'm simply using a JS file that is full of empty functions and objects with a bunch of JSDoc comments to help VsCode Intellisense identify what's what, that seems to be working fine so far but it means importing this "useless" file into every project I work on.
I looked into extending the JS language using a language server but that seems way too complex for what I need (plus it looks like I'd be building the entire Javascript language from scratch).
Does anyone have any recommendations ect?
Kind regards.
Edit
Sorry I also would like the ability for it to pass linting as right now it gets a bit funky with it.
You likely do not need an extension for that your example use case.
VS Code's intellisense for libraries is powered by .d.ts typing declaration files. The declaration files for the library you are using can either be written in your current workspace as you are currently doing, or—preferably—shipped with the library itself. Many npm modules ship their with typing definitions files, while other libraries have typing definition files provided by the community through DefinitelyTyped.
You alternatively bundle d.ts types file into as a separate npm package that you include in any project that needs them
I'm a beginner level in writing in TypeScript and working with Angular, but I am experienced in JavaScript. From what I've read, any TypeScript would be translated into JavaScript and compiled. So when I code in the TypeScript file (e.g. the whatever.component.ts file), does that mean I can mix or introduce JavaScript language code inside where I also write TypeScript in the .ts file?
How does this all exist within the .ts file in regards to a code readability aspect for someone who is just learning TypeScript/Angular?
You can of course use JavaScript anyhow you like it. However, TypeScript is built to help the developers maintaining projects by using variables types. The types can then easily be read and previewed by good IDE with the appropriate extensions.
Get used to adding types. Use interfaces for custom objects, embrace the Angular way and you will forget you ever had to deal with JavaScript very soon.
A good base for productive IDE would be Visual Studio Code with the Angular Essentials extension.
Welcome to the Angular community!
So at my job I need to write a lot JSFL scripts. And because of the way JSFL, the scripts tend to be gigantic files, with functions and spaghetti everywhere.
So I had an idea to write them in Typescript, using separate files as "modules" (like I'm used to for commonjs/es6). And compile that all down to a single file.
I've tried searching but I've been unable to come up with an answer. Since JSFL just expects a simple javascript file. I obviously can't use commonjs, amd, etc.
So is there a way, that when developing. I can write separate "modules", have typescript (or if needed webpack) compile them into a single javascript file? Just like copy the functions from each file, and place it into one big file.
I'm not sure if its possible with typescript, or if I'll have to use some script or something to extract all the functions out.
Also since Adobe's JSFL is using an ancient javascript engine, it doesn't support a lot of features, and I will be adding polyfills to fill those holes.
You can use the typescript compiler option --outfile
Concatenate and emit output to single file. The order of concatenation
is determined by the list of files passed to the compiler on the
command line along with triple-slash references and imports. See
output file order documentation for more details.
See also documentation.
AFAIK, there is no tool which automatically converts JavaScript files into TypeScript files with meaningful information (e.g. accurate type annotations other than any for all). If given JavaScript files and their test cases, is it possible to generate the better quality of TypeScript files? For example, I can imagine one can modify a JavaScript engine to dynamically annotate the original JavaScript files by running test cases.
All javascript files are valid typescript files. So there wouldn't be anything to convert.
The closest thing I could think of would be something that could read javascript annotations and use those to create a typescript files (which would just be the javascript file with variable types included).
Here is some information regarding annotations since it seems to be on topic for this questions. JS Annotations
I'm learning how to use Magento e-commerce system, and I'm reading its documentation, but I don't understand some term, a "pre-compiled JavaScript library". What do they mean by that? How can JavaScript code be compiled?
The web downloader for upgrading and installing Magento without the
use of SSH (covered in Chapter 2). • js—The core folder where all
JavaScript code included with the installation of Magento is kept. We
will find all pre-compiled libraries of JavaScript here.
Source:
http://www.magentocommerce.com/wiki/2_-_magento_concepts_and_architecture/magento_s_base_structure
I do not know what Magento e-commerce uses, but I know what JavaScript Compilers are.
Pre-Compiled JavaScript is not practical as the various JavaScript interpreters will have their own method of compiling. Therefore, when most people talk about Compiling JavaScript, they are usually referring Minified JavaScript.
However, the latest minifiers go way beyond. A good example is Google Closure Compiler Advanced Mode. It is related to Google Closure Library and Tools, but is well designed even when used by itself.
There is an Online Demo of Closure Compiler.
It is called a Compiler because it is more than a minifier and the name JavaScript Compiler is not used for anything else. For example: This code
function hello(name) {
alert('Hello, ' + name);
}
hello('New user');
compiles to alert("Hello, New user"); in advanced mode. Single-use functions are removed, variable names are shortened, and even re-used.
It is very thorough. Simple mode assumes that there might be other JavaScript involved. in which case it would preserve the hello function. Advanced mode assumes that there is only a single JavaScript file, or that it is properly exported.
The one thing that keeps this from really being compiled is that it is not bytecode like compiled C or Java would be. It still has to be compiled at run-time like Perl.
Magento has an configuration option in the admin at
System -> Configuration -> Developer -> JavaScript Settings
named Merged Javascript Files.
When this setting is on, Magento will take all the javascript files it knows about, "compile" them to a minified version to product smaller files sizes, and then combine all the javascript files into a single javascript file. This way, instead of opening multiple network connections to download multiple files, Magento will open a single network connection to open one file.
So, when the documentation says that folder contains the pre-compiled versions, it means that's where the individual javascript files are stored, and where the files are loaded from when Merged Javascript Files
The term compilation comes from Computer Science. A compiler takes source code, and transforms it from one language into another language.
Traditionally, it's meant taking code from a higher level language (C, .NET, Java, etc.), and transforming it into the machine code (assembly code) that's understood by the computer chip. However, the term is generic and more modern usage includes taking the source code written in one language (Javascript) and transforms it into a different form (minified javascript).