import {Input} from 'antd'

export default function App(){
	const inputRef = useRef<Input>(null);
    return (
    	<Input ref={inputRef}/>
        )
    }

라고 쓰면 다양한 오류가 발생한다.

 

import {Input} from 'antd'
import type {InputRef} from 'antd'
export default function App(){
	const inputRef = useRef<InputRef>(null);
    return (
    	<Input ref={inputRef}/>
        )
    }

라 쓰면 된다.

 

출처 : https://stackoverflow.com/questions/72577119/type-a-is-not-assignable-to-type-b-in-typescript-with-antdesign

 

Type A is not assignable to type B in typescript with antdesign

Hi guys I was writing this code in typescript with using ant design and I got this issue (TS2322). I wanted to use 'Input' from 'Ant Design' and set the first value as null. After that I was gonna ...

stackoverflow.com

 

 

이 분도 같은 강의 들으면서 deprecated나,  unused된 사용법 때문에 질문 하신것 같다.(코드가 똑같다.)

 

그 강의가 리액트 강의를 한번에 들을 수 있어서 장점이지만, 보다보면 최신 버전에서 바뀐게 많고, 버전 병기가 안되어 있어서, deprecated나 unused된 부분을 고치면서 듣는게 힘들다.

 

뭐 이런 부분에 대해 찾아가면서 공부하는 것도 공부의 일환이지만,

 

초보입장에서 따라치면서 배우는데, 빨간줄이 보이고 취소선이 보이면 당황스럽다.

 

직접적으로 질문을 할수도 없고, 강의에 대해서 최신버전 업데이트가 안 보여서 최신버전을 원하는 사람에게는 비추하고 싶은 강의가 되었다.

  • 설치하다보면 Storybook 명령어가 실행 안될때가 있다.
  • 그 이유는 에러로그를 쳐보면 package.json의 type이 module이라 생기는 문제이다.
  • 그래서 이 부분을 commonjs로 바꿔주거나 삭제해주면 되다.
  • 그리고 스토리북을 실행해보면 스토리북 화면이 안보이고, 일반 react 실행했을때 화면이 뜨는 경우가 있다.
  • 그때는 rm -rf node_modules/.cache 를 해주면 된다.
  • 아니면 --no-manager-cache 라는 flag를 줘서 캐슁된걸 사용하지 못하게 하면 된다.

1. Union Type

function combine(input1 : number|string,input2 : number|string){
    // union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
  // 그안에 무슨 타입이 있는지 몰라서 경고 문구가 나온다.
    //const result = input1 + input2;
    let result;
    if ( typeof input1 === 'number' && typeof input2 === 'number'){
        result = input1 + input2;
    } else {
            result = input1.toString() + input2.toString();
  }
    return result
}
const combineAges = combine(20,36);
  • 서로 다른 종류의 값을 사용할 때 사용하는 타입
  • union type으로 했을시, 타입스크립트에서는 여러개의 타입이 있는 사실만 알지,
    그안에 무슨 타입이 있는지 모른다.
  • 그러므로 union 타입을 썼을 때, 다른 타입의 메소드를 쓸려면 타입가드로 타입스크립트에 무슨 타입인지 알려줘야한다.

2. Literal type

  • literal의 사전적 정의는 정확한이다. number string같이 넓은 범위의 타입을 지정하는 것이 아닌 특정 데이터 변하지 않는 데이터를 지정하는 것이 Literal type이다.
  • 추가적인 공부 : Template Literal https://toss.tech/article/template-literal-types

3. Type aliases

  • 사용자가 지정한 타입을 만들어준다.
  • 자주 쓰이는 union type들을 타입 별칭으로 동일한 유형을 설정 해줄수 있다.
type 타입별칭 = 타입1 | 타입2 | 타입3 ... | 타입N

4. function type

  • 함수에 매개변수에 type을 설정하는 것 뿐만 아니라, return되는 반환값에도 설정이 가능하다.
function add(n1 : number, n2: number) : number {
        return n1+n2
}
  • 타입스크립트가 추론이 가능한 반환 타입이면, 반환 타입을 명시하는 것보다. 타입스크립트가 타입을 추론하는게 좋다.
  • 아무것도 반환하지 않을때에는 void 로 한다.
  • undefined 라는 타입이 타입스크립트에는 존재하지만, 함수에서 반환문이 없으면, 기술적으로는 undefined 가 되지만 반환타입에는 void를 써야한다.
  • 만약 함수에서 return 으로 아무 반환값을 주지 않는 것을 반환할때에는 undefined 를 함수타입으로 쓸순 있지만, 이때에도 void 도 적용이 가능은하다.

