Crafting My Future with Code

함수 타입

호출 시그니처가 없다라는 에러가 발생했습니다.

(호출 시그니처  = 함수 타입)

한번만 사용하여 굳이 interface로 만들 필요가 없다면

요로코롬 만들면 됩니다.

인덱스 가능 타입

주로 배열데이터 타입을 지정합니다.

배열

item의 값은 number 타입이며, 그 속성의 값은 string 이다. 

라고 작성을 한 Fruits 인터페이스 입니다.

객체

위에서 만들어진 User interface는 

[prop : string] : unknown 가 있습니다

이는 대괄호 표기법에 string 타입으로 prop를 받으며, 값의 타입은 unknown입니다.

prop에 따라 값의 타입은 바뀌기 때문에 unknown입니다.

Jplum 이라는 객체에 대괄호 표기법 (문자 데이터로)인덱싱하여  값을 할당했습니다.

다른 예제

마지막의 logValues에서 에러가 발생했습니다.

Jplum은 User 인터페이스의 구조에 맞게 잘 작성 되어있습니다.

에러가 뜨는 이유는..?

logValues 에는 Payload 형식이 들어가야 합니다.

Payload는 인덱스 가능한 타입의 구조이지만 User는 그렇지 않습니다.

User 인터페이스도 이제 인덱스 가능한 타입으로 만들어져 오류가 사라졌습니다.

이렇게 인덱스가 가능한 타입인지 아닌지에 따라서 사용할 수 있거나 없습니다.

인덱스가 가능한 타입의 객체를 요구 할 경우 그에 맞게 인덱스가 가능해야 합니다.

정리하면

logValues는 payload 라는 인수를 받습니다. payload는 Payload의 구조를 가지고 있습니다.

(Payload는 인덱스를 사용할 수 있습니다.)

logValues 에 들어갈 인수(payload)는 인덱스가 가능해야 하며, User 는 인덱스가 불가능합니다.

Jplum은 User 인터페이스의 구조이며, logValues에 Jplum을 넣었을 때 에러가 발생하였습니다.

(User 인터페이스는 현재 인덱스가 불가능한 상태)

User 인터페이스에 인덱스 시그니처 내용을 추가하여 인덱스가 가능하게 만들었고

에러가 사라졌습니다.

interface

interface를 통해서 객체 속성의 타입을 지정할 수 있으며,

이름을 지정해서 다른곳에서 사용할 수 있습니다.

선택적 속성 

콜론(:) 앞에 ? 를 붙임으로써 선택적 속성으로 사용할 수 있습니다.

있어도 , 없어도 상관 없습니다.

읽기 전용 속성

앞에 readonly를 붙임으로써 읽기전용속성 이 됩니다.

읽기 전용이 되어 할당할 수 없습니다.

타입 가드

위의 코드는 현재 에러가 뜬 상태입니다.

Ts의 입장에선 h1El은 document.querySelector 로 찾지 못할 경우도 생각을 하고있습니다.

그래서 에러가 뜬 상태입니다.

그렇다면 Element  또는 HTMLHeadingElement 를 타입 단언을 해준다면

에러가 사라지게 됩니다.

하지만. 이는 해결 방법이 아닙니다.

실제로 동작하는 홈페이지에서는

위와같이 에러가 뜹니다.

코드상에서의 에러만 지웠을뿐 실제 결과는 null이며, 잘못된 단언입니다.

document.querySelector을 통해 찾지 못한다면 null이 반환됩니다.

if문에 h1El을 넣음으로써 null일 경우 if문은 동작하지 않습습니다.

결국 logText는 동작하지 않지만 에러가 출력되지 않습니다.

이때 If의 조건문을 타입 가드 라고 합니다.

(어찌보면 Ts와 관련이 없어보이기도 합니다.)

다른예제

타입단언 이란?

 - 딱 잘라 말함..?

잘못 사용하면 Any처럼 TypeScript를 쓰는 이유가 사라질 수 있습니다.

