최근 타입스크립트에 대한 중요성, 필요성에 대해 계속적으로 이야기를 듣고 관심을 가지고 있었는데, 또 채용사이트를 보니까 많은 기업에서 타입스크립트를 자격요건 혹은 우대사항에 넣는 경우를 많이 봤습니다!
그래서 음... 도대체 왜? 타입스크립트를 이렇게 계속 사용하려고 하고 중요하게 생각하는거지? 그냥 자바스크립트만으로도 충분히 개발이 다 가능하지 않나? 라는 의문을 계속 남겼습니다.
그래! 쓰는데는 이유가 있겠지! 한번 본격적으로 파헤쳐보고 공부해보자! 라는 마음이 생겨 타입스크립트 공부를 시작하게 되었습니다 ㅎㅎ
새로운 것을 공부하기전에는 늘 그것이 무엇인지? 그걸 왜 사용하는지? 를 잘알아야한다고 생각합니다!
그래서 우선 알아본것이~?
타입스크립트란?
타입스크립트는 완전한 새로운 언어가 아니라 자바스크립트를 베이스를 하는 자바스크립트 상위단계에 있는 언어입니다. 자바스크립트에 타입을 부여한 언어이며 정적타입언어로 컴파일을 하면서 타입에 대한 에러를 잡아줍니다.
때문에 타입에 대한 오류를 직관적으로 잡아주며, 개발자의 실수를 많이 예방할 수 있겠죠?
또한 프론트엔드 개발자에게는 크로스브라우징 이슈가 매우매우 중요한 이슈중 하나인데, 타입스크립트는 이러한 걱정을 안하도록 자바스크립트 ES3 버전까지 컴파일을 시켜줍니다.
요즘 정~~~말 많은 회사들이 타입스크립트를 채택하고있는것을 채용사이트를 보면서 느꼈습니다. 그래서 도대체 왜 사용하는가? 를 알게되면 타입스크립트를 공부하는데 있어 많은 동기와 필요성을 느끼게 될 것 같습니다.
타입스크립트를 왜 사용하는가?
타입스크립트는 런타임 환경에서 동적으로 타입이 반환되는 자바스크립트와는 달리 정적으로 타입이 만들어집니다. 즉, 개발자가 코딩을 하는 즉시 그자리에서 타입을 명시해주며, 컴파일 과정에서 타입에러를 발생시켜 타입에 대한 이슈를 미리 차단하여줍니다. 때문에, 개발자가 코딩하는 즉시 타입에 대한 오류를 인지시켜줄수가 있고 이러한 과정은 좀 더 엄격하며 안정감 있는 개발 환경을 제공해줍니다.
또한 타입스크립트는 강력한 객체지향프로그래밍이 가능합니다. 객체 위주로 많은 모듈화가 가능하기때문에, 이러한 객체지향언어는 장점은 재사용성과 확장성이 매우 뛰어나다는 장점이 있습니다!
타입스크립트 체험해보기
타입스크립트를 체험하는 좋은 사이트가 있습니다.
바로 타입스크립트 플레이그라운드라는 사이트인데 https://www.typescriptlang.org/play?#code/Q
링크로 들어가시면 사용할 수 있습니다.
이 사이트에서는 타입스크립트의 기능도 만질 수 있고, 컴파일시 자바스크립트 버전별로 어떤식으로 변환이 되는지도 눈으로 보실 수 있습니다!
본격적으로 타입스크립트 체험하기전에는 타입의 종류를 정리해볼 필요가 있을것 같습니다.
크게 다음과 같이 12가지가 있습니다.
Boolean
Number
String
Object
Array
Tuple
Enum
Any
Void
Null
Undefined
Never
이 많은 타입중에서 사용을 지향하는것과 지양하는것들이 나뉩니다.
대표적으로 지양하는것은 any, undefiend, null 등 특정한 타입을 딱 지정하는것이아니라, 아무거나 상관없어(?) 이런 느낌의 타입 지정은 최대한 피해주는것이 좋다고 합니다!
이제 본격적으로 어떤식으로 타입을 지정해서 사용하는지 살펴보겠습니다.
일반적인 숫자 변수를 선언 초기화 할당을 진행할때 입니다.
자바스크립트 ver
let num = 5
타입스크립트 ver
let num:number = 5;
이런식으로 변수명 옆에 : 를 붙여 타입을 지정해줍니다.
이렇게 타입을 진행해주고 다른 타입의 값으로 값을 할당해주면 에러가 발생하게됩니다.
이런식으로 해당 변수는 number 타입으로 지정되었으므로 string 타입을 할당할 수 없다고 나옵니다.
이렇듯 타입스크립트는 엄격한 개발을 지향하면서 안정감있는 환경을 제공하며 버그 발생을 예방할 수 있습니다.
뿐만아니라 두가지 이상의 타입을 받는 변수도 만들 수 있습니다.
let age: number | undefined;
age = undefined;
age = 1;이렇듯 age 변수에 number 타입 혹은 undefiend 타입을 만들 수 도 있죠!
그럼 각각 타입별로 어떠한 형태로 선언 할 수 있는지 봐볼까요?
Boolean
타입의 진위값을 표현하는 boolean 입니다.
const boal:Boolean = true
Number
숫자형 타입만을 표현하는 number 입니다
const num:number = 5
String
문자형 타입만을 표현하는 string 입니다
const my_name:string = '훈훈'
Object
객체형 타입만 표현하는 object입니다
const obj:{} = {name : "훈훈"}
Array
배열형 타입만 표현하는 array입니다.
const arr:(string | number)[]= ['신','승','훈',1,2]
Tuple
길이가 고정되면서 각 요소들의 타입의 지정된 배열 형식의 타입인 tuple 입니다.
const tuple: [string, number] = ['hello!!', 10000];
Enum
특정 값들의 집합을 나타내는 enum 타입입니다.
enum Family {Hoon,Yeon, Rae}
const family_me: Family = Family.Hoon;
Any
모든 타입을 다 허용하는 any타입입니다
const anything:any = '아무거나!!';
Void
리턴값이 없는 공허한 타입인 void타입입니다
function print():void {
console.log("보이드는 생략이 가능!")
console.log("리턴값이 아무것도 없음!!")
return
}
Null
null를 리턴하는 null타입입니다.
const name = null;
Undefined
undefined를 리턴하는 undefined타입입니다.
const name: undefined;
Never
예상치 못한 에러가 발생되어 핸들링이 불가능할때 never 사용!
//에러는 절대 리턴이 될 수 없는 타입!
// 때문에 while(true) 처럼 무한으로 돌아가는것과 에러를 던지는 것에서만 사용 가능합니다.
function throwError(message:string):never {
throw new Error(message)
}이렇게 타입스크립트의 타입별 유형을 간단한게 공부해보았습니다!
never 같은 타입은 생소했지만 다른 타입들은 개발 공부를 하면서 다들 봐왔던것들이라 크게 이질감은 없이 공부 할 수 있었던 것 같습니다.
앞으로 점점 타입스크립트의 응용력을 키워가면서 실무에 적용시킬 수 있는 개발자가 되어보도록 하겠습니다
파이팅!!!
감사합니다
