타입스크립트 튜토리얼 변수

변수는 값을 저장하는 "메모리 상의 이름이 붙은 공간"이다. 다른 말로, 변수는 프로그램 상에서 값을 위한 컨테이너로 행동한다. 타입 스크립트 변수는 반드시 자바스크립트 명명 규칙을 따라야 한다.

1. 변수 명은 알파벳, 숫자를 포함할 수 있다.

2. 공백, _ $를 제외한 특수문자를 쓸 수 없다.

3. 숫자로 시작할 수 없다.

변수는 반드시 사용되기 전에 선언되어야 한다. 변수 선언을 위해 var 키워드를 쓴다.

타입스크립트에서의 변수 선언

타입스크립트에서 변수 선언을 위한 문법은 변수명 뒤에 콜론(:)을 포함하고 그 뒤에 타입을 포함하는 것이다. 자바스크립트처럼 변수 선언을 위해 var 키워드를 쓴다.

변수를 선언할 때 4가지 옵션이 있다.

1. 타입과 값을 한 문장에 선언 var 변수명 : 타입 = 값;

2. 값 없이 타입 선언. 변수는 undefined가 됨. var 변수명 : 타입;

3. 타입 없이 값 선언. 변수 타입은 any로 설정된다. var 변수명 = 값;

4. 값과 타입 둘 다 없이 선언. 변수의 타입은 any이고 undefined로 초기화된다. var 변수명;

S.No.	Variable Declaration Syntax & Description
1.	var name:string = ”mary” The variable stores a value of type string 변수는 문자열 타입 값을 저장한다.
2.	var name:string; The variable is a string variable. The variable’s value is set to undefined by default 변수는 문자열 변수다.
3.	var name = ”mary” The variable’s type is inferred from the data type of the value. Here, the variable is of the type string 변수의 타입은 값의 자료형으로부터 추론된다. 변수는 문자열 타입이다.
4.	var name; The variable’s data type is any. Its value is set to undefined by default. 변수의 자료형은 any다. 변수의 값은 기본적으로 undefined로 설정된다.

예 : 타입스크립트에서 변수

var name:string = "John"; 
var score1:number = 50;
var score2:number = 42.50
var sum = score1 + score2 
console.log("name"+name) 
console.log("first score: "+score1) 
console.log("second score: "+score2) 
console.log("sum of the scores: "+sum)

컴파일된 후 다음과 같은 자바스크립트 코드가 생성된다.

var name = "John";
var score1 = 50;
var score2 = 42.50;
var sum = score1 + score2;
console.log("name" + name);
console.log("first score: " + score1);
console.log("second score : " + score2);
console.log("sum of the scores: " + sum);

출력 결과

name:John 
first score:50 
second score:42.50 
sum of the scores:92.50

     

타입스크립트 컴파일러는 변수의 타입과 할당된 값의 타입이 같지 않으면 에러를 생성한다. 타입스크립트는 강한 타입을 따른다. 강한 타입 문법은 할당 연산자(=) 양쪽에 있는 지정된 타입들이 같다는 것을 보증한다. 이것이 다음과 같은 코드에서 컴파일 에러가 나는 이유다.

var num:number = "hello"     // will result in a compilation error

타입스크립트에서 타입 단언

타입스크립트는 변수를 한 타입에서 다른 타입으로 바꾸는 걸 허용한다. 타입스크립트는 이 프로세스를 type assertion이라고 한다. 이 문법은 목표 타입을 <>기호 사이에 넣는 것이다. 그리고 이걸 변수 또는 표현식 앞에 위치시킨다. 다음 예는 이 개념을 설명한다.

var str = '1' 
var str2:number = <number> <any> str   //str is now of type number 
console.log(str2)

visual studio code에서 str, str2에 마우스를 갖다 대면 변수의 데이터 타입이 바뀐 걸 알 수 있다. 기본적으로 A가 B의 하위 타입이거나 B가 A의 하위 타입인 경우 타입 A에서 B의 단언은 성공할 수 있다.

"type casting"이라고 부르지 않는 이유는 캐스팅은 일반적으로 런타임에 적용되지만 "type assertion"은 순수하게 컴파일 시간 구조이고 코드가 어떻게 해석될지에 대한 힌트를 제공하는 방법이다.

컴파일 후 다음과 같은 자바스크립트 코드를 생성한다.

var str = '1';
var str2 = str;     //str is now of type number
console.log(str2);

출력 결과는 1

타입스크립트에서 추론 타입

타입스크립트가 강한 타입임을 감안하면 이런 특징은 선택사항이다. 또한 변수의 동적 타입을 권장한다. 타입 없는 변수 선언을 권장한다는 의미이다. 이런 경우에 컴파일러는 변수의 타입을 변수에 할당된 값에 기반해서 결정한다. 타입스크립트는 코드 안에서 변수의 첫 사용을 찾고 초기에 설정된 타입을 결정하고 나머지 코드 블록에 있는 변수의 타입이 같다고 가정한다.

var num = 2;    // data type inferred as  number 
console.log("value of num "+num); 
num = "12";
console.log(num);

코드는 변수를 선언하고 2라는 값을 설정한다. 변수의 자료형이 명시되지 않았다. 프로그램은 추론 타입을 변수의 자료형을 결정하기 위해 사용한다, 예로, 변수에 설정된 첫 값의 타입을 할당한다. 이 경우에서 num은 숫자 타입으로 설정된다.

코드가 변수의 값을 문자열로 설정할 때. 컴파일러는 변수의 타입이 이미 숫자로 설정되었기 때문에 에러를 던진다.

error TS2011: Cannot convert 'string' to 'number'.

변수 범위

변수의 범위는 변수가 정의된 위치를 명시한다. 프로그램 안에서의 변수의 유효성은 변수의 범위에 의해 결정된다. 타입스크립트 변수는 다음의 범위를 따른다.

global scope : 글로벌 변수는 프로그래밍 구조 바깥에 선언된다. 변수들은 코드 상의 모든 곳에서 접근될 수 있다.

class scope : 이러한 변수들은 fields라고 불린다. 필즈 또는 클래스 변수는 메서드 바깥이면서 클래스 내에서 선언된다. 이러한 변수들은 클래스의 객체를 써서 접근할 수 있다. 필즈는 정적이 될 수 있다. 정적 필즈는 클래스 이름을 써서 접근될 수 있다.

local scope : 로컬 변수는 이름에서 추측할 수 있듯이 메서드, 루프와 같은 구조 안에서 선언된다. 로컬 변수는 오직 그들이 선언된 구조 내에서만 접근 가능하다.

다음 예는 타입스크립트에서의 변수 범위를 묘사한다.

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

자바스크립트 코드

var global_num = 12;              //global variable 
var Numbers = (function () {
   function Numbers() {
      this.num_val = 13;          //class variable 
   }
   Numbers.prototype.storeNum = function () {
      var local_num = 14;        //local variable 
   };
   Numbers.sval = 10;            //static field 
   return Numbers;
}());

console.log("Global num: " + global_num);
console.log(Numbers.sval);       //static variable  

var obj = new Numbers();
console.log("Global num: " + obj.num_val);

결과

Global num: 12
10
Global num: 13

로컬 변수를 메서드 바깥에서 접근하려고 시도하면 컴파일 에러가 난다.

error TS2095: Could not find symbol 'local_num'.

https://www.tutorialspoint.com/typescript/typescript_variables.htm