위의 사진을 보면  HTMLBodyElement | null 로 되어있습니다.

JavaScript에서 document.qserySelector는 선택자를 찾지 못하면 null을 반환합니다.

Ts는 못 찾을수도 있다라는 가정을 합니다.

하지만 홈페이지는 보통 body 태그가 있습니다.. 우리는 알지만 Ts는 코드를 읽고 추론을 하기 때문에

없다라고 인식할 수 있습니다.

여기서 우리는 '아니야 있어' 라고 딱 잘라서 말할수 있는데 이때 사용하는 것이 타입 단언입니다.

아래는 사용 예시입니다.

document.qserySelector 를 통해서 찾은 값은 null이 아닌 HTMLBodyElement Ts에게 라고 말을 해주며

textContent를 사용할 수 있게 됩니다.

두번째 예시입니다. (잘못된 사용방법의 예시입니다.)

null 또는 undefined 일 수 있기 때문에 x가 에러가 뜹니다.

여기서 단언을 사용한다면..?

하지만.. null이 들어갈 수 있습니다.

결국 타입 관련 에러가 나옵니다.

위와 같이 잘못된 단언을 하게될 경우,

코드상에서 에러가 발생하지 않기 때문에 실행 하기 전까지 알 수 없습니다.

올바른 예시 입니다.

코드상에 문제는 없습니다.

isNumber가 true라면 toFixed를 사용하며, 

false라면 uoUpperCase를 사용하기 위한 코드입니다.

하지만 Ts는 에러로 인식합니다..

string에 toFixed를 사용할 수 없으며, number에 toUpperCase를 사용할 수 없습니다.

우리는 코드상에 문제가 없다라는걸 알고 있기 때문에

타입 단언을 사용해줍니다.

위의 코드처럼 Ts가 추론을 하지 못한다면.?

우리는 확신하고있기 때문에 위와 같이 타입단언을 사용하면 됩니다.

Non-null 단언 연산자

! 를 사용해서 null이 아니라고 단언을 해주는 방법도 있습니다.

위의 사진또한 마찬가지로 !를 사용할 수 있습니다.

마지막 코드

!는 null 이나 undefined 일 경우에 사용합니다.

위의 코드는 number, string이므로 사용할 수 없습니다.

할당 단언

값이 할당되지 않아서 발생하는 에러 입니다.

: string 을 빼고 본다면 Js의 관점에서는 문제가 없는 코드입니다.

하지만 Ts에서는 값을 할당하지 않았다고 에러로 알려주고 있습니다.

!를 붙여 할당이 된 것 처럼 할 수 있습니다. (Non-null 과는 다릅니다.)

이것 또한 잘 생각하고 써야할 것 같습니다..

다음에는 타입 가드에 대해서 정리 해보겠습니다.

타입 추론이란 TypeScript에서 자체적으로 타입을 판단해주는 경우 입니다.

코드에서 Type을 사용하는 부분을 최소화 해서 TypeScript 를 작성해 봅시다.

타입을 엄격하게 사용해 에러를 줄이기 위해서 사용하는 TypeScript

하지만 타입추론을 통해 JavaScript처럼 사용하면 무슨 의미가 있겠나 싶었습니다.

하지만 TypeScript에서의 너무 강한 타입 규칙은, 생산성을 떨어트린다고 합니다.

그렇다고 지나친 유연성은 JavaScriptd와 다를바가 없습니다.

그렇기에.. 두마리 토끼를 다 잡은게 바로 타입 추론 기능

이제부터 타입 추론에 대해서 알아보겠습니다.

1. 초기화된 변수

 아래의 num 변수는 타입을 지정하지 않은 상태입니다.

num 이라는 변수에 자동으로 number 형식이 지정되어 있습니다.

2. 기본값이 설정된 매개 변수 , 3. 반환값이 있는 함수

위의 그림에서는 타입이 지정되지 않은곳이 두군대가 있습니다.!

매개변수 b와 리턴값이 타입이 지정되지 않았습니다.

