Explain how TypeScript fits into Angular?

curiouswebster
curiouswebster used Ask the Experts™
on
Explain how TypeScript fits into Angular?

I coded Angular 4 and am pretty sure I used TypeScript. But, I can not recall exactly where.

Please refresh my memory.

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
If you are coding in Angular 2 or higher you are using TypeScript.

TypeScript is basically a typed superset of JavaScript. Anything you can do in JavaScript you can do in TypeScript. The nice thing about TypeScript is
a) It allows you to type your variables, function returns etc - so the compiler does some key checking
b) It enables you to use the latest JavaScript functions and features without having to worry about backward compatibility

When you compile your Angular App - the TypeScript code is Transpiled into JavaScript, minified and tree shaken - ready to be published. It is not much more involved than that.
curiouswebsterSoftware Engineer

Author

Commented:
Can you give me an example of TypeScript to Javascript? I am still a bit unsure how this works under the covers.

For example, what variable and function name types are available?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Let me explain again. TypeScript is just an OPTIONAL layer on top of typescript - it is JavaScript.

You can do this
class SomeClass {
  public myVariable = 111;
  
  constructor(v) {
     this.myVariable = v;
  }
  
  dump() {
     console.log(this.myVariable);
   }
}
let x = new SomeClass(1234);
x.dump();

Open in new window

If you transpile this with TypeScript you get
var SomeClass = /** @class */ (function () {
    function SomeClass(v) {
        this.myVariable = 111;
        this.myVariable = v;
    }
    SomeClass.prototype.dump = function () {
        console.log(this.myVariable);
    };
    return SomeClass;
}());
var x = new SomeClass(1234);
x.dump();

Open in new window

However you can make one small change (drop the public definition) and that code will run natively in JavaScript.

In TypeScript we can do this
let v:number = 3;

Open in new window

But that is no different from
let v = 3

Open in new window

Which is also valid in the TypeScript environment and will also run in the JavaScript environment.

In other words. At its simplest TypeScript is JavaScript - you can optionally choose to add typing and other meta data to the code to assist with building robust code.

Consider this TypeScript code
let x:number = 123;
let y:number = doSomethingUseful(x);
console.log(y);

function doSomethingUseful(x):number {
	return x * x;
}

Open in new window

This transpiles to
var x = 123;
var y = doSomethingUseful(x);
console.log(y);
function doSomethingUseful(x) {
    return x * x;
}

Open in new window

Code is basically the same - just dropped the Type and changed the newer let into the more widely supported var - which is optionally done based on the settings you setup for which version of JavaScript you want to target.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

curiouswebsterSoftware Engineer

Author

Commented:
So, let is a newer type which allows the transpiler select the type to use as it generates the javascript?
curiouswebsterSoftware Engineer

Author

Commented:
thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome

So, let is a newer type which allows the transpiler select the type to use as it generates the javascript?
Not sure what the question is?
let is used for local declarations (local to the block they are in) as opposed to var which declares a variable that is global to the entire function
curiouswebsterSoftware Engineer

Author

Commented:
Sorry, that was an old thought I should have deleted...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial