Thursday, October 11, 2018

TypeScript - Setting up our project folder

Let us setup our project folder by referring to:

Before starting our project, our project folder (my-typescript-project-02) looks like this:
$ ls -l
total 8
-rw-r--r-- 1 ubuntu ubuntu 223 Oct 10 10:23 index.html
-rw-r--r-- 1 ubuntu ubuntu 390 Oct 10 10:17 script.ts


Now, let us try to setup our project folder so that we can reuse it. For this, let us put our project in the control of npm. Now in the command line type and select the defaults by pressing enter at the prompt:
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-typescript-project-02) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/ubuntu/Documents/my-foundation-project/my-typescript-project-02/package.json:

{
  "name": "my-typescript-project-02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) 
$

This will create the package.json file.

$ ls -l
total 12
-rw-r--r-- 1 ubuntu ubuntu 223 Oct 10 10:23 index.html
-rw-r--r-- 1 ubuntu ubuntu 220 Oct 11 09:18 package.json
-rw-r--r-- 1 ubuntu ubuntu 390 Oct 10 10:17 script.ts
$ 

We can check the contents of package.json. It is as follows:

$ more package.json
{
  "name": "my-typescript-project-02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
$ 

Now, let us install the lite-server using npm:
$ npm install lite-server --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN my-typescript-project-02@1.0.0 No description
npm WARN my-typescript-project-02@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ lite-server@2.4.0
added 342 packages in 13.107s
Now, if you check the package.json again. We can see that lite-server is added as a dependency to this file:

{
"name": "my-typescript-project-02",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.4.0"
}
}


Now since we want our lite-server to start and serve-up the pages in this folder. Let us add the following line to the scripts section of the package.json file:

"start": "lite-server"

Now, the scripts section of the package.json looks like this:

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server"
},


What will happen by adding this line is - when I type:

$ npm start

 > my-typescript-project-02@1.0.0 start /home/shree/Documents/my-foundation-project/my-typescript-project-02
> lite-server

 Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://10.12.60.32:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
18.10.11 09:42:03 200 GET /index.html
18.10.11 09:42:03 404 GET /script.js
18.10.11 09:42:04 404 GET /favicon.ico


This starts the lite-server along with it. It will open a new tab in the default browser and will access the page: http://localhost:3000/

.. and our index.html file is served at this location. Now, let us type: Hello World in the body of the index.html

<body>
Hello World!
<script src="./script.js"></script>
</body>




We can see that Hello World message is reloaded in the browser tab - without me having to manually reload the page.





This is very convenient.

Now, we can compile the TypeScript file using the command.

tsc <<file-name>>

But, consider a situation where there are numerous TypeScript file and you want to compile all of them at once. For this type the following command at the prompt:

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.
$ 

With this this folder comes under the control of TypeScript transpiler. This has created a file tsconfig.json. Now we have the following files in our project folder:

$ ls -l
total 152
-rw-r--r--   1 ubuntu ubuntu    235 Oct 11 09:46 index.html
drwxr-xr-x 269 ubuntu ubuntu  12288 Oct 11 09:31 node_modules
-rw-r--r--   1 ubuntu ubuntu    304 Oct 11 09:41 package.json
-rw-r--r--   1 ubuntu ubuntu 119604 Oct 11 09:31 package-lock.json
-rw-r--r--   1 ubuntu ubuntu    390 Oct 10 10:17 script.ts
-rw-r--r--   1 ubuntu ubuntu   5328 Oct 11 09:50 tsconfig.json
$ 

This tells TypeScript compiler that this project is our TypeScript project and to compile all the TypeScript files whenever we type tsc at the prompt:

$ tsc
$ ls -l
total 156
-rw-r--r--   1 ubuntu ubuntu    235 Oct 11 09:46 index.html
drwxr-xr-x 269 ubuntu ubuntu  12288 Oct 11 09:31 node_modules
-rw-r--r--   1 ubuntu ubuntu    304 Oct 11 09:41 package.json
-rw-r--r--   1 ubuntu ubuntu 119604 Oct 11 09:31 package-lock.json
-rw-r--r--   1 ubuntu ubuntu    461 Oct 11 09:58 script.js
-rw-r--r--   1 ubuntu ubuntu    390 Oct 10 10:17 script.ts
-rw-r--r--   1 ubuntu ubuntu   5328 Oct 11 09:50 tsconfig.json
$ 


We can see that when we typed tsc at he prompt. It searched for all the TypeScript files and compiled them to JavaScript files. In our case, there is only one file.

Now, we can reload our browser tab and check.


Posted by at
Labels:
Location: Hyderabad, Telangana, India

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)