Enjoy Programming

TypeScript 본문

JavaScript/TypeScript

TypeScript

LEETAEEON 2021. 7. 6. 21:59

타입스크립트란?\

 

타입스크립트는 자바스크립트에 타입을 부여한 언어이자 자바스크립트를 확장한 언어이다.

MS에 의해 개발 관리되는 오픈소스 프로그래밍 언어.

ES5의 Superset이므로 기존의 자바스크립트ES5 문법을 그대로 사용할 수 있다.

ES6의 새로운 기능들을 사용하기위해 babel같은 별도의 트랜스파일러를 사용하지 않아도 새로운 기능을 기존의

자바스크립트 엔진에서 실행할 수 있다.

 

자 어떤점이 더 나은 것일까? 디버깅이 쉽다라는 것을 찾을 수 있는데 예를 들어

이런 함수가 있다고 생각해보자. 개발자가아닌 다른사람이 보더라도 이 함수는 덧셈을 나타내는 함수임을 알 수있다.

그런데 인자에 숫자가 아닌 다른 string이라던지 다른 타입이 들어간다면

원하는 결과가 아닌 값을 얻게 된다.

c언어라면 int a, int b로 주어질 수 있겠지만 자바스크립트에서는 그렇게 선언해줄 수 없기 때문에

if문이라던지 어떠한 조건을 전제로 그러한 가능성을 방지해야한다.

 

타입스크립트는 이러한 부분을 해결할 수 있도록 도와준다.

이렇게 c언어 처럼 data type을 지정해줄 수 있다. 다른 타입의 값이 들어가면 에러를 발생시키는 것이다.

인터프리터 언어인 자바스크립트를 컴파일언어처럼 만들어줬네;...

 

마찬가지로 변수선언을 할때에도

let  a:string = "lee"; 

이렇게  선언이 가능하다.

 

한가지더 function의 리턴값도 타입을 미리 지정해줄 수 있다.

이렇게 .. ( ) : string으로 적어서 . 이함수의 리턴값은 string이다라고 미리 선언해주면

return에 console.log라던지.. number로 선언된 age를 return해주면 에러를 내어준다.

 

하나더 보자면 interface라는 것이다.

기존 자바스크립트의 경우 저기서 interface가 빠져도 잘돌아갈것이다. 그러나 문제는

정의되지 않은 값인 다른 값을 넣어줘도 돌아가긴 한다.. 원하는 값을 못얻을 뿐이지.

그런데 그렇게 되면 나중여 어러 코드들중에서 어디서 잘못되었는지 알기가 힘들다.

타입스크립트는 오브젝트의 각각의 프로퍼티의 타입도 제대로 정의해서 알려줘야 하는데 이때 사용하는게 interface구문이다.

structure랄까? 미리 구조를 설명해놓고  함수야 니가 받을 오브젝트 파라미터는

name은 string이고 age는 number이고 old는 boolean이야!! 라고 미리 구조를 만들어놓고

적용해주는 것이다

저렇게 안하면 에러가 생긴다. 디버깅이 훨씬 쉬워진다. 

 

흥미롭다 일단 앞서 배운 리액트 express등등을 더 많이 공부하면서 배워야겠지만 ~ 또 재미있는게 생겼으니 좋구나~~

'JavaScript > TypeScript' 카테고리의 다른 글

typescript interface  (0) 2021.08.23
typescript default type  (0) 2021.08.22
event And Typescript  (0) 2021.08.02
React Props and Typescript  (0) 2021.08.01
Typescript and react : STATE  (0) 2021.07.07