5. functions as type

// Bad situation
function add(a : number, b: number) : number{
    return a+b;
}
let combine;
combine = add;
console.log(combine(5,3)); // 8
//cursor on combine : combine type is any;
combine = 5;
// therefore combine can insert any type
  • 위와 같은 상황에서 함수를 할당했을때, 변수에는 별다른 타입을 병기하지 않았기 때문에 any 타입이 되고, 우리가 원치 않는 타입으로 변화할수가 있다.
let combine : Function;

let combine : (a:number,b:number)=> number;
  • 해결방법은 2가지 이다.
  • 첫번째는 Function 타입이라고 명시하는것이다.
  • 하지만 이 방법은, 어느 함수가 와도 되므로, 좋지 않은 방법이다.
  • 두번째는 함수형태의 타입을 지정해주는 것이다.
  • 화살표 함수와 비슷하게, 인수로 들어오는 타입과 return 되는 타입을 명시해주면 된다.
  • 매개변수는, 실제 함수의 매개변수 이름과 동일할 필요가 없다.
  • 위와 같은 구조의 함수 모양일때에만 할당할수 있게 된다.

6. callback

function addAndHandle(n1 : number, n2 : number, cb : (num :number)=>void){
        const result = n1 + n2;
      const notUsed = cb(result);
}

addAndHandle(10,20,(result)=>{
    console.log(result) 
    return result})
  • 콜백함수 의 타입을 결정지어, 미리 콜백함수의 인자값으로 무엇으로 들어오고, 반환되는지 알수 있는 이점이 있다.
  • 그리고 반환하는 타입에 void가 있는데, return 되는 값이 있는데 괜찮다.
  • 그 이유는 return 타입을 void로 함으로서, 이 함수의 반환값을 쓰지 말라고 명시적으로 되어있고
  • 반환된 값 또한 void 타입이기 때문에, 다른거와 쓸 수 없게 된다.

7. unknown Type

  • any와 다르게 어떤 값이 들어올지 모를때 사용할수 있다.
  • any는 어떤 값이여도 상관이 없는거고,
  • undefined는 어떤 값이 들어올지 모르고, 나중에 타입을 정할때 사용이된다.
  • 그러므로 undefined를 할당한 변수는 메소드나 변수등에 아예 접근이 안된다.
  • 이 undefined를 해결을 할려면, typeof와 같은걸로 타입가드를 통과해야지만 사용을 할 수 있다.

8. never Type

function generateError(message : string, code : number) : never{
      throw {message : message, errorCode : code }
}

generateError('An error occurred',500)
  • 절대 리턴값을 절대로 내보내지 않거나 항상 오류를 출력하는 타입일때 never Type을 쓴다.
  • error를 thorw 하거나 무한반복문이 걸렸을때와 같이 아무값이 절대 반환이 안될때 사용한다.

'프로그래밍언어 > Typescript' 카테고리의 다른 글

타입스크립트 타입  (0) 2022.07.10
타입스크립트 타입 vs 자바스크립트 타입  (0) 2022.07.04
TS 공부  (0) 2022.05.12

자바스크립트 typeof는 런타임 중에 에러를 체크한다.

 

타입스크립트는 타입을 컴파일 중에 체크를 해 에러를 미리 방지해준다.

 

'프로그래밍언어 > Typescript' 카테고리의 다른 글

[TS] Advanced Type  (0) 2022.07.13
타입스크립트 타입  (0) 2022.07.10
TS 공부  (0) 2022.05.12

1. ts에 대한 타입은 type이나 interface를 통해 지정이 가능하다.

2. 만약 객체의 프로퍼티가 나중에 존재하거나 그럴때에는 선택적 프로퍼티인 ?을 넣어서 선언을 해준다.

3. 배열은 타입[] 으로 선언을 해준다.

4. Element의 subset이 HTMLElement이다.

5. 함수의 리턴값이 여러종류일 때 제너릭을 이용해서, 문제를 해결할 수 있다.

6. Map의 get은 선언한 타입이거나 undefined가 올 수있다. 그러니 널병합연산자로 undefined를 제거해줄수 있다.(부정확)

7. interface는 extends을 통해 확장이 가능하고, 이것은 type일때에는 &와 비슷하다.

8. interface는 여러번 정의가 가능하고, 그럴때마다 프로퍼티가 병합이 된다.

'프로그래밍언어 > Typescript' 카테고리의 다른 글

[TS] Advanced Type  (0) 2022.07.13
타입스크립트 타입  (0) 2022.07.10
타입스크립트 타입 vs 자바스크립트 타입  (0) 2022.07.04

+ Recent posts