[Typescript] 타입스크립트 테크닉

 

 

 

타입스크립트 기초

 

 

 

728x90

 

 

1. 옵셔널 체이닝

옵셔널 체이닝을 사용하면 충접된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 할 수 있다.

interface User {
	name: string,
    social?: {
    	facebook: boolean
        twitter: boolean
    }
}

let user: User

user = {
	name: 'aaa',
    social: {
    	facebook: true,
        twitter: true
    }
}

console.log(user.social?.facebook); // true

user = {
	name: 'aaa'
}

console.log(user.social?.facebook); // undefined

 

 

2. None-Null 어서션 연산자

컴파일 옵션 --strictNullChecks를 지정해 컴파일하면, 타입스크립트는 일반적으로 null일 가능성이 있는 객체ㅔ 대한 접근을 에러로 취급한다.

null이 아님을 나타내고 싶을때 사용하면 된다.

function aaa(user?: User) {
	let s = user!.name
}

 

 

3. readonly

타입스크립트에서는 타입 앨리엇, 인터페이스, 클래스에 대해 readonly 속성을 지정할 수 있다.

type User = {
	readonly name: string;
    readonly gender: string;
}

let user: User = {name: 'aaa', gender: 'Male'};

user.gender = 'Femail' // error! readonly는 수정이 불가

 

 

4. 비동기 Async / Await

타입스크립트 Promise타입 사용법?

// 비동기 함수 정의
function fetchFromServer(id: string): Promise<{success: boolean}> {
	return new Promise(resolve => {
    	setTimeout(() => {
        	resolve({success: true});
        }, 100);
    }
}


// 비동기 처리를 포함하는 async function의 반환값의 타입은 Promise
async funtion asyncFunc(): Promise<string> {
	// Promise한 값을 await하면 내용을 추출할 수 있다.
	const result = await fetchFromServer('10');
    return 'The Result : ' + result.success;
}


// await 구문을 사용하기 위해서는 async function 안에서 호출해야 한다.
(async () => {
	const result = await asyncFunc();
    console.log(result);
}) ()


// Promise로서 다룰 때는 다음과 같이 기술
asyncFunc().then(result => console.log(result));