TypeScript 변수 선언1 - Number, String

 

안녕하세요. 이번에는 TypeScript에 대해서 알아볼려고 합니다. 일단 타입 스크립트에서 사용하는 변수를 알아볼 것입니다.

변수	예시	설명	자바스크립트에 존재?
number	3,2,-7,0.4	JavaScript의 모든 숫자(정수,소수)	O
string	"Hello", 'World'	모든 문자열	O
boolean	true, false	참, 거짓	O
object	{ name : "Alex"}	Object(객체)를 지칭함	O
array	[0,1,2,3,4,5]	원소의 변수에 따라 배열의 타입이 정해진다	O
tuple	[0,"Hello], ["World", 1]	고정된 길이와 속성의 배열	X
enum	[APPLE = 0, BANANA=1]	변수명에 따른 식별코드 부여	X

위 표에 나온것처럼 8가지에 대해서 작성할려고 합니다. 이번 글은 Number와 String에 대해서 쓸거고 마지막으로 any에서 마무리 하도록 하겠습니다.

Number(숫자)에서의 JavaScript와 TypeScript는 같다고 보시면 됩니다. 소수, 정수, 음수등등 숫자는 모두 Number변수로 사용할수 있습니다. 

// TypeScript Code Start

// num1 변수를 선언과 동시에 value 지정

const num1 : number = 10;

// num2 변수 선언

let num2 : number;

// num2 value지정

num2 = 20;

console.log('number1 : ', num1);

console.log('number2 : ', num2);

// End of the Code

확장자 .ts으로 파일을 생성하고 위와 같이 코드를 작성합니다. 그리고 local에서 실행(npx ts [ts 파일명])하면 거기에 대응되는 .js파일이 생성됩니다. 

// TypeScript Code Start

// num1 변수를 선언과 동시에 value 지정

var num1 = 10;

// num2 변수 선언

var num2;

// num2 value지정

num2 = 20;

console.log('number1 : ', num1);

console.log('number2 : ', num2);

// End of the Code

물론 위 코드에서 주석은 TypeScript이지만 ': number'가 없기 때문에 실제로는 .js파일 입니다. 이렇게 TypeScript를 작성하고 JS로 컴파일을 하여 실질적으로 사용할수 있습니다.

// TypeScript Code Start

// num1 변수를 선언과 동시에 value 지정

const num1 : number = 10;

// num2 변수 선언

let num2 : number;

// num2 value지정

num2 = '20'; // 에러지점(문자 20지정)

console.log('number1 : ', num1);

console.log('number2 : ', num2);

// End of the Code

만약 num2에 무나열 20이 입력이 되면 TypeScript에서는 Error표시를 코드상과 터미널에서 나타내 줍니다. 

 이는 디버깅시 매우 중요한 요소로 향후 다른 변수를 다룰때(any제외)도 적용이 됩니다. 

// TypeScript Code Start

const str1 : string = "Hello_";

let str2 : string;

str2 = "World"

console.log(str1+str2);

// End of the Code

이제 string에 대해서 알아보겠습니다. TypeScript에서 위와 같이 코드를 작성합니다. Number와 마찬가지로 str1은 문자열로 변수를 선언하고 바로 value값을 주었고 str2는 선언 다음 변수값을 주었습니다. 

// TypeScript Code Start

var str1 = "Hello_";

var str2;

str2 = "World";

console.log(str1 + str2);

// End of the Code

JS코드로 컴파일 한 다음에 실행을 하면 다음과 같은 결과가 나옵니다. 

당연히 문자열만 들어가야 할 곳에 숫자, 객체 등이 들어가면 Error가 나타납니다.