How to create a typescript project with npm
Enter fullscreen mode Exit fullscreen mode Create a new folder for this project run npm init in the work folder above mentioned Enter fullscreen mode Exit fullscreen mode after we run npm init , we will get a new file named package.json ,the file content as bellow: Enter fullscreen mode Exit fullscreen mode now we should insert code line «type»: «module», in package.json to support ES5 After we insert the new code line ,the package.json as bellow: Enter fullscreen mode Exit fullscreen mode note: let the browser support ES5 ，we can insert line as bellow: Enter fullscreen mode Exit fullscreen mode Now, we will install typescript dependency: npm install typescript —save-dev This demo location: code-repo/learn-test/typescript-learn Git link: Solution: When you package your file, there is normally no need to combine it into a single file. Please note — I have put entire files below to ensure the context is there, but the important bits are usually one or two lines, which I have highlighted.
Using npm to build my typescript/node project
You can use tsc-watch, which omits the use of nodemon and runs when any changes affect the typescript source of your app.
It has a success handler —onSuccess which restarts the server everytime a change is made to the typescript source.
console.log('node run') setTimeout(() => console.log(Math.random() * 1000.0), 1000); npm run dev > tsc && concurrently "npm run node-tsc:w" npm WARN invalid config loglevel="notice" > jsperf.com@0.1.0 node-tsc:w C:\Users\Shane\Desktop\so > tsc-watch --onSuccess "node index.js" 16:49:31 - Compilation complete. Watching for file changes. node run 709.2226373633507 16:49:36 - File change detected. Starting incremental compilation. 16:49:37 - Compilation complete. Watching for file changes. node run 974.6349162351444 16:49:41 - File change detected. Starting incremental compilation. 16:49:41 - Compilation complete. Watching for file changes. node run 935.9043001938232 Node is restarted after changing the typecript source.
How to create a npm library with only typescript model, You need to create node module which will be referred by all other projects. Please refer my github repo https://github.com/Plochie/pacify . This repo contains all classes in typescript and after building …
Creating a Typescript NPM library
I use the Angular CLI to build NPM libraries even if they are not Angular projects. You can just delete the Angular dependencies from the package.json file and you have a world class TypeScript project setup for you with a great test pipeline.
npm install --global @angular/cli ng new my-lib --create-application=false cd my-lib ng generate library my-lib After you generate the library you can go into the projects/my-lib/src directory open the package.json file and get rid of the Angular dependencies. Now you have a blank TypeScript project.
ng build my-lib will build it
ng test my-lib will run the unit test
cd into the dist/my-lib folder and you can npm publish straight to npm.
Why hand roll a TypeScript build when you can leverage off the work of the Angular team?
Is it possible to have a typescript only npm package?, I have a project which is only ever meant to be used with typescript projects and would like to have code inspection go to the actual lines of typescript code (rather than a definition file). I can’t seem to figure out how to set up an npm project for this. I have main set properly in package.json < // package.json details omitted …
Create a npm project and install typescript dependency
Type of package installation with npm:
npm install -g packageName Install global
npm install —save -dev pacakgeName Install locally
npm install —save packageName Install locally
when run npm install —production or env variable NODE_ENV value is production, only packages in dependencies will be install, but packages in devDependencies will not.
npm install -g packageName npm install --save-dev packageName npm install --save packageName Create a new folder for this project
run npm init in the work folder above mentioned
after we run npm init , we will get a new file named package.json ,the file content as bellow:
"name": "typescript-learn", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" > now we should insert code line «type»: «module», in package.json to support ES5
After we insert the new code line ,the package.json as bellow:
"name": "typescript-learn", "version": "1.0.0", "description": "", "type": "module", "main": "index.js", "scripts": "test": "echo \"Error: no test specified\" && exit 1" >, "author": "", "license": "ISC" > note: let the browser support ES5 ，we can insert line as bellow:
Now, we will install typescript dependency:
npm install typescript —save-dev
This demo location: code-repo/learn-test/typescript-learn
Git link:
How to install and run Typescript locally in npm?, To install TypeScript local in project as a development dependency you can use —save-dev key. npm install —save-dev typescript. It’s also writes the typescript into your package.json. …
Build and distribute a Typescript project
When you package your file, there is normally no need to combine it into a single file. Using a package manager (such as NPM) your files will be bundled into a package that you can keep private, or make public, and that package has all the files needed to run your module.
With TypeScript in particular, you would package the .js and .d.ts files, which means your package will work for both TypeScript and JavaScript consumers. You wouldn’t add the .ts files to the package.
If you are targeting both browser and Node environments, you can use UMD modules, which work in both environments.
Practical example — TypeSpec.
Please note — I have put entire files below to ensure the context is there, but the important bits are usually one or two lines, which I have highlighted.
TypeScript config file — the important bits are the «module» kind, and emitting «declaration» files.
Gulp file — this moves the files into a dist folder, incuding the package.json and readme files, but most importantly all of the JavaScript and type definitions.
var gulp = require('gulp'); gulp.task('default', function () < gulp.src('./node_modules/requirejs/require.js') .pipe(gulp.dest('./lib')); // This bit moves type definitions gulp.src('./Scripts/TypeSpec/*.d.ts') .pipe(gulp.dest('./dist/src')); // And this bit moves the JavaScript gulp.src('./Scripts/TypeSpec/*.js') .pipe(gulp.dest('./dist/src')); gulp.src('../README.md') .pipe(gulp.dest('./dist')); gulp.src('./package.json') .pipe(gulp.dest('./dist')); >); The package.json file hints where the main source file and type information can be found in the «main» and «types» sections:
< "author": "Steve Fenton", "name": "typespec-bdd", "description": "BDD framework for TypeScript.", "keywords": [ "typespec", "typescript", "bdd", "behaviour", "driven" ], "version": "0.7.1", "homepage": "https://github.com/Steve-Fenton/TypeSpec", "bugs": "https://github.com/Steve-Fenton/TypeSpec/issues", "license": "(Apache-2.0)", "files": [ "src/" ], "repository": < "url": "https://github.com/Steve-Fenton/TypeSpec" >, "main": "./src/TypeSpec.js", , "devDependencies": < "gulp": "^3.9.1", "requirejs": "^2.3.5" >, "optionalDependencies": <>, "engines": < "node": "*" >> You now have a «dist» folder with just the files you need to package. You can try it out without publishing to NPM using.
Setting Up a Typescript Project using NPM, Step 1 ️ Create the Project Folder Run this command in the terminal to create the project folder named project1. Project name depends on your choice. I have taken it to be project1. mkdir project1 Step 2 ️ Change the Project Directory Now jump into the project directory you just created.
Create a Typescript project in Node.js
Node.js is an engine that runs Javascript and not Typescript. The node Typescript package allows us to transpile our .ts file to .js scripts. Inside our package.json, we will put a script called tsc:
This modification allows us to call typescript functions from the command line in the project’s folder. So, we can use the following command:
npm install --save-dev @types/node "scripts": "tsc": "tsc", "prod": "tsc && node ./build/index.js", "build": "tsc" > "compilerOptions": "target": "es5", "module": "commonjs", "outDir": "./build", "sourceMap": true > > "version": "0.2.0", "configurations": [ "type": "node", "request": "launch", "name": "Launch Program", "program": "$/src/index.ts", "preLaunchTask": "tsc: build - tsconfig.json", "outFiles": ["$/build/**/*.js"] > ] > "script": "debug": "tsc --sourcemap" > "type": "node", "request": "launch", "name": "Debugger", "program": "$/src/index.ts", "preLaunchTask": "npm: debug", "outFiles": [ "$/build/*.js" ] >