★[프론트엔드 기초]React + TypeScript (7)

객체 리터럴

리터럴 타입

• 리터럴 타입은 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 함.

 

• 문자열 리터럴 타입

• 숫자 리터럴 타입

• 불리언 리터럴 타입

• 객체 리터럴 타입 

• 타입 별칭

• 리터럴 타입을 사용하면 좋은점 

- 코드의 가독성이 높아진다.

- 잘못된 값이 들어오는 것을 막음

 

타입스크립트 유니온 타입, 타입 별칭, 타입 가드

any타입

- 타입을 지정할 수 없는 제한적인 경우에만 any타입 사용

let anyVal : any = 100;
anyVal = 'kim'; //오류가 안남

유니온 타입

• 제한된 타입을 동시에 지정하고 싶을 때 사용

type strOrnum = number | string; // 유니온 타입

let numStr : strOrnum= 100;
let item : number;

function convertToString(val : number | string) : string {
    if(typeof val === 'string') { //타입 가드
        item = 0;
        return val;
    }
    else{
        item = val;
    }
    
    return String(val);
}

• any 타입 : 타입 체크를 하지 않는다. 어떠한 타입이던 ㅇㅋ
• 유니온 타입 : 제한된 타입들을 파이프 라인으로 구분하여 동시에 지정
• 타입 알리아스 : 반복되는 코드를 재사용
• 타입 가드 type of연산자를 이용하여 타입 검증 수행 

array와 tuple

 

배열의 유니온 타입 사용 방

let numbers : number[]=[1, 2, 3, 4, 5];
let fruits : string[]=['apple', 'banana', 'orange'];

for(let i=0; i< numbers.length; i++){
    console.log(numbers[i]);
}

for(let i=0; i< fruits.length; i++){
    console.log(fruits[i]);
}

let mixedArray : (number | string)[]= [1, 'two', 3, 'four']; // mixed array

for(let i=0; i< mixedArray.length; i++){
    console.log(mixedArray[i]);
}

let infer = [1,2,3];

for(let i=0; i< infer.length; i++){
    console.log(infer[i]);
}

타입추론으로도 가능하다.

 

//튜플 : 타입의 순서가 정해져 있음
let greeting: [string, number, boolean] = ['hello', 10, true];

for(let i=0; i< greeting.length; i++){
    console.log(greeting[i]);
}

 

Array와 Tuple의 차이점

• Array는 길이가 가변적이며 동일한 타입의 요소로 구성
• Tuple은 길이가 고정적이며 각 요소의 타입이 정해져 있다.

//spread 연산자 : 배열을 펼쳐서 사용
let firstArray = [1, 2, 3];
let secondArray = [4, 5, 6];

let combinedArray = [...firstArray, ...secondArray]; // [1, 2, 3, 4, 5, 6]

console.log(combinedArray); // [1, 2, 3, 4, 5, 6]s