Develop Reference

How to Export SVG Icons from TypeScript Library

Goal
I'm working on a proof of concept project where the goal is to create an NPM package with TypeScript which exports custom SVG icons. The library is to only export the raw SVG's themselves, and not as a [framework] component.
Problem
Right now, I am receiving various TypeScript errors, either about an export not existing, or the library not having been typed correctly. Because there's not one specific problem, I am hoping to share some of my configurations for someone more familiar with this tooling to hopefully help.
I'm not very strong with tooling, so I am not sure where the disconnect is with
Exporting the SVG icons to be imported by the end user
Creating the proper type declarations for the library
Configuration
package.json
{
...
"module": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
"build": "tsc",
}
}
tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"declaration": true,
"esModuleInterop": true,
"isolatedModules": true,
"lib": ["dom", "dom.iterable", "esnext"],
"module": "esnext",
"moduleResolution": "node",
"outDir": "dist",
"resolveJsonModule": true,
"skipLibCheck": true,
"target": "es5"
},
"include": ["src", "global.d.ts"]
}
global.d.ts
declare module '*.svg' {
const content: string;
export default content;
}
src/index.ts
import TestIcon from "./svg/test.svg";
import ArrowThinLeft from "./svg/arrow-thin-left.svg";
export { TestIcon, ArrowThinLeft };
Thanks for taking a look :)

import statement in typescript

I have 3 different TS file and loading 2 TS file dynamically as below in 1 main TS file
if(x==='xyz'){
import('../../common1').then((common)=>{
common.loadContent()
})
} else if(x==='abc'){
import('../../common2').then((common)=>{
common.loadContent()
})
}
Now in both TS file I am importing jquery and also import jquery parent TS file
import * as $ from "jquery"
My tsconfig.json
{
"compilerOptions": {
"target": "es5",
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"jsx": "react",
"declaration": true,
"sourceMap": true,
"experimentalDecorators": true,
"skipLibCheck": true,
"typeRoots": ["./node_modules/#types", "./node_modules/#microsoft"],
"types": ["es6-promise", "webpack-env"],
"lib": ["es5", "dom", "es2015.collection"]
}
}
So my question is do jquery file will load 3 times or only once.

Webpack is a bit unpredictable in this case, I'm struggling with it myself, but I don't think it will be loaded multiple times. After the first time it is cached and will be taken from the module cache. The only important thing is that you set the module type in the tsconfig.json to "esnext", what you have done.

React-native typescript template not compiling tsc, tsx fles

I have created a new expo app with a blank (TypeScript) template, and create a script entry in a package JSON file like this.
"compile-project":"tsc --watch"
but the project not compiling the any of tsc, tsx files in my project directory while running the "compile-project" command.
here is my tsconfg file
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true
}
}

Looks like you're setting up to stop emit files by giving noEmit: true. This option is only useful for checking the typing only.
Try to switch it back to false to see the compiled files in the output:
tsconfig.json
{
"compilerOptions": {
// ...
"noEmit": false,
}
}

Why are my typescript interfaces being compiled to javascript?

As I understand it, interfaces are only relevant in Typescript and the tsc compiler should be smart enough not to convert them to JS files in the final output. When I compile my code the interfaces are being compiled with it. Why is this?
My simplified project structure
src/
index.ts
lib/
EventClient.ts
interfaces/
EventClientConfig.ts
What it compiles to
dist/
index.js
lib/
EventClient.js
interfaces/
EventClientConfig.js
My tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"outDir": "./dist",
"lib": ["ES6", "DOM"],
"target": "ES2018",
"module": "CommonJS",
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"baseUrl": ".",
"removeComments": true,
"strict": true,
"typeRoots": ["./node_modules/#types"],
"rootDir": "./src",
"types": [
"node",
"jest-fetch-mock",
"express",
"reflect-metadata"
]
},
"include": ["src"],
"exclude": ["dist", "node_modules", "**/*spec.ts"]
}
An interface
export interface EventClientConfig {
endpoint: string;
authToken: string;
}
How I'm using the interface
import { EventClientConfig } from '../interfaces/EventClientConfig';
const config: EventClientConfig = {
endpoint: '/api',
authToken: '123456'
}
What the interface is compiled to
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
In the compiled code EventClient.js makes no actual reference to the EventClientConfig.js so it's definitely not required. Why is Typescript compiling the interface files to JS?

This was solved thanks to #AluanHaddad who suggested using .d.ts declaration files. I have changed all my interface filenames so that they end with .d.ts and they are no longer included in the output.

The answer to your questions is here modules
In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module. Conversely, a file without any top-level import or export declarations is treated as a script whose contents are available in the global scope (and therefore to modules as well).

Typescript include and file path VS Code recognition

I have been struggling for a while now with the inclusion of my tsconfig files into VS Code.
Whereas my code compiles just fine, I often have errors reported by VS Code, because VS Code did not associate the tsconfig file to the current ts file.
I check if my main.ts file is associated to any tsconfig in VS Code by executing the following:
TypeScript: Go to Project Configuration
I received an error (see link below) telling my that no tsconfig is found.
You can also see the folder strucutre in the linked image.
To give a short overview the structure looks like this:
root
`-- development
`--client
|
|--code
| |--.. various
| `-- main.ts
|
`--config
|--.. various
`--tsconfig.json
My tsconfig.json looks like this:
{
"compilerOptions": {
"module": "es2015",
"target": "es2017",
"moduleResolution": "node",
"sourceMap": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"jsx": "react"
},
"include": [
"./../code/**/*"
],
"files": [
"./../code/main.ts"
]
}
VS Code Screenshot

It appears that VSCode looks up from the ts file to find a tsconfig (https://github.com/Microsoft/vscode/issues/3772#issuecomment-329126952)
If you move the client tsconfig up a directory it should work.
root
`-- development
`--client
|--tsconfig.json
|
|--code
| |--.. various
| `-- main.ts
|
`--config
`--.. various
As the comment suggests you might want to add a tsconfig.base.json to the root folder and include it in each tsconfig.json so that you can have some common/default settings.

Move the tsconfig.json to the root of your project, and change the paths accordingly:
{
"compilerOptions": {
"module": "es2015",
"target": "es2017",
"moduleResolution": "node",
"sourceMap": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"jsx": "react"
},
"include": [
"development/client/code/**/*"
],
"files": [
"development/client/code/main.ts"
]
}