개발일지

리터럴 , 유니온, 교차타입 본문

typescript

리터럴 , 유니온, 교차타입

eodovo 2022. 11. 3. 12:48
728x90

리터럴 , 유니온

const userName1 = 'Bob';//type -> 'Bob' (상수)
let userName2 = 'Tom'; //type -> string(초기값)
let userName3:string | number = 'kim';

userName3 = 100;
console.log(userName1,userName2,userName3);




type Job = 'police'|'developer'|'teacher'

interface User{
    name:string;
    job : Job;// 튜플 type Job
}
const user:User ={
    name:'Bob',
    job:'student'  // job : 'student' -> 에러 Job 외의 단어
}
console.log(user.name,user.job);

 

교차타입

interface Car{
    name:string;
    start():void;
}
interface Toy{
	//name:number 교차 타입은 같은 타입이어야함. name:number로 할 경우 에러 발생
    name:string;
    color:string;
    price:number;
}

const toyCar : Toy & Car ={
    name:'버스',
    color:'blue',
    price:10000,
    start():void{
        console.log(this.name,this.color,this.price +'원');
    }    
}
toyCar.start()

 

함수의 매개변수의 전달 인자 타입이 다를 때

function getSize(arr:number[]):number{
    return arr.length;
}
const arr=[1,2,3];
console.log(getSize(arr)); //3

const arr2 =['a','b','c','d','e']
console.log(getSize(arr2));// 에러 발생 (arr:number[])



// 유니온 사용으로 에러 해결

function getSize(arr:number[] | string[]):number{
    return arr.length;
}
const arr=[1,2,3];
console.log(getSize(arr)); //3

const arr2 =['a','b','c','d','e']
console.log(getSize(arr2));// 에러가 발생한다.

'typescript' 카테고리의 다른 글

TS + React /스타일드 컴포넌트 props를 이용한 가변 UI 만들기  (0) 2023.01.24
제네릭  (0) 2022.11.03
클래스 (class)  (0) 2022.11.03
타입 스크립트 함수  (0) 2022.11.03
타입 스크립트  (0) 2022.11.02
Comments