반응형

Web-Frontend/TypeScript 3

[TS] 타입스크립트의 특이한 타입 (any, unknown, never)

any 아무 타입이나 될 수 있다는 뜻으로 타입의 보호를 받지 않기를 원할 때 사용 비어있는 값을 쓰면 기본적으로 any가 됨 자주 사용하는 것은 권장되지 않음 let a = [] // a는 any 타입 const a: any[] = [1, 2, 3] const b: any = true a + b // 오류가 나지 않는다. unknown 변수의 타입을 미리 알지 못할 때 사용 어떠한 작업을 할 경우 해당 변수의 타입을 먼저 확인한 뒤 사용해야함 let a: unknown let b = a + 1 // 에러 발생 (타입확인 필요하다.) // 사용할 때 마다 변수 타입을 지정해야한다. if(typeof a === 'number'){ let b = a + 1 } if(typeof a === 'string'){..

[TS] 타입스크립트 객체 프로퍼티 타입 지정 (optional, readonly)

타입스크립트를 사용해서 객체 프로퍼티의 타입을 지정할 때 쓸 수 있는 특이한 기능들에 대해 알아보자. ? (Optional) ?는 선택적인 프로퍼티의 타입을 정의하는 단축어로 해당 타입이거나 undefined라고 해주는 것과 동일한 의미이다. type Player = { name: string, age?: number, } const jieun : Player = { name: ‘jieun’, } const coll : Player = { name: ‘coll’, age: 20, }​ age?: number는 age: number | undefined와 같은 의미이며 따라서 위와 같이 age 값을 갖지 않는 객체를 만들 수 있는 것이다. readonly readonly는 요소들을 읽기 전용으로 만들 때 ..

[TypeScript] input onChange 타입 오류 해결

styled-component와 antd로 회원가입 기능을 구현하던 중 input 태그의 onChange 속성에서 타입 오류가 발생하였다. 타입이 안맞아서 생기는 오류인것 같았지만 해결책을 찾을 수 없어 몇 시간 동안이나 구글링을 하며 삽질을 했다. 그러다 결국 에러메세지를 자세히 보고 해결 방법을 알게되었다. onChange 함수의 타입을 새롭게 정의해주기 위해 위와 같이 InputProps라는 타입을 만들고 onChange의 타입을 에러메세지에 나온대로 정의해주었다. 그리고 그것을 CustomInput의 props로 전달해주었다. 그 결과 에러가 해결되었다.

반응형