하지만 위의 초기화된 변수처럼  b 또한 자동으로 숫자 타입으로 인식이 되며,

리턴값 또한 a라는 number타입과 b의 합산이기 때문에

자동으로 number타입이 됩니다.

4. 구조분해 할당에도 해당된다!

1. Any

자바스크립트 코드를 작성할 때 처럼 아무 타입이나 가능합니다.

다른 타입에 도 문제없이 사용이 가능합니다.

가능한 사용을 자제하는게 좋아 보입니다... 타입스크립트를 사용하는 의미가 없어지는 것 같습니다.

2. Unknown

unknown타입은 아직 어떠한 타입을 사용할지 모르는 경우에 any대신 사용이 가능합니다.

3. Tuple

Array와 비슷해 보이나, 정확한 배열데이터의 개수를 지정할때 사용합니다.

Array 사용방식

Tuple 사용방식

다른 사용 방식

위의 사진과 같이 사용시 각 배열의 아이탬의 개수는 제한되나

그 배열을 담는 개수에는 제한이 없습니다.

(추가)

순서도 못바꿈..

4. void

TypeScript에서는 반환하지 않는경우에는 void를 사용해야합니다.

undefined 안댐..

5. Never

아무것도 할당할 수 없음

즉! 타입을 정의해

에러 메세지에서 never가 보인다면 타입 지정을 잘못하지 않았는지 확인할 것

never는.. 잘 사용 안한다고는 들었지만

정리하기에도 애매하네요... 나중에 정리할 일이 생긴다면 추가 정리 하겠습니다.

6. union

복수의 타입을 사용하고자 할 때 | (버티컬 바) 를 사용해서 지정합니다. (js 의 ||(or) 과 비슷)

7. intersection (js의 &&(and)와 비슷)

두가지 다 사용해야 합니다.

아래는 사용하지 않을 경우 뜨는 에러.

이번에 미니 프로젝트를 진행하면서.. 정말 타입 오류가 많았습니다..

진작에 타입스크립트 공부를 해둘껄 하며 후회했습니다..

더 늦기전에 해야지..

TypeScript 의 Type

1. number 

 - number에는  정수, 소숫점, Infinity , NaN 등이 해당됩니다.

2. boolean

 - 그냥 true, false입니다.

3. null / undefined

 -  null의 경우에는 초기화해야 하며, 할당할 수 있는 값 또한 null만 가능합니다..

    위 두개를 사용하는 일은 거의 없다고 합니다.

4. Array

 - 사용법은 크게 다르지 않으며, 배열의 데이터에 어떠한 타입이 들어갈지 정해줍니다.

 - 마지막의 경우 Union 타입이라고 부르며, 사용할 타입을 여러개 선언할 수 있습니다

5. object

object type은 엄격하지 않아서 잘 사용하지 않습니다.

객체의 경우 왼쪽과 같이 속성과 타입을 지정할 수 있습니다. 그리고 위의 userA, B는 같은 타입을 사용하고 있습니다.

타입이 같은 경우 오른쪽과 같이 interface를 사용해서 간단하게 재사용이 가능합니다.

6. function

함수는 매개변수의 타입 그리고 return의 타입을 지정합니다.

지정하는 방식은 두가지 입니다.

아래의 방법이 훨씬 편한 것 같습니다.

a는 에러가 없지만 b는 에러가 있습니다.

b는 object 타입만 담을수 있는데 calc함수의 리턴값은 number이기 때문에 에러가 발생했습니다.

return이 없는경우 void를 사용합니다.

js는 return 이 없을때 undifined이지만 TypeScript에서는 void를 사용합니다.

다르게 사용하니 잘 구분지어야 합니다.

나머지는 타입 2에서.. 

https://j-plum.tistory.com/57

1. 변수명 옆에 콜론( : ) 을 붙여 타입을 지정한다.

아래와 같이 작성후 실행을 했습니다.

작성했던 ts코드가 js로 ..