[Typescript]Typescript의 개념과 type종류

! Javascript ? Typescript 

위의 이미지와 비슷하게 Javascript와 Typescript는 비슷해보입니다.

하지만 가장 중요한 차이인 JS는 동적타입언어 이며 TS는 정적타입언어 입니다.

동적타입언어는 런타임시 변수의 타입이 결정되고,

정적타입언어는 컴파일시 변수의 타입이 결정됩니다.

 

TS는 JS의 모든 기능을 포함하면서 정적타입을 지원하는 언어입니다.

JS는 타입을 지정하지 않기 때문에 중간 마다 다양한 타입의 값들을 변수에 할당할 수 있습니다.

이러한 자유로움 덕분에 진입장벽이 낮고, 적은 코드에서의 생산성이 높습니다.

하지만 TS는 변수를 선언할 때마다 타입을 고민해야지만, 많은 코드에서의 생산성이 높습니다. 

생산성의 차이는 변수와 같은 것들을 다양한 곳에서 사용하고 코드의 잠재적 오류의 발생, 등의 요소들이 있습니다.

 

JS의 새로운 기능들이 추가되면 TS에도 꾸준히 업데이트가 진행되고,

리액트 개발자들이 TS를 사용할 수 있도록 반영을 잘해주며, 큰 생태계를 갖는 장점들도 있다.

---

! TS type

그렇다면 지금부터 TS의 type종류에 대해 알아보겠습니다. 

 

● number 과 string

이는 매우 자주 쓰이는 type이라 다들 쉽게 아실겁니다.

숫자형과 문자형의 종류이며 선언과 함께 타입을 정해줍니다.

let variable1 : number = 100;
               (type)  (할당 값)
let variable2 : string = '백';

variable1 = '백'; // Type 'string' is not assignable to type 'number'.
variable2 = 100;  // Type 'number' is not assignable to type 'string'.

 

 

● null 과 undefined

JS에서는 null과 undefined가 값으로 존재했었죠.

하지만 TS에서는 각각 type으로 존재합니다.

let variable1 : undefined = undefined;
let variable2 : null = null;
variable = 100; // 타입 에러

 

 

● 문자열 리터럴과 숫자 리터럴 타입

주어진 리터럴의 값들 중 값을 가질 수 있는 타입이다.

값이 주어진 것들 중 정해져야 할 때 사용하면 편할 것 같다.

let variable1 : 1 | 2 | 3;
variable1 = 1;
variable1 = 2;
variable1 = 3;
variable1 = 4; // 타입 에러

let variable2 : 'a' | 'b' | 'c';
variable2 = 'a';
variable2 = 'b';
variable2 = 'c';
variable2 = 'd'; // 타입 에러

 

 

● any

any타입은 모든 종류의 type을 허용하는 type이다.

javascript 처럼 다양한 type의 값들을 넣을 수 있지만 그렇게 사용하면 TS을 사용하는 의미가 사라질 수 있기에 사용을 자제한다.

let variable : any;
variable = 1;
variable = 'a';
variable = {name : 'pyo'};
variable = () => {};

 

 

● void와 never

void : 아무 값도 반환하지 않는 함수의 반환 type으로 정의 가능하다.

never : 비정상적인 종료와 무한루프로 인한 종료되지 않을 상황에 정의 가능하다.

function print() : void {
	console.log("HELLO");
}

function Oops() : never {
	throw new Error('error');
}

function loop() : never {
	while(1){
    	...
    }
}

 

 

● 객체(Object) type

let obj : object;
obj = {
	name : 'pyo',
    age : 27,
}

 

 

● 열거형(enum) type

enum을 이용하여 열거형으로 정의한다.

enum Language{
	Korean,
    English,
    Spanish
}
console.log(Language['Korean']); // 0
console.log(Language['English']); // 1
console.log(Language['Spanish']); // 2

 

이렇게 원소들의 값을 정해주지 않는다면 0 부터 차례대로 들어가게된다.

하지만 중간에 임의의 숫자로 지정을 해준다면 그 아래부턴 +1씩 증가된 숫자로 들어가게된다.

또한, 문자열로 주고 싶다면 모든 원소들의 값을 정해줄 수 있다.

enum Language {
	Korean, //0
    English = 10, //10
    Spanish, //11
}

enum Language {
	Korean = 'ko',
    English = 'en',	//하나라도 값이 없다면
    Spanish = 'sp', //Enum member must have initializer. 에러가 뜬다.
}

 

그리고 열거형 type은 다른 type과는 달리 컴파일 후에도 객체로 남아있게 된다.

따라서 런타임 중 값을 가져다 쓸 수 있게 된다.

그렇다는 것은 불필요한 크기를 사용할 수 도 있다는 것이다..! 

 

이를 해결할 수 있는 방법은 

● 상수 열거형 type

const enum Language {
	Korean = 'ko',
    English = 'en',
    Spanish = 'sp',
}

처럼 const로 상수로 정의하는 것이다.

 

 

● 함수 type

함수 type을 정의하기 위핸 매개변수의 type과 반환 type을 필요로 한다.

// 함수 선언
function PrintSum(v1:number, v2:number, s1:string) : void {
	console.log(s1 + (v1+v2));
}

PrintSum(10, 20, '정답은...!'); // 정답은...!30


// 변수를 함수 타입으로 선언
let PrintSum2 : (v1:number, v2:number, s1:string) => void = function(v1,v2,s1) {
	console.log(s1 + (v1+v2));
}

PrintSum2(10, 20, '정답은...!'); // 정답은...!30

또한 매개변수 중 선택매개변수를 정의할 수 도 있다.

선택 매개변수란 값을 줘도 되고 안줘도 되는 매개변수를 뜻한다.

끝쪽의 매개변수를 선택매개변수로 사용하고 싶을땐 ? 기호를,

중간의 매개변수를 선택매개변수로 사용하고 싶을땐 유니온 타입은( | )과 undefined를 이용한다.

// 끝쪽에 사용할 경우
function PrintSum(v1:number, v2:number, s1?:string){
	s1 ? console.log(s1 + (v1+v2)) : console.log('답은 ' + (v1+v2));
}
PrintSum(10,20);				//답은 30
PrintSum(10,20, '정답은!!!');	 //정답은!!!30


// 중간에 사용할 경우
function PrintSum(v1:number, v2:number | undefined, s1:string){
	v2 ? console.log(s1 + (v1+v2)) : console.log(s1 + v1);
}
PrintSum(10,undefined,'답은!!'); //답은 10
PrintSum(10,20, '정답은!!!');	  //정답은!!!30

 

 

Typescript의 type에 대해서 알아보았습니다.

잘못된 정보와 오타 정보는 댓글로 알려주시면 감사하겠습니다^^

 

참고서적: 실전 리액트 프로그래밍 (이재승)