이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 기본적으로 Promise에서 제네릭을 이용하는 것은, 제네릭 타입을 적용하고 그 타입을 돌려받는 것이라고 생각하면 편하다. function fetchItems() { const items = ['a', 'b', 'c']; return new Promise(function(resolve) { resolve(items); }); } 이런 Promise 사용 함수가 있다고 해 보자. 그러면 이 함수는 위와 같이 Promise의 타입을 가진다. 이는, return new Promise의 타입을 알 수 없기 때문이다. 그래서, function fetchItems(): Promise { const items: string..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 제네릭이란, 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 아래 코드를 보자. function logText(text: T):T { console.log(text); return text; } logText('hi'); logText에서 text에 대해 T로 타입을 설정해줬지만, 정작 이 T가 무엇인지에 대해서는 아는 바가 없다. 실제로 프리뷰를 보면, (text: "hi"): "hi" 로 되어있는 것을 볼 수 있다. 그래서, 함수를 불러올 때 타입을 지정해줘야 한다. logText에 명시적으로 string 타입을 넘기겠다고 선언했으므로, logText 안에서 처리하는 텍스트에 대한 타입은 전부 위에..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. enum은 자바스크립트에는 없는, 타입스크립트 고유의 기능으로, 문자열 열거형이다. enum Shoes { Nike = "nike", Adidas = "adidas", Sth = "sth", // 값을 지정하지 않는다면 0부터 시작. Shoes.Nike = 0, Shoes.Adidas = 1, ... } const myShoes = Shoes.Nike; console.log(myShoes); // 'nike' Shoes라는 enum을 만들었다. 그 안에 Nike, Adidas, Sth를 지정하였다. Nike, Adidas, Sth와 같이 그냥 콤마로만 구분되어있고 어떠한 값도 지정되지 않은 상태가 기본 형태이다..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 1. Union Type 타입은 연산자를 이용해서 정의할 수도 있는데, 이를 통해 한 파라미터에 두 가지 이상의 타입을 정의할 수 있다.이를 union type이라 한다. function logMessage(value: string | number) { if (typeof value == 'number') { value.~~~ } if (typeof value == 'string') { value.toString(); } throw new TypeError('value must be string or number'); } logMessage("hello"); logMessage(100); 파라미터를 보면 str..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. type MyString: string; const str: MyString = 'hello'; string 타입에 MyString이라는 별칭을 부여했다. 타입은 인터페이스 뿐만 아니라 다른 곳에다가도 쓸 수 있다. 그리고, 타입을 부여할 수 있는 모든 곳에 별칭을 부여할 수 있다. 타입 별칭은, 새로운 타입 값을 하나 생성하는 것이 아니라, 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것이다. 이제 두 가지가 어떤 차이점이 있는지, VSCode의 프리뷰로 비교해보자. 이렇게 보면 큰 차이는 보이지 않지만, 엄연히 두 방법은 차이점이 있다. 인터페이스는 객체에 들어갈 속성에 대한 타입을 정의..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 인터페이스란, 어떠한 객체가 이러이러한 속성(property)를 가진다고 선언하는 것이다. 여러가지 경우에 활용할 수 있으며, 그 예시들을 하나씩 들어 볼 것이다. 1. 기본 틀 및 변수에 인터페이스 활용 interface User { age: number; name: string; } const steadily: User = { age: 26, name: '상민', } User라는 인터페이스를 만들어 줬고, 그 안에 age와 number에 대해 각각 number, string의 타입을 정의해 줬다. 이후에 선언한 steadily 변수는, User 타입을 받아왔기 때문에 무조건 상호간 약속한 규칙에 따라서 ag..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입스크립트에서 함수는, 자바스크립트에서 만큼이나 아주 많이 쓰이기 때문에 꼭 제대로 알아둬야 한다. 함수에서도 또한 타입을 정의하는데, 크게 세 가지 방식으로 타입을 정의한다. 1. 함수의 파라미터에 타입을 정의하는 방식 function sum(a: number, b: number) { return a + b; } sum(10, 20); 가장 일반적인 방식이다. VSCode에서는 이렇게 각 파라미터에 타입을 지정해주면 반환값에 대해서도 알아서 인식해서 타입을 지정해주는데, 원래는 반환값 타입도 지정을 해줘야 한다. 2. 함수의 반환값에 타입을 정의하는 방식 function sum(): number { retu..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입스크립트에는 여러가지 타입이 있다. 이 타입들에 대한 개념은 필수인데, 그 이유는 변수 지정을 할 때 타입을 꼭 지정해줘야 하기 때문이다. 아래 코드에 주로 쓰이는 타입들을 정리해봤다. 1. 자바스크립트에서는 const str = 'hello' 와 같이 지정했다면, 타입스크립트에서는 const str: string = 'hello' 와 같이 정의한다. 2. 타입스크립트에서 배열은 크게 두 가지 방식으로 정의할 수 있는데, 첫 번째는 타입을 Array으로 정의하는 것이고, 두 번째는 타입[] 으로 정의하는 것이다. let arr: Array = [1, 2, 3]; let arr2: number[] = [1, ..

const num = 2; const numObj = { num: 2 }; 이 코드를 보면, num 변수에는 2가 들어있지만, numObj에는 { num:2 } 오브젝트가 메모리에 들어 있는 주소인 참조값이 할당된다. 예를 들어.. {num:2} 오브젝트의 주소가 x123이라고 한다면 x123이 할당된다는 것이다. 배열로 연결해서 생각해 보자. const array = [ { id: '1', count: 0 }, { id: '2', count: 0 }, ]; 여기서 생성된 오브젝트는 id가 1인 것, id가 2인 것, 그리고 배열 자체의 오브젝트 이렇게 해서 총 3개의 오브젝트가 생성된다. 그렇다면, const array = [ { id: '1', count: 0 }, { id: '2', count: 1..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 첫 번째 장점: 에러의 사전 방지 이러한 자바스크립트 코드가 있다고 해 보자. 이런 코드는, 제대로 정의가 되었는지, 오류가 없는지 등을 브라우저를 실행해야지만 확인할 수 있다. 반면에 이렇게, JSDoc 방식으로 타입 정의를 하게 되면 response.를 쳤을 때 뒤에 이런 식으로 지정해둔 형태를 사용할 수 있게 된다. 34행의 response.address.city의 경우, cit 이런식으로 의도적으로 오타를 작성한다면 자바스크립트에서는 별다른 alert가 없지만 타입스크립트에서는 있지 않은 속성(property)이라는 오류를 코드 상에서 띄운다. 이것이 타입스크립트가 자바스크립트에 비해 가진 장점이라고 할..