JavaScript 기반 언어로, JavaScript는 클라이언트 측 스크립팅 언어인데 비해 TypeScript는 객체 지향 컴파일 언어이다.
JavaScript의 모든 기능을 가지고 있다.
JavaScript의 동적 타입으로 인한 문제를 해결한다. 다음과 같이 타입을 설정할 수 있다.
JavaScript
function add(a, b) {
return a + b;
}
TypeScript
function add(a: number, b: number) {
return a + b;
}
IndexPage라는 변수의 타입 설정: 리액트에서 제공해주는 함수형 컴포넌트 타입
import React, { FunctionComponent } from 'react'
import Text from 'components/Text'
const IndexPage: FunctionComponent = function () {
return <Text text="Home" />
}
export default IndexPage
어떤 클래스나 함수에서 사용할 타입을 미리 정해놓는 게 X, 그 함수를 사용하면서 정함.
// Generic 사용 안 한 경우 스택에 숫자 5들어있는 상태에서 모르고 문자 'a' 넣으려고 하면 문제 발생.
class Stack {
private data: any[] = []
constructor() {}
push(item: any): void {
this.data.push(item)
}
pop(): any {
return this.data.pop()
}
}
// DataType: Generic 사용하여 Stack 만듦
class Stack<DataType> {
private data: DataType[] = []
constructor() {}
push(item: DataType): void {
this.data.push(item)
}
pop(): DataType {
return this.data.pop()
}
}
// Generic 사용시에 다음과 같이 원하는 타입 지정
const stack = new Stack<number>()
// 이제 스택에 숫자만 넣을 수 있음
리액트에서 함수형 컴포넌트 타입에 Generic을 사용하면 컴포넌트가 받는 props에 어떤 게 있고 타입은 뭔지 정해줄 수 있음. 그럼 해당 컴포넌트를 호출하는 쪽에서 정해진 타입에 맞는 데이터만 넘길 수 있게 됨.
import React, { FunctionComponent } from 'react'
type TextProps = {
text: string
}
const Text: FunctionComponent<TextProps> = function ({ text }) {
return <div>{text}</div>
}
export default Text
참고
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/lecture/76337?tab=note&mm=close
https://velog.io/@pluviabc1/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90