타입스크립트 기초 문법 - 제네릭과 프로미스

프로미스 기초

📌const promise = new Promise(실행함수)

📌비동기처리를 위한 내장 객체

📌매개변수로는 resolve / reject 두 가지를 받는다. 

      ✔️resolve - 비동기 작업의 상태를 성공으로 바꾸는 함수

      ✔️reject - 비동기 작업의 상태를 실패로 바꾸는 함수

📌then과 catch는 각각 비동기처리가 성공했을 때, 실패했을 때 실행되는 함수이다.

 

const promise = new Promise((resolve,reject)=>{
    setTimeout(()=>{
    	resolve(10) // 10은 비동기작업의 결과값
    },3000)
})

 

3초 후 resolve를 호출해 비동기 작업을 성공 상태로 바꾼 후 

작업의 결과값을 "인수"로 전달한다.

 

• then은 resolve가 실행됐을 때, 즉 비동기 작업이 성공했을 때 실행된다.

promise.then((res)=>{
	console.log(res) // 10
})

 

• catch는 반대로 reject가 실행됐을 때 실행된다. 

promise.catch((error)=>{
	console.log(error)
})

 

 

제네릭과 프로미스

여기서 주의할 점은

비동기작업의 결과값에 타입을 정의해주지 않았을 때,

 

✔️resolve의 결과값은 unknown 타입으로 추론된다.

물론 이후 따라오는 then 함수에 전달된 resolve의 결과값 역시 unknown 타입으로 정의된다.

unknown 타입은 추후 메서드 사용이 불가하기때문에 오류가 발생 할 가능성이 높아 타입 정의를 분명히 해두는게 좋다.

 

✔️reject는 any타입으로 추론된다.

때문에 catch 함수에서 타입좁히기를 사용해 코드를 짜볼 수 있다.

 

<예시>

const promise = new Promise<number>((resolve,reject)=> {
	setTimeout(()=>{
		reject(20) //20은 비동기작업의 결과값
	}, 3000)
});

promise.then((response)=>{
	console.log(response) // 20
})

promise.catch((error)=>{ //error -> any 타입
	if(typeof error === "string"){[
		console.log(error)
	]}
})

 

 

프로미스를 반환하는 함수의 타입

interface Post {
	id:number;
	title:string;
	content:string;
}

function fetchPost(){
	return new Promise((resolve,reject) => {
		setTimeout(()=>{
			resolve({
				id:1,
				title:"title",
				content:"contents"
			})
		},3000)
	})
}

const postrequest = fetchPost();

postrequest.then((post)=>{
	post.id // 이 경우 매개변수가 unknown 타입으로 추론되어 메서드를 쓸 수 없어 오류 발생 
})

 

비동기작업 결과값에 타입을 정의해주지 않았을 경우, resolve의 인수는 unkown으로 추론된다.

때문에 unknown 타입인 post에서 id 프로퍼티를 찾을 수 없어 오류메시지가 뜬다.

 

 

이 경우 반환값의 타입을 명확히 정의해야한다.

function fetchPost(){
	return new Promise<Post>((resolve,reject) => {
		setTimeout(()=>{
			resolve({
				.........
			})
		},3000)
	})
}

 

혹은

function fetchPost():Promise<Post>{
	return new Promise((resolve,reject) => {
		setTimeout(()=>{
			resolve({
				.........
			})
		},3000)
	})
}

 

이렇게 첫 줄에 타입을 선언할 수 있다.