keyof 유저 인터페이스의 키 값중 하나를 불러올 때 유용하게 사용할 수 있는 keyof키워드입니다. keyof를 사용하면 유니온 타입을 사용한 것과 동일한 결과를 변수에 넣을 수 있습니다. User의 키에 없는 값을 넣으면 에러가 납니다. partial parital은 프로퍼티를 모두 Optional(선택적인)값으로 바꿔줍니다. 인터페이스에 선언한 값들 중 일부값만 넣으면 아래처럼 에러가 발생합니다. 아래와 같이 partial을 사용하면 일부만 사용해서 선언할 수 있게 됩니다. 즉 위의 인터터페이스가 아래의 인터페이스를 선언한 것처럼 사용할 수 있게 됩니다. partial이라도 선언하지 않는 키값을 넣을 수는 없습니다. Required required는 반대로 모든 값들을 필수 값으로 만들어줍니다. ..
제네릭의 사전적 정의 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주활용되는 특징입니다. 특히, 한가지 타입보다 여러가지타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭을 사용하는 이유 아래의 코드는 인자를 하나 넘겨 받아 반환해주는 함수입니다. 함수의 인자와 반환값은 모두 string으로 되어있지만 만약 여러가지 타입을 허용하고 싶으면 any를 사용할 수 있습니다. function logText(text: string): string { return text; } 이렇게 any로 한다고해서 함수의 문제가 있는것은 아니지만 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수 없습니다. (any라는 타입은 검사하지 않기때문) function logTe..
자바스크립트 ES6+ 형태의 클래스와 동일하게 클래스를 만들어보겠습니다. 그랬더니 color에 오류가 발생합니다.(js에서는 정상적으로 작동합니다) 실제 js에서의 결과 타입스크립트에서 클래스를 작성할 때 맴버 변수는 미리선언해주어야합니다. 추가로 변수의 타입도 설정해줘야합니다. 멤버 변수를 선언하지 않고 사용 할 수 있는 방법이 있습니다. 바로 접근제한자나 readonly를 사용하는 것입니다. 접근제한자 js ES6에서는 접근제한자를 제공하지 않습니다. 타입스크립트에서는 사용할 수 있습니다. public , private , protected public public은 자식 클래스나 클래스 인스턴스에서 접근할 수 있습니다. 아무것도 작성하지 않으면 기본적으로 public이 됩니다. 부모클래스의 Car의..
리터럴타입 js에서는 const는 변하지 않는 값을 선언할 때, let은 변할 수 있는 값을 선언할 때 사용합니다. 겉보기에는 js와 별차이가 없어보이는데 마우스를 변수에 올려 확인해보면 userName1은 const이기 때문에 변하지 않습니다. 그렇기 때문에 userName1의 타입은 우리가 넣어준 "Bob"이 들어가고 userName2는 let이기 때문에 변할 수 있습니다. 그래서 string이 됩니다. 여기서 userName2에 다른 타입의 값을 넣고 싶다면 그 값의 타입을 명시해주어야 합니다. 그리고 여기서 userName1처럼 변하지 않는 값을 가진 변수의 타입을 문자열 리터럴 타입이라고 부릅니다. 앞에 배운것중 enum키워드가 있는데, 문자열리터럴 타입과 type키워드를 이용하면 이와 비슷한 ..
함수 웹 애플리케이션을 구현할 때 자주 사용되는 함수는 타입스크립트로 크게 다음 3가지 타입을 정의 할 수 있습니다. 함수의 파라미터(매개변수) 타입 함수의 반환 타입 함수의 구조 타입 더하기 기능을 하는 함수를 만들면 아래와 같습니다. return 값이 없으면 void라고 적어줍니다. 선택적 파라미터(Optional Parameter) 인터페이스에서 했던 것처럼 ?를 이용해서 선택적으로 매개변수를 받을 수 있습니다.(매개변수의 타입은 지켜줘야합니다) 참고로 자바스크립트처럼 기본값(Default Value)를 넣어서 똑같이 구현할 수도 있습니다. 선택적 파라미터를 사용하면서 주의해야할점은 해당 매개변수는 필수 매개변수의 뒤쪽으로 와야합니다. 만약 선택적 매개변수가 앞으로 온다면 매개변수를 1개만 받았을 ..
인터페이스 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다 객체의 스펙(속성과 속성의 타입), 함수의 파라미터, 함수의 스펙(파라미터, 반환타입 등), 배열과 객체를 접근하는 방식, 클래스 아래처럼 js에서는 객체를 정의하여 해당값에 접근할 수 있었는데 타입스크립트에서는 해당 객체의 데이터의 타입을 정의해줘야합니다. 즉 객체를 정의하고 싶을때는 인터페이스를 사용합니다. 생성방법 인터페이스는 먼저 앞에 Interface 타입이라는 것을 명시하고 일반적인 객체를 만들듯 만들어줍니다. 대신 인터페이스 안에 있는 프로퍼티(속성)에는 값이 아닌 타입이 들어갑니다. 그리고 객체를 만들 때 그 객체의 타입을 방금 만든 인..
number/string/array 기존 JS에서 사용했던 변수들을 TypeScript로 만들어 보겠습니다. 오른쪽이 js이고 왼쪽이 ts입니다. ts에서는 기존의 js에서 선언했던 변수에 타입만 명시해주면 됩니다. 만약 string만 들어가게 만들었는데 number타입을 넣으려고 한다면 어떻게 될까요? 오류가발생합니다. TypeScript를 사용하면 이렇게 특정변수 또는 상수의 타입을 지정할 수 있고 사전에 지정한 타입이 아닌 값이 설정 될 때 바로 에러를 발생시킵니다. tuple tuple은 배열과 비슷한 모양입니다. 인덱스별로 서로 다른 타입의 데이터를 넣을 수 있습니다. 타입의 순서를 미리 결정해 놓기 때문에, 올바르지 않는 데이터를 넣으면 오류가 발생합니다. void/never void : 함수..
