Typescript (17) 썸네일형 리스트형 [Typescript] call signatures call signatures- 함수 등에서 마우스를 올려놨을 때 타입이 보이는 것.- 인자(arguments)의 타입, 함수의 반환 타입 등을 알 수 있다. 함수를 작성하기 전에 타입을 먼저 지정하여 사용할 수 있다. [Typescript] never never 타입은 return 값이 없을 때 쓰인다.return 값이 있다면 오류를 발생시킨다. 이 타입은 오류를 전달할 때 사용될 수 있다. 좀 더 응용한다면, 타입을 지정해도 올바르게 작동하지 않는 경우 오류를 전달하는데 사용될 수 있다.아래의 경우 string, number가 아닌 항목은 들어오면 안되고, 들어온다고 해도 오류를 전달한다. [Typescript] readonly 데이터를 수정할 수 없게 하기 위해서 readonly를 넣을 수 있다.데이터의 불변성을 유지시키는 map, filter 등은 사용할 수 있으나 push처럼 불변성을 해치는 것은 사용할 수 없다. Typescript: axios 사용, 함수의 type axios로 데이터를 불러와도 어떠한 형태의 데이터가 오는지 확언할 수 없기 때문에 아래의 data 항목에는 any가 할당된다. 오류가 발생하지는 않지만 Typescript를 사용하는 올바른 예시라고는 할 수 없다. 따라서 promise를 반환한다는 것을 알려주고 Todos 배열로 들어오는 것을 알려줘야 한다. 아래의 get으로 들어오는 데이터는 Todos 배열로 들어오는 것을 알려줬다. 1) 함수의 결과를 알려주는 promise는 없어도 data의 타입은 Todos[]로 들어간다. 2) axios의 get 요청으로 불려온 Todos[]는 없으면 data는 any가 된다. 함수의 타입을 모르는 경우 등에 유틸리티를 이용하여 알아낼 수 있다. Promise를 반환하는 경우 특히 유용하게 사용될 수 있을 것.. Typescript: Redux Toolkit store type Redux Toolkit을 사용하면서 Dispatch와 useSelector를 사용하면 빨간줄로 확인할 수 있는 오류는 발생하지 않았다. 그러나 데이터는 생성하지 않고 오류를 발생시킨다. 알고보니 Dispatch와 useSelector를 사용하는데 store에 type을 지정해야 했다. Typescript는 모든 오류를 빨간 줄로 알려줄 것이라는 생각은 하지 않아야 겠다. export type AppDispatch = typeof store.dispatch; export const useAppDispatch: () => AppDispatch = useDispatch; export type RootState = ReturnType; export const useAppSelector: TypedUseSele.. Typescript: Type 선언 Type로 선언해서 객체의 타입을 미리 지정할 수 있다. type Todo = { id: string; title: string} type Todos = Todo[] 사용할 때는 Todo["id"]로 타입을 지정하면 선언된 Type 내부의 key에 따라 정의될 수 있다. * 주의사항 : Json server를 사용한다면 id값은 꼭 string으로 지정해야 한다. 버전이 업그레이드 되면서 id값을 number로 지정하는 기능은 지원하지 않게 되었다. Todos로 선언할 때 key값에 대해 고민했는데, 넣지 않아도 되는 사항이었다. 의외로 해법은 간단할 수 있다는 것을 실감하고 있다. type, interface type - 모든 타입을 선언할 수 있다. - 확장 불가능하다. - 선언적 확장이 불가능하다. interface - 객체에 대한 타입을 선언할 수 있다. - 확장 가능하다. - 선언적 확장 : 같은 이름으로 선언하면 자동으로 확장된다. TypeScript - type과 interface의 차이 TypeScript에서 type과 interface는 비슷한 역할을 하는 것 같은데, 어떤 경우에는 type을 사용하는 게 좋고 어떤 경우에는 interface를 사용하는 게 좋은지 궁금해서 알아보았다.extends 키워드를 이용해서 velog.io 이전 1 2 다음
