급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!
👀 Typescript의 핵심 타입
지난시간에는 자바스크립트에도 있는 타입스크립트의 기본 타입에 대해서 알아보았습니다.
이번 포스트에서는 자바스크립트에는 없는, 타입스크립트 고유의 핵심 타입에 대해서 알아보도록 하겠습니다.
이 핵심 타입에는 Tuple, enum, any, union, literal, alias이 있습니다.
👀 핵심 타입에는 어떤 것이 있나요?
1. 튜플 Tuple 타입
튜플은 배열인데, 길이가 정해진 배열입니다.
지난번 일반 배열은 앞에 한가지 자료형만 정해줬다면,
튜플은 배열의 길이, 각 요소의 타입을 지정할 수 있습니다.
const myArray=[number, string];
//myArray의 길이는 반드시 2여야하며,
//0번에는 number, 1번에는 string이 와야 합니다.
//안그러면 타입스크립트가 에러로 처리합니다.그러나 한가지 단점은, 여기에 push를 사용해 자료를 추가하면 에러가 나지 않습니다!
이를 꼭 주의하시기 바랍니다!
2. enum 타입
enum은 이름처럼 열거해서 사용하는 타입입니다.
예제를 보시죠!
enum FruitId={APPLE, BANANA, KIWI};
const fruitBasket={
fruitId:FruitId.APPLE //0
}이렇게 변수를 열거하여 쉽게 사용할 수 있게 합니다.
참고로 꼭 대문자로 작성할 필요는 없고,
다른 숫자로 대체하거나 꼭 숫자가 아닌 다른 값도 가능합니다.
enum FruitId={APPLE=1, BANANA, KIWI="rottenKiwi"};
const fruit1={
fruitId:FruitId.APPLE //1
}
const fruit2={
fruitId:FruitId.KIWI //"rottenKiwi"
}3. any 타입
지난번 예제에 여러 타입이 섞인 배열의 경우
const myArray=any[];이렇게 표현한다고 했었는데요, 이는 이름 그대로 어떤 타입이든 가능하다는 뜻입니다.
그런데, 이러면 결국 자바스크립트와 다를게 없지 않을까요?
맞습니다! 그래서 any타입은 타입스크립트를 쓰는 의미가 없어지기 때문에
잘 쓰지 않는 것이 좋습니다 :)
4. 조합 union 타입
만약 숫자형, 문자열 이렇게 2가지를 명시하려면 어떻게 할까요?
union 타입을 사용하면 됩니다.
const myValue: number | string;그런데 이것을 함수에 사용하려면,
아래처럼 따라 좀 더 까다롭게 사용해야할 때가 있습니다.
//자바스크립트
function union(value1, value2){
return value1+value2
}
//타입스크립트
function union(value1:number|string, value2:number|string){
let result;
if(typeof value1==='number' && typeof value2==='number'){
result=value1+value2;
}else{
result=String(value1)+String(value2);
}
return result;
}5. 리터럴 literal 타입
변수에 특정한 값을 정해주는 타입입니다.
그러면 이 변수는 그 값만 받을 수 있습니다.
//1.
const male:"male";
//2.
const gender:"male"|"female";예제의 1번처럼 사용하며, 2번처럼 유니언 타입과 결합하여 유용하게 사용할 수 있습니다.
6. 알리어스 alias 타입 (사용자 정의 타입)
반복되는 타입(유니언 타입처럼 긴 것)은 사용자가 따로 정의하여 사용할 수도 있습니다.
생성할 때는 type키워드와 =를 사용하고,
사용할 때는 다른 타입처럼 :로 사용합니다.
type myType=string|number;
type MyFruitType={
fruit:string;
fruitId:number
}
const fruit1:MyFruitType={
fruit:"banana",
fruitId:2
}주의할 점은, 예제에서 MyFruitType에서 명시한 것 외에 키:값을 fruit1에 사용하면
컴파일 오류가 난다는 것입니다!
😝 마무리
오늘은 Typescript의 기본 타입 외에
타입스크립트에 있는 Tuple, enum, any, union, literal, alias 타입에 대해 알아보았습니다.
이외에도 몇가지 타입이 더 있는데요...! 😮
내용이 길어지니 다음시간에 좀 더 다루도록 하겠습니다!
다음 시간에도 저는 살아남을 수 있을까요?!
- 참고:
【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
https://www.udemy.com/course/best-typescript-21/
