TypeScript 왜 사용해? (이유와 기본 타입 정리 간단히 ) part1

안녕하세요, 오늘 TypeScript에 대해서 찐~하게 배워보려해요.

 

우리는 보통 변수를 만들 때 

let 솔 = 'sol' 이렇게 만들죠.

 

그리고 이렇게 생각들 하죠,

"아니, 자바스크립트만 있어도 되지. typescript은 왜 나온 거야!? 그걸 왜 쓰는 거야?"

 

그 이유와 typescript의 개념을 확실히 알고 자바스크립트와 다른 점을 비교하며 활용해 보도록합시다.

 

< 목표 >

1. typescript란?

2. typescript를 쓰는 이유

3. typescript의 기본 타입 정리 & 활용

 

typescript란?

타입스크립트는 한 마디로 자바스크립트를 기반으로 한 언어, 

자바스크립트를 개선하여 쓰는 것으로 자바스크립트에 포함되지 않은 새로운 기능들이 있으며 자바스크립트보다 더 간편하고 쉽게 사용할 수 있는 것이 타입스크립트입니다.

 

typescript를 쓰는 이유

typescript는 변수 값에 데이터 타입을 지정하며 에디터에 입력하는동시에 바로 에러를 잡아주어

- 버그를 줄여주고

- 다른 개발자가 보기에 가독성이 좋으며

- 전보다 유지보수가 쉬워지기 때문에 많이 사용되고 있습니다. 

 

typescript의 기본 타입 정리 & 활용

자바스크립트는 아주 깐깐예민한 친구라 변수에 실드를 씌워줘야합니다.

let 솔 : string = 'sol';

아니, 이렇게 굳이?

 

허허, 이렇게 하면 '솔'이라는 변수가 string 이라는 것이 더 명확하게 정의됨으로써

숫자에 할당하려 할 때 삐삐, 에러! 에러! 이렇게 바로 알려준답니다.

 

타입스크립트는 자바스크립트와 달리 변수에 타입을 명시하면서 바로 에러를 잡아주어 

1. 다른 개발자가 코드를 보기에도 쉽고, 

2. 오타 교정, 엄격한 타입 체크

의 장점이 있지요. 

|  타입스크립트의 타입의 종류

타입스크립트에서 쓰는 타입의 종류도 다양한데, 자주 쓰는 것을 대표적으로 말하자면

 string , number, boolean, null, undefined이 있습니다. (*string는 대문자가 아닌 소문자를 쓴다는 것)

let name : string = 'sol';

let age : number ='19';

let marry : boolean = 'false';

 

array와 object의 경우

let 짱구가족 : string[] = ['짱구', '짱아', '흰둥이']

let 짱구가족 : (number | string )[]  = ['짱구', 5, '짱아', 1]

let 짱구가족 : {name : string} = {name : '흰둥이'}

 

각 타입을 정해본다면

let 짱구네 : {member : string[], 
			year : number, 
            live: boolean
            	} = 
             {member : ['짱구', '짱아'], 
             year : 6, 
            live : true }

 

|  타입을 미리 정하기 애매할 때(union type,  any,  unKnow)

타입스크립을 사용할 때  타입을 정하기 애매한 상황이 올 때가 많습니다. 

즉, 변수에 number...? 아냐, string? 훔..(머뭇) 할 때 사용하는 것이 union, any, unknwon type 입니다.

 

1. union type

변수에 number 또는 string이 들어올 수 있다. 의 타입을 정하고 싶으면 →  | 연산자를,

이게 곧 number OR string 이런 느낌인데, 이것을 'union type' 이라고합니다.

 

 

array이나 object 자료를 만들 때 union type을 쓰려면

var 배열 : number[] = [1, '솔' , 5];
var 오브젝트 : {age : string} = {age : '19'}

                  ▼
*괄호 넣어서 ()
var 배열 : (number|string)[] = [1, '솔', 5];
var 오브젝트 : {age : (number|string)} = {age : '19'};

 

2. any

말 그대로 아무 자료나 넣을 수 있는 타입을 말합니다.

let 솔 : any = 'sol';
솔 = 19;
솔 = true;

어떤 것이든 가능, 그러나 다 넣을 수 있다면 재미가 없지요. 막 쓰는 것이 아닌 급할 때 사용하는 타입입니다. 

 

 

3. 함수에 타입 지정하는 법 & void 타입

function 함함수(x : number) { //input 부분
 return x * 2                //output 부분
}

함함수(30)

 

아무것도 return 하고 싶지않다구요? 그러면 void타입을

function 함함수(x: number) : void{

}

함함수(30)

+ 다른 방법

function 함함수(x : number|undefined) :void{ 

}

 

함수에 파라미터를 만들어놨지만 파라미터가 불필요할 때 파라미터를 옵션으로 정의

function 함함수(x? : number){
}

함함수();

이렇게 파라미터쪽에 물음표를 치면 옵션 설정이 되어 에러가 안 납니다. (물음표는 number | undefined와 똑같기 때문)

 

 

 

그런데 말이죠, 

function 함수( x:number|string) : void{
	console.log(x+3) →이러면에러납니다. 왜?
}

타입스크립은 깐깐예민한 친구랬죠? 어정쩡한 거 딱 잡아냅니다.

union타입이기때문이죠, 이도저도 아닌 상황에 딱 +3 해죠. 이러니 에러가 난 겁니다. 

따라서, 

이럴 경우 number면 해주기,  string면 해주기. 이렇게 코드를 짜야합니다. 

 

~하면 ~해주기. 

 

~하면 ~해주기라...

 

많이 익숙하시지 않습니까? 네, 조건문.

 

 

타입스크립트에서도 엄격하게 코드를 짤 때 조건문으로 코드를 만들죠. 그 방법이 바로 Narrowing입니다. 

 

타입 확정하기 Narrowing & Assertion  (다음 파트에 계속..)

 

 

다시 정리를 하자면, 

 

🍖타입스크립트란 

 자바스크립트와 같은 언어지만 더 개선되어진 것.

디버깅이나 하나씩 console.log를 찍을 필요 없이 쓰는 동시에 에러를 잡아줘서 시간 절약.

 

🍖자바스크립트 vs 타입스크립트, 둘은 다른 언어? No

타입스크립트는 같은 자바스크립트고  더 개선되어진 것

 

다음 파트에선 좀 더 자세히 파해져 볼 겁니다 🕵