Develop Reference

Typescript module usage without ".js" ending

In typical JavaScript files we use require('some-module.js') to import functionality of this module where we need.
If we use TypeScript we also want to import this functionality using "import module from 'some-module.js'".
If we use nest.js we import using "import module from 'some-module'". The main thing that there is no ".js". How can i reach the same in for example express application. Maybe i should use webpack, babel or some special tsconfig.json configuration?

With Typescript's import and with Node's require, the extension is not necessary. Just the path to the file, or the name of the package you're importing. So in typescript you would do import * as module from 'some-module' and in js you would do const module = require('some-module'). You may want to check out this page on module resolution in Typescript.

Create React App with node_module that imports css

I have not dealt a lot with writing modules and am using lerna for the first time, and could use a lift from somebody more familiar with these subjects.
I am converting our existing babel hooked common component directory into a lerna module. The shared component module is currently bundled with rollup. I am stuck on a component which imports css from a node_module like so: import 'slick-carousel/slick/slick.css';
The cjs module generated by rollup does require('slick-carousel/slick/slick.css') as I would expect, however the create-react-app which makes use of the in house module does not hook the require properly. When I run the app I get an error where it tries to compile the .css as code:
slick-carousel/slick/slick.css:2
.slick-slider
^
SyntaxError: Unexpected token .
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
...
How do I get the css import in the module to hook properly into the app?
Is there a better way to handle hooking the module for development into our create-react-app packages using lerna?

AngularJS with Typescript and Webpack managing dependencies

My team is tasked with migrating an AngularJS application to use Webpack as a build system combined with TypeScript. This is all done as a prep to gradually move an application from AngularJS to Angular. (We are following migration guides provided by the Angular team)
Today I ran into an issue with TypeScript's 'Import' statement and I can't seem to find the reason for it. I found a solution, but want to know why this is the case.
In this test run I am having 2 modules in 2 different files. AuthModule and LoginModule . I think their dependency is Circular in that AuthModule -> LoginModule -> AuthModule
//in auth.module.js (this module is loaded before LoginModule)
import {LoginModule} from './login.module'; //is just an exported string
const authModule = angular.module('auth.module', [LoginModule])';
...
//in login.module.js
import {AuthModule} from './auth.module'; //again just an exported string
const LoginModule = angular.module('login.module', [AuthModule]);
...
Those are just 2 small snippets and this built and when viewed in the browser everything was working fine.
However, the moment I converted the files to TypeScript it did not seem to like that circular dependency. The app built in webpack without errors, but bombed in the browser.
To fix it I needed to not 'Import' AuthModule in LoginModule and when providing the dependency to the LoginModule I needed to provide a local string instead of the imported String.
//in login.module.ts (don't import AuthModule)
const LoginModule = angular.module('login.module', ['auth.module']); //just provide the name of the module here as a string
...
This builds and works fine and I am fine with that, but want to understand why. What is the difference between a TypeScript import and a 'webpack' import. My .tsconfig module property is set to CommonJS . Is that why?

From what I understand, when you are importing the LoginModule you are importing an instance of that LoginModule, thus angular.js throw an error. Instead you need to provide a string inside that module declaration, that's why it's working.

How is library resolved via require

I'm using npm and have my libraries in node-modules.
When I use import or require, for example import A from 'my_lib', somehow library gets resolved (something is imported from my_lib).
How does the library get resolved?
I think index.js file get's checked if it exists (similar to when I import from my custom folder with ./my_folder, the ./my_folder/index.js is checked)? What are the rules?
NOTE: Sometimes I use webpack, and I think in webpack there is resolve.mainFiles property with default value of ['index'] meaning if folder is specified it uses index.js.
But I'm using for example react library which doesn't have index.js in root folder and it still resolves properly.
Does the resolver look in package.json if the specified folder has one?

How to load System.js modules with TypeScript?

I'm trying to get TypeScript working with the default Aurelia skeleton, which is based on System.JS as a loader.
I'm having trouble getting TypeScript to accept module imports. I renamed one of the skeleton files, "nav-bar.js" to "nav-bar.ts" to see if I could convert the example into TypeScript. The code results in a compiler error: "Error:(5, 24) TS2307: Cannot find external module 'aurelia-framework'."
import {bindable} from "aurelia-framework";
export class NavBar {
//noinspection ES6Validation
#bindable router = null;
}
How can I get TypeScript to see the aurelia-framework as a valid import? There's a file in the root of the project called config.js that seems to describe the specific location of "aurelia-framework" but TypeScript doesn't know how to load it.
Thanks in advance for your help.

You may want to use d.ts definition files for registration with TypeScript Definitely Typed registry for use with tsd package manager. You can find different implementations on github, for example here or here. Also this tutorial might be useful.