Explain how TypeScript fits into Angular?

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
newbiewebSr. Software EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
0
newbiewebSr. Software EngineerAuthor 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?
0
Julian HansenCommented:
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.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

newbiewebSr. Software EngineerAuthor Commented:
So, let is a newer type which allows the transpiler select the type to use as it generates the javascript?
0
newbiewebSr. Software EngineerAuthor Commented:
thanks
0
Julian HansenCommented:
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
0
newbiewebSr. Software EngineerAuthor Commented:
Sorry, that was an old thought I should have deleted...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.