Typescript

자바스크립트는 타입이 동적으로 결정이 되는 언어다. 이것의 장점이라고 한다면 자바스크립트를 처음 접할 때 배우기는 쉬울 것이다. 하지만 코드가 길어지면 유지보수하는 데 어려움을 겪을 수 있다.우리가 작성해왔던 한 달 전, 1년 전의 코드를 어떤 생각을 가지고 작성했는지

변수명 옆에 콜론(:)을 넣어서 우리가 원하는 타입을 줄 수 있다. hello 변수에 우리가 지정한 타입이 아닌 값을 할당한다면 에러를 표시한다.이렇게 타입스크립트를 사용하면 코드를 작성하는 단계에서 에러를 발생시켜 타입을 강제할 수 있게 해준다.그럼 우리는 어떤 타입

이전의 포스팅에서 타입스크립트의 기본 타입들에 대해서 알아보았다. 하지만 기본 타입만으로는 타입스크립트를 우리가 원하는 대로 다룰 수는 없다. 조금 더 목잡한 타입을 다룰 수 있어야 한다.그래서 생겨난 것이 type 키워드와 interface 키워드이다.쉽게 말하면 타

Enum 타입은 굉장히 많은 언어에서 사용한다. 하지만 자바스크립트에서는 존재하지 않는 개념이라서 나에겐 생소한 개념이다. 타입스크립트에서 이 기능을 활성화해줄 수 있다.runWork 함수의 결과가 0으로 나오는 이유는 enum을 선언할 때 순서대로 숫자가 0부터 차례

타입 추론이란, 타입을 굳이 입력하지 않아도 타입스크립트 자체에서 변수나 함수, 파라미터 등의 타입을 추론하는 것이다.예제 코드를 보자.해당 변수들에 마우스를 오버하면 우리가 각 변수들에 타입을 주지 않았는데도 타입스크립트가 알아서 추론하여 각각의 변수의 타입을 str

이전의 포스팅에서 객체를 선언할 때 as const로 캐스팅을 하면 특정한 값(구체적인 값)으로 추론할 수 있다고 했다.이번 포스팅에서 이 as에 대해서 자세히 알아보자.캐스팅에서 가장 중요한 것은 타입스크립트는 자바스크립트로 컴파일되는 언어라는 것이다. 타입스크립트에

유니온은 조금 복잡한 타입을 구성할 수 있는 기능이라고 생각하면 된다. 다른 말로 타입을 병합할 수 있는 수많은 방법 중 하나다. 타입을 병합할 수 있는 방법은 많지만 유니온을 이용해 병합하는 경우가 제일 많고, 유니온이 필요한 로직이 굉장히 많다. 그러므로 유니온

유니온과 마찬가지로 타입을 조합하는 방식인 인터섹션에 대해 알아보자.인터섹션은 쉽게 말하면 AND의 개념이다. 앞에서 배운 유니온은 OR의 개념이었다. 인터섹션의 심볼은 &을 사용한다.인터섹션은 조합된 타입들의 프로퍼티가 모두 포함이 된 새로운 타입을 생성한다.그렇다면

내로잉은 앞서 배운 타입 추론을 어떻게 가져가는 지에 대한 논리가 들어있기 때문에 매우 중요한 개념이다!!Union 타입에서 더욱 구체적인 타입으로 논리적으로 유추할 수 있게 되는 것을 의미한다.간단한 예시를 보자.위의 코드에서 stringOrNumber은 어떤 타입을

타입스크립트에서 함수는 어떻게 정의하는지 살펴보자.함수 호출 시 인자의 개수가 선언한 함수와 다르면 에러를 발생시킴함수 호출 시 선언한 타입이 아닌 인자가 입력되면 에러가 발생됨 (단, 다른 타입의 인자가 2개일 경우 첫 번재 인자만 에러가 난 것으로 표시됨)함수의 매

타입을 선언할 때 함수도 선언할 수 있다.map 함수의 콜백함수를 runner 함수의 파라미터로 받아오게 하고 싶다고 가정하자.Mapper라는 새로운 타입을 만들어서 매개변수에 함수를 넣어줘서 이 함수의 타입을 정의할 수 있다. 매개변수가 아닌 함수 이름에서 타입을 선

오버로딩이라는 개념은 다른 언어에서는 존재하지만 자바스크립트에는 존재하지 않는 개념이다. 하지만 타입스크립트에는 존재한다.파라미터를 하나만 받는 함수, 파라미터를 3개를 받는 함수를 만드는데 이것을 하나의 함수로 만들어 보자.하나의 파라미터를 입력받거나 3개의 파리미터

이 두 개념은 아직 잘 모르지만, 함수의 선언 방식에는 두 가지가 있다는 것은 알고 있다.함수의 시그니쳐는 같은데 다른 기능을 함수들이 있다고 가정해보자.statement의 경우는 함수의 매개변수 각각에 타입을 지정해줘야 한다.expression은 할당을 활용해서 각각

타입스크립트를 사용하다보면 어떤 변수, 어떤 반환값이 특정 타입인지 아닌지를 구분하는 경우가 많다. 그래서 타입을 구분하는 기능만 따로 만들어져 있는 것이 있다. 그것이 바로 type predicate이다.먼저 type predicate가 어떤 것인지 살펴보자. num

