What is the Basic Syntax of TypeScript?

Basic Syntax of TypeScript

The JavaScript ecosystem may now benefit from static typing thanks to TypeScript, a robust programming language. Since TypeScript is essentially a typed superset of JavaScript, all legitimate JavaScript code is likewise legitimate TypeScript code.

Basic Structure

TypeScript’s syntax follows the guidelines for creating programs outlined in the JavaScript standard. Basic components of a TypeScript program include Modules, Functions, Variables, Statements and Expressions, and Comments.

Additionally, TypeScript inherits a number of fundamental syntactic rules from JavaScript:

• Whitespace: TypeScript can format and indent programs for improved readability because it ignores spaces, tabs, and newlines.
• Case-Sensitivity: TypeScript is case-sensitive, which means that it distinguishes between capital and lowercase characters in keywords and identifiers.
• Semicolons: TypeScript does not require semicolons to be used to separate statements.

Identifiers and Keywords

A program’s variables, functions, classes, and parameters are all given names known as identifiers. Certain guidelines must be followed by TypeScript identifiers:

1. They can have both characters and numbers, but they can’t start with a number.
2. Other than the dollar sign ($) and the underscore (_), they are unable to use special symbols.
3. They don’t qualify as keywords.
4. They ought to be distinct.
5. They are unable to have spaces.

Keywords are reserved words that have special meaning in the context of the language. Examples of keywords in TypeScript include var, number, string, function, class, interface, let, const, try, catch, finally, public, and private.

Type Annotations

Strong type checking at build time, rich tooling tools, and improved code readability are all made possible by TypeScript’s optional static typing with type annotations.

TypeScript-specific grammar elements known as type annotations let the compiler know exactly what kind of value a given value is. The postfix type annotation syntax serves as the main method for type annotation.

The syntax is to immediately follow the identifier with a colon (:) and then the particular Type Annotation.

You can use type annotations for:

1. Variables: Specifying the kind of information that a variable is anticipated to contain.
2. Function Parameters: Function parameters are used to specify the kind of arguments that should be supplied to a function.
3. Function Return Values: Indicate clearly what kind of value the function should return.

Type Annotation Syntax Example

For variables, the following example illustrates the syntax:

var foo: number = 123;

The type annotation in this sample, : number indicates that a numeric value is anticipated to be stored in the variable foo. Following this type check, the compiler will produce a compilation error if a value of an incompatible type such as a string is attempted to be assigned. As TypeScript requires strong typing, for example, var num: number = "hello" will trigger a compilation error.

TypeScript employs type inference, which is based on the initial value assigned, to determine the static type when type annotations are not present. For other developers (or future you), explicit annotations are still essential for providing clarity in the code, especially for function parameters where inference may be challenging or impossible.

Type Erasure

Type Erasure is one of the key ideas pertaining to TypeScript’s types. Before the program is compiled into JavaScript and run at runtime, all explicit type annotations are eliminated through a process known as type erasure.

At its core, TypeScript functions at two linguistic levels:

• The Static Level (Type Level): Managed by TypeScript, the Static Level (Type Level) is made up of static types that are only needed during compilation in order to carry out type checking, identify problems, and enhance tooling.
• The Dynamic Level (Program Level): Runtime values and code are performed at this level, which is controlled by JavaScript.

Type annotations have no effect on runtime JavaScript because they are completely meant for the static level. When the JavaScript file is produced by the TypeScript compiler (TSC), the syntax components that are just there for typing are removed.

The TypeScript code that declares a variable type directly is an example:

let rocker: string;

is changed during compilation to the JavaScript equivalent that is devoid of type information:

let rocker;

This guarantees that the types such as interfaces, type aliases, and type annotations do not add any unexpected behaviour or performance overhead to the final JavaScript, upholding the design principle that types should never have an impact on the output produced by the program. Because of this erasure technique, TypeScript may be quickly converted to JavaScript (also known as type stripping) and executed directly in any JavaScript engine.

TypeScript as a Superset of JavaScript

With optional type checking, TypeScript was purposefully created to be a strict superset of JavaScript. TypeScript uses all of JavaScript’s fundamental building blocks and grammar because of this important link. It is easy to convert any valid .js file to a .ts file and compile it with other TypeScript files because TypeScript is strictly a superset.

TypeScript’s main objective is to give your JavaScript code compile-time type safety. The TypeScript instructions are translated into the corresponding JavaScript code for execution by the TypeScript compiler (TSC) during operation. This procedure guarantees that, assuming no compile-time mistakes were found, the final JavaScript will function just like the original code.