타입스크립트 기본 개념

자바스크립트에 타입 기능이 있으면 좋은 이유

• 타입스크립트 컴파일러는 문제의 원인이 어디에 있는지 친절하게 알려 준다

타입스크립트 고유의 문법

타입 주석과 타입 추론

let n: number = 1 // 타입 주석
let m = 2 // 타입 추론

타입 추론 덕분에 자바스크립트로 작성된 ‘.js’ 파일을 확장자만 ‘.ts’로 바꾸면 타입스크립트 환경에서도 바로 동작한다.

인터페이스

interface Person {
	name: string
	age?: number
}

let person: Person = {name: "Jane"}

튜플

튜플은 물리적으로는 배열과 같다. 다만, 배열에 저장되는 아이템의 데이터 타입이 모두 같으면 배열, 다르면 튜플입니다.

let numberArray: number[] = [1,2,3] // 배열
let tuple: [boolean, number, string] = [true, 1, 'OK'] // 튜플

제네릭 타입

제네릭 타입은 다양한 타입을 한꺼번에 취급할 수 있게 해줍니다. 다음 코드에서 Container 클래스는 value 속성을 포함합니다. 이 클래스는 Container<number>, Container<string>처럼 여러가지 타입을 대상으로 동작할 수 있는데 이를 ‘제네릭 타입’이라고 합니다.

class Container<T> {
	constructor(public value: T) { }
}

let numberContainer: Container<number> = new Container<number>(1);
let stringContainer: Container<string> = new Container<string>('Hello world')

대수 타입

대수 타입이란, 다른 자료형의 값을 가지는 자료형을 의미합니다. 대수 타입에는 크게 합칩합 타입, 교집합 타입 두 가지가 있습니다.

type NumberOrString = number | string // 합집합 타입 예
type AnimalAndPerson = Animal & Person // 교집합 타입 예

타입스크립트 변수 선언문

타입 주석

타입스크립트는 자바스크립트와 다르게 let으로 선언한 변숫값은 타입 주석으로 명시한 타입에 해당하는 값으로만 바꿀 수 있음. 타입 추론도 마찬가지!!

any 타입

자바스크립트와 호환을 위해 any라는 이름의 타입을 제공합니다. any 타입은 어떤 종류의 값도 저장할 수 있습니다.

undefined 타입

자바스크립트에서 undefined는 값입니다. 변수를 초기화하지 않으면 해당 변수는 undefined 값을 가집니다. 그러나 타입스크립트에서 undefined는 타입이기도 하고 값이기도 합니다.

객체의 타입 변환

타입 변환

타입이 있는 언어들은 특정 타입의 변숫값을 다른 타입의 값으로 변환할 수 있는 기능을 제공합니다. 이를 타입 변환이라고 합니다. ex) (<{name: string}>person).name

타입 단언

그런데 타입스크립트는 독특하게 타입 변환이 아닌 타입 단언이라는 용어를 사용합니다. 타입 단언문은 다음과 같은 두 가지 형태가 있습니다.

(<타입>객체)
(객체 as 타입)

export default interface INameable {
	name: string
};

함수 선언문

void 타입

값을 반환하지 않는 함수는 반환 타입이 void입니다. void 타입은 함수 반환 타입으로만 사용할 수 있습니다.

함수 시그니처

변수에 타입이 있듯이 함수 또한 타입이 있는데, 함수의 타입을 함수 시그니처라고 합니다. 타입 별칭도 만들어서 사용할 수 있음.

(매개변수1 타입, 매개변수2 타입[,...]) => 반환값 타입
let printMe: (string, number) => void = function (name: string, age: number): void {}

type stringNumberFunction = (string, number) => void // 타입 별칭
let f: stringNumberFunc = function(a: string, b: number): void {}

undefined 관련 주의사항

매개변수에 타입이 정해져 있을 때 undefined가 들어올 수도 있다면 매개변수값이 undefined인지 판별하는 코드를 작성해야 함.

Promise와 async/await 구문

단일스레드로 동작하는 자바스크립트의 물리적인 특징상 웹 서버는 동기 API가 결괏값을 반환할 때까지 일시적으로 멈춥니다.

타입스크립트(혹은 자바스크립트)는 이처럼 단일 스레드에서 동작하므로 코드를 작성할 때 항상 비동기 방식으로 동작하는 API를 사용해 프로그램의 반응성을 훼손하지 말아야 합니다.

콜백 지옥

그런데 비동기 API를 사용하면 콜백 함수에서 다시 또 다른 비동기 API를 호출하는 코드를 만들 때 코드가 매우 복잡해집니다.

따라서 ES6에서는 프로미스가 채택되었다.

Promise 이해하기

자바스크립트에서 프로미스는 Promise라는 이름의 클래스입니다. 따라서 Promise 클래스를 사용하려면 일단 new 연산자를 적용해 프로미스 객체를 만들어야 합니다. 그리고 new 연산자로 프로미스 객체를 만들 때 다음처럼 콜백함수를 제공해야 합니다.

const promise = new Promise(콜백 함수)

여기서 Promise의 콜백 함수는 reslove와 reject라는 두 개의 매개변수를 가집니다.

(resolve, reject) => {}

readFilePromise('~')
	.then((content: string) => {
		return readFilePromise('~') // 이게
	})
	.then((content: string) => { // 여기로 전달 (체이닝) 

Promise.resolve

Promise.resolve(값) 형태로 호출하면 항상 이 ‘값’은 then 메서드에서 얻을 수 있습니다.

then-체인

Promise의 then 인스턴스 메서드를 호출할 때 사용한 콜백 함수는 값을 반환할 수 있습니다. 이 then에서 반환된 값은 또 다른 then 메서드를 호출해 값을 수신할 수 있습니다. 흥미롭게도 then 메서드는 반환된 값이 Promise 타입이면 이를 resolve 한 값을 반환합니다. 만약 reject 당한 값일 때는 catch 메서드에서 이 거절당한 값을 얻을 수 있습니다.

async/await

const test = async () => {
	const value = await Promise.resolve(1)
	console.log(value)
}
test()

await

await 키워드는 피연산자(operand)의 값을 반환해 줍니다. 그런데 만일 피연산자가 promise 객체이면 then 메서드를 호출해 얻은 값을 반환해 줍니다.

let value = await Promise 객체 혹은 값

async 함수 수정자

await 키워드는 async라는 이름의 함수 수정자가 있는 함수 몸통에서만 사용할 수 있습니다.

• 일반 함수처럼 사용할 수 있다
• Promise 객체로 사용할 수 있습니다.

export const test1 = async() => {
	let value = await 1
	console.log(value) // 1
	value = await Promise.resolve(1)
	console.log(value) // 1
}

export async function test() {
	let value = await 'hello'
	console.log(value) // hello
	value = await Promise.resolve('hello')
	console.log(value) //hello
}

// anync 함수를 일반 함수처럼 사용한 예
// 두 함수가 마치 동시에 실행된 것처럼 보인다.
test1()
test2() // 실행 결과 1 \\ hello \\ 1 \\ hello

// async함수를 Promise 객체로 사용한 예
test1()
	.then(() => test2()) // 실행 결과 1 \\ 1 \\ hello \\ hello

async 함수가 반환하는 값의 의미: Promise

async 함수는 값을 반환할 수 있습니다. 이때 반환값은 Promsie 형태로 변환되므로 다음처럼 then 메서드를 호출해 async 함수의 반환값을 얻어야 합니다.

asyncReturn().then(value=>console.log(value))

함수 조합...? 애리티(매개변수의 수) ...? compose pipe...?

람다.. 렌즈...?

모나드..?