시리즈 초반에 type과 interface에 대해 알아보았다. 이번 포스팅에서는 조금 더 파헤쳐보자. 이 둘의 기능적인 차이점에 대해서 알아보자.함수에서의 선언은 이전에 살펴본 것과 같다.primitive 타입 선언union 타입 선언interface 같은 경우는 객체

자바스크립트에서 상속을 위해 extend라는 키워드를 사용한다. 이것을 타입스크립트에서도 사용할 수 있다.ISinger는 IName을 상속받는다. 따라서 ISinger로 선언된 타입은 IName의 프로퍼티도 사옹할 수 있게 된다. 어떻게 보면 이전에 살펴본 interf

이번 포스팅에서는 any, unknown, never 타입에 대해 조금 더 알아보자.앞에서 배운 any 타입을 다시 정리하자면 any 타입은 어떠한 값도 될 수 있는 타입이다.이 num 변수에 문자열 전용 함수인 toUpperCase를 사용할 수 없다. 하지마 여기서

어떠한 값을 넣어도 문제가 되지 않는 것이 문제점이다.숫자로 구성된 number 배열을 만들었다. 하지만 임의로 숫자를 문자열로 바꿔도 자바스크립트에서는 전혀 문제가 되지 않는다.타입스크립트는 명시적으로 string 타입만 넣고 싶은 배열을 생성할 수 있다.타입스크립트

튜플은 타입스크립트에만 존재하는 개념이다. members는 string 값으로만 구성된 배열이다. 어떤 값들이 있는지 어떤 순서로 되어있는지는 알 수가 없다.하지만 튜플을 사용하게 되면 어떤 값이 있어야 하고, 어떤 순서여야 하는지에 대한 타입을 선언할 수 있다. 조금

변수 taeyeon의 타입을 TName으로 선언하면 age 프로퍼티에서 에러가 나고, 타입을 TAge로 선언하면 name 프로퍼티에서 에러가 날 것이다.하지만 다음과 같은 경우를 보자.새로운 testName이라는 변수를 TName으로 선언했다. 여기까지만 보면 test

중첩된 객체의 타입은 어떻게 선언해야 할까?여기서 의문점이 생길 수 있다. identity의 타입에 있는 객체를 또 다른 타입으로 독립적으로 선언해줄 수 있지 않을까? 그리고 그렇게 했을 때와 하지 않았을 때의 차이점도 있을 수 있다.위의 코드에서 타입을 독립적으로 선

이전에 배운 optional 프로퍼티는 타입을 선언한 객체의 프로퍼티가 있어도 되고, 없어도 되는 경우를 의미했다.여기서 position 프로퍼티의 타입은 string | undefined가 되는 것을 볼 수 있다.그러면 처음부터 position 프로퍼티를 option

앞서 primitive를 intersection하면 동시에 충족하지 못하기 때문에 never 타입이 된다고 했다. 하지만 객체는 동시에 충족시킬 수 있다.intersection은 Person 타입과 Company 타입을 모두 충족해야 한다. 그래서 extension 한

타입스크립트에서 클래스를 정의하는 방법에 대해 알아보자.readonly 키워드로 선언한 프로퍼티는 값 변경이 불가능하고, 값을 불러올 수만 있다. 이것은 자바스크립트로 실행될 때는 의미없는 코드지만 코드를 작성할 때 변경하는 것을 강제로 막아준다.클래스와 interfa

자바스크립트의 클래스의 상속을 다시 살펴보자.각각의 클래스의 인스턴스를 만들어보자.Parent 클래스인 taeyeon 인스턴스는 부모 클래스지만 자식 클래스의 메소드인 sing 함수를 호출할 수는 없다. 하지만 부모 클래스(Parent)를 상속받은 Child 클래스는

추상화 클래스라는 개념은 대부분 객체 지향 프로그래밍을 다루는 언어에서 존재하는 개념이다.이 개념을 한 마디로 정리하자면 인스턴스화를 하지 못하게 막는 것이다.추상화 클래스는 class 앞에 abstract 키워드를 붙여주면 된다. 이렇게 하면 new 키워드로 Mode

객체 지향 프로그래밍에서 중요한 개념 중 하나인 제너릭에 대해서 알아보자. 함수에서의 제너릭 제너릭은 기본적으로 위와 같은 형태로 사용한다. genericWhatValue 함수를 호출할 때 제너릭 타입으로 string을 넣어줬기 때문에 선언문에서의 T는 strin

class에서 제너릭은 클래스명 옆에 제너릭 변수를 넣어주면 된다. 그리고 인스턴스를 생성할 때 제너릭 타입을 넣어주면 된다.pagination.data는 number 타입이 된다. 인스턴스를 만들 때 \[1234, 123] 배열을 넣어줘서 이 배열을 가지고 타입 추론

메소드에서의 제너릭 클래스의 제너릭과 메서드의 제너릭이 동시에 같은 이름으로 선언이 되면 메서드의 제너릭을 따라간다. 즉 DuplicatedGenericName의 T는 어디에서도 쓰이지 않는다. 따라서 헷갈리지 않도록 클래스 제너릭과 메서드 제너릭의 이름을 서로 다르