TypeScript language, is structured and even more like languages like Java.
Typescript = EMCA6 + Types + Annotations
TypeScript gets converted back to compatible JavaScript using a process
called transpilation. A transpiler is a piece of software that converts the source code of
one language into the source code of another
www.typescriptlang.org/
play/
Think of an interface as a promise to do something (for example implement a function in
a certain manner) or store certain data (such as properties, arrays). TypeScript interfaces
can apply to functions.
TypeScript interfaces can also apply to properties. Interfaces can enforce properties
but can also have optional properties (for example, color in the following code):
interface LabelledClothing {
label: string;
size: number;
color? : string;
}
Modules
Internal Modules
Annotations:
Internal modules are TypeScript’s own approach to modularize code. You use the module
keyword to create a module. Internal modules can span across multiple files, effectively
creating a namespace. In a browser you load the modules using <script/> tags because
there’s no runtime module-loading mechanism. Or you can compile TypeScript files into
a JavaScript file that you include with one <script/> tag.
External modules
Annotations:
These are the types of modules most commonly used when developing in Angular.
External modules use a runtime module-loading mechanism.
Compilation Options
Annotations:
You can configure TypeScript to your tastes: where the source code is located,
how strict the compilation is, what compilation checks you want (or don’t want),
where the generated transpiled code is located etc. You can configure TypeScript by
specifying the configuration options in a JSON-formatted file. Normally this file is
called ‘tsconfig.json’ and you will find such a file when you generate your Angular
Chapter 4 TypeScript
55
project using the CLI. I have sometimes edited this file to make irrelevant compile
checks go way if you are going something unusual. For example if you are using some
regular JavaScript code within a TypeScript class.
Controllers and components
Annotations:
AngularJS used controllers to represent a widget in the user interface on the HTML page.
Angular (from version 2 on) replaces controllers with the Component object.
Components can have their own tag, such as . Components have a class
that contains data and code.