Angular uses TypeScript. While you can omit all type definitions, trying to ignore TS (not including it in an angular project) and going all js would not be a good idea.
💡 Angular devs wanted to create another language on top of javascript, because they needed to rely heavily on code annotations (decorators, hence the @ naming) which are not yet part of the js spec. Fortunately TS decided to add decorator support and Angular went with TypeScript.
TypeScript (TS) is a strict syntactical superset of JavaScript, and adds optional static typing to the language.
Syntactical superset means that the TS compiler will not transpile your code to ES5 or add polyfills for ES6/7 so if you are using object spread for example ({...}
) and the target browser does not support object spread then you must transpile your code (probably with Babel or Bublé).
TS feels like a bridge between java and javascript and it is rather close to the failed and forgotten ES4 (or ActionScript / AS3) - the type system is optional and noone stops you from using functional concepts if you prefer those (though some people would argue that the class system and the philosophy around types is a deviation from the functional nature of the language).
💡 Anders Hejlsberg, grand daddy of Turbo Pascal, Delphi and C#, is the lead architect of TypeScript.
tslint:recommended
seems to be a sane default, but it feels different from the standard/semistandard world."extends": "tslint-config-semistandard"
works, but feels out of place and triggers warnings during script execution (unrelated to the code itself).Don't forget to use target es6
in tsconfig (es5 target will break with es6 language features, like Set
for example) -
@types/es6-shim
and es6-shim
will not help.
If you want array.includes
for example, then add the es7 option to tsconfig (lib: ['es7']
)
💡 ES7 has array.includes
and the exponentiation operator (**
, Math.pow).
If you are using 3rd party libraries then you will have to interface with them somehow (or at least let the TS compiler know about those interfaces). Use Definitely Typed to find and then install (npm install --save @types/foo
) type definitions.
For example the TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
error means just that (and may be solved with npm i -S @types/react @types/react-dom
). This may sound optional, but for tsc this is not.
TS can implicitly assign types to a variable (for example in const foo = 'bar'
foo will be a string type).
If you are not going to initialize your variable then the compiler will assume an any
type. This may lead to bugs but in the early days it may be helpful, especially if you're new to typescript. This behaviour may be disabled with noImplicitAny: true
in tsconfig.
TS does some clever things in the background to infer types for you, so while const foo = 'bar'
is trivial, it knows that if you use something with window.onmousedown
for example, then that should be a function with a MouseEvent input parameter (this is called contextual typing).
Null and undefined "values" are considered dangerous and are prone to introducing bugs.
With let name = 'John'
we know that "name" is a string and has the intrinsic properties of strings (has a length, has a toUpperCase method, can be concatenated with the + operator etc.) - but name = null
destroys the intrinsic nature of this variable, so extra safeguards are needed in the software.
TypeScript allows strictNullChecks
to be enabled: with that parameter one must explicitly mark nullable types and the default behaviour is to forbid null/undefined "types".
I tried to find a middle ground with examples and relevancy, for an in depth guide please follow the TS Handbook.