TypeScript Variable Declaration

A variable is a convenient placeholder used to reference computer memory addresses.

We can think of variables as containers for storing data.

TypeScript variable naming rules:

  • Variable names can contain numbers and letters.

  • Except underscores_and dollar signs,$no other special characters, including spaces, are allowed.

  • Variable names cannot begin with a number.

Variables must be declared before use. We can use var to declare variables.

We can declare variables in the following four ways:

Declare the variable's type and initial value:

var [变量名] : [类型] = 值;

For example:

var uname:string = "Example";

Declare the variable's type but without an initial value. The variable value will be set to undefined:

var [变量名] : [类型];

For example:

var uname:string;

Declare a variable with an initial value but without setting a type. The variable can be of any type:

var [变量名] = 值;

For example:

var uname = "Example";

Declare a variable without setting a type or initial value. The type can be any type, and the default initial value is undefined:

var [变量名];

For example:

var uname;

Example

var uname:string = "Example";
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2
console.log("Name: "+uname)
console.log("First subject score: "+score1)
console.log("Second subject score: "+score2)
console.log("Total score: "+sum)

Note:Do not use 'name' as a variable name, otherwise it will conflict with the 'name' property under the global window object in the DOM.

Use the tsc command to compile the above code, and you will get the following JavaScript code:

var uname = "Example"; var score1 = 50; var score2 = 42.50; var sum = score1 + score2; console.log("Name:" + uname); console.log("First subject score:" + score1); console.log("Second subject score:" + score2); console.log("Total score:" + sum);

The output result after executing this JavaScript code is:

名字: Example
第一个科目成绩: 50
第二个科目成绩: 42.5
总成绩: 92.5

TypeScript follows strong typing. If you assign a different type to a variable, it will cause a compilation error, as in the following example:

var num:number = "hello"     // 这个代码会编译错误

Type Assertion

Type assertion can be used to manually specify the type of a value, that is, it allows a variable to be changed from one type to another.

Syntax:

<type> value

or:

值 as 类型

Example

var str = '1' var str2:number = <number> <any> str //str and str2 are of type string console.log(str2)

How does TypeScript determine whether a single assertion is sufficient?

When type S is a subset of type T, or type T is a subset of type S, S can be successfully asserted as T. This is to provide extra safety when performing type assertions. Completely baseless assertions are dangerous. If you want to do this, you can use any.

The reason it is not calledtype conversionis because conversion usually implies some kind of runtime support. However, type assertion is purely a compile-time syntax, and it is also a method for providing the compiler with information about how to analyze code.

After compilation, the above code will generate the following JavaScript code:

var str = '1'; var str2 = str; //str and str2 are of type string console.log(str2);

The output result of execution is:

1

Type Inference

When a type is not given, the TypeScript compiler uses type inference to infer the type.

If the type cannot be inferred due to lack of declaration, then its type is considered to be the default dynamic any type.

var num = 2; //Type inferred as number console.log("The value of the num variable is"+num); num = "12"; //Compilation error console.log(num);

  • The first line of code declares the variable num and sets the initial value to 2. Note that the variable declaration does not specify a type. Therefore, the program uses type inference to determine the data type of the variable. The first assignment is 2,numand it is set to the number type.

  • In the third line of code, when we set a string value to the variable again, a compilation error will occur. This is because the variable has already been set to the number type.

    error TS2322: Type '"12"' is not assignable to type 'number'.

Variable Scope

Variable scope specifies where a variable is defined.

The availability of variables in a program is determined by their scope.

TypeScript has the following scopes:

  • Global scope− Global variables are defined outside the program structure and can be used anywhere in your code.

  • Class scope− This variable can also be calleda field.Class variables are declared inside a class but outside the class's methods. This variable can be accessed through an object of the class. Class variables can also be static, and static variables can be accessed directly through the class name.

  • Local scope− Local variables. Local variables can only be used within a code block (such as a method) where they are declared.

The following example illustrates the use of the three scopes:

var global_num = 12 //Global variable class Numbers { num_val = 13; //Instance variable static sval = 10; //Static variable storeNum():void { var local_num = 14; //Local variable } } console.log("The global variable is:"+global_num) console.log(Numbers.sval) //Static variable var obj = new Numbers(); console.log("Instance variable:"+obj.num_val)

The above code is compiled into JavaScript code using the tsc command:

var global_num = 12; //Global variable var Numbers = /** @class */ (function () { function Numbers() { this.num_val = 13; //Instance variable } Numbers.prototype.storeNum = function () { var local_num = 14; //Local variable }; Numbers.sval = 10; //Static variable return Numbers; }()); console.log("The global variable is:" + global_num); console.log(Numbers.sval); //Static variable var obj = new Numbers(); console.log("Instance variable:" + obj.num_val);

Executing the above JavaScript code, the output result is:

全局变量为: 12
10
实例变量: 13

If we call the local variable local_num outside the method, an error will be reported:

error TS2322: Could not find symbol 'local_num'.
Other extensions