[TS] 타입스크립트 - 기본 타입

 

타입스크립트(TypeScript) 

 

 

 

타입스크립트는 기존의 자바스크립트 언어에 타입을 추가한 언어다. 자바스크립트에서 좀 더 확장된 언어라 표현할 수 있고 기존 SASS/SCSS가 CSS파일로 변환되어 브라우저가 읽듯이 타입스크립트 또한 다시 자바스크립트로 변환되어 브라우저가 실행한다.

 

타입스크립트를 사용하는 이유는?

---

자바스크립트는 아래 코드가 실행 가능하다.

const Add = (num1, num2) => {
    console.log(num1+num2);
}

Add(1,2);
Add(1, "text");
Add('1', true);

 

Add 라는 함수의 매개변수 num1, num2 둘 다 <number> 타입이 들어올것으로 예상해서 코드를 작성했지만 다른 문자열이나 불리언 타입이 들어와도 자바스크립트는 정상적으로 작동한다.

 

여기서 알아야할 부분은 Add 함수의 설계 미스인데도 불구하고 정상적으로 실행이 되기 때문에, 오류를 발견하는데에는 코드를 직접 실행해보고 테스트 해봐야 알 수 있다는 점이다.

 

TypeScript

 

위 코드를 타입스크립트로 작성했을 경우 이와같은 오류가 발생한다. 정상적으로 타입이 들어간 Add(1,2)의 경우 오류가 발생하지 않지만 아래 텍스트와 불리언 타입이 들어간 코드의 경우 타입스크립트에서는 이를 감지하여 알려준다. 큰 규모의 소프트웨어일 경우 타입스크립트를 사용한다면 에러를 사전에 방지하는 큰 역할이 된다.

 

 

TS Playground - An online editor for exploring TypeScript and JavaScript

 

해당 사이트에서는 타입스크립트를 작성해 실행해 볼 수 있고 작성한 코드를 자바스크립트로 변환해서 보여준다.

 

 

기본 타입

---

const str: string = 'Hello World';

변수에 타입을 지정할 경우 변수명 옆에 :(콜론) 문자열을 붙이고 타입을 지정해주면 된다.

 

const num: number = 123;

숫자의 경우 위와 같이 지정한다. 나머지는 아래와 같다.

 

const isLoad: boolean = false; //불리언 타입

const arr: number[] = [1, 2, 4] //숫자 배열
const arr: array<number> = [1, 2, 4] //숫자 배열

const arr2: string[] = ['가', '나', '다'] //문자 배열
const arr2: array<string> = ['가', '나', '다'] //문자 배열

const arr3: [string, number] = ['가', 1]; //튜플(Tuple)

 

함수

---

//자바스크립트 함수
const sum(num1, num2) => {
	return num1 + num2;
}

//타입스크립트 함수
const sum = (num1: number, num2: number): number => { 
   return num1 + num2;
}

 

타입스크립트 함수에서는 매개변수로 받는 num1과 num2의 타입을 지정할 뿐더러 return을 하는 a+b의 결과의 타입까지 선언해주어야 한다.

 

이해를 돕기위해 성인을 구분하는 isAdult() 함수다.

 

const isAdult = (age: number): boolean => {
  return (age > 19)
}

console.log(isAdult(20));

 

나이라는 age: number 매개변수를 받아 20살 이상인 경우 true, 아래인 경우 false를 출력하는 return 코드를 작성했다. 함수 return 값의 타입을 boolean으로 작성했기 때문에 코드를 실행했을 때, true라는 결과가 나온다.

 

간단하게 타입스크립트 사용법을 공부해봤다.