정적 타입 체커들을 통해 코드 실행 전에 타입 문제를 찾아내고, 자동완성과 같은 기능을 추가해서 개발자의 작업 흐름을 개선한다.
따라서 큰 프로젝트에서는 PropTypes 대신에 Flow 또는 TypeScript를 사용하는 것이 좋다.
페이스북에서 개발한 Javascript 정적 타입 체커이다. 보통 React와 함께 사용한다.
Flow를 사용하기 위해서는 아래 요구 사항을 만족 해야 합니다.
- Flow를 프로젝트 의존성에 추가합니다.
- 컴파일된 코드에서 Flow 문법이 제거되었는지 확인합니다.
- 타입 주석을 추가하고, 타입을 체크하기 위해 Flow를 실행합니다.
최신 버전 Flow 설치
yarn add --dev flow-bin
# or
npm install --save-dev flow-binpackage.json 파일에 "flow" 추가
{
// ...
"scripts": {
"flow": "flow", // ...
},
// ...
}Flow 환경설정 파일 생성
yarn run flow init
# or
npm run flow init브라우저는 Flow 관련 문법을 알아차리지 못하기 때문에 컴파일된 JavaScript 번들에서 제거해주어야 한다.
당연히 컴파일한 도구에 따라 해야할 작업은 달라진다.
자동으로 Flow 문법을 제거해준다.
Flow를 위한 프리셋 설치
yarn add --dev @babel/preset-flow
# or
npm install --save-dev @babel/preset-flow.babelrc 파일에서 flow 프리셋 설정
{
"presets": [
"@babel/preset-flow",
"react"
]
}flow-remove-types를 사용해서 주석을 제거할 수 있다.
yarn flow
# or
npm run flowNo errors!
✨ Done in 0.17s.기본적으로 Flow는 다음 주석이 포함된 파일만 체크한다.
// @flow대체적으로 위 주석은 파일 최상단에 둔다. 프로젝트의 몇몇 파일에 주석을 추가하고 Flow가 어떤 문제를 발견했는지 확인하면 된다.
주석에 상관없이 모든 파일들을 체크하는 옵션도 있다. 모든 타입을 체크하고자 하는 새로운 프로젝트에 적합하다.
[참고]
- Flow Documentation: Type Annotations
- Flow Documentation: Editors
- Flow Documentation: React
- Linting in Flow
Microsoft가 개발한 프로그래밍 언어이다. Javascript의 타입 슈퍼셋이며 자체 컴파일러를 가지고 있다. 타입 언어이기 때문에 앱이 실행되기 전에 빌드 에러와 버그를 잡을 수 있다.
TypeScript를 사용하기 위해서는 아래 요구 사항을 만족해야 한다.
- 프로젝트 의존성에 TypeScript를 추가한다.
- TypeScript 컴파일러 옵션을 설정한다.
- 올바른 파일 확장을 사용한다.
- 사용하는 라이브러리의 정의를 추가한다.
별도의 설정 없이 TypeScript를 지원하는 새로운 프로젝트를 생성할 수 있다.
npx create-react-app my-app --template typescript이미 존재하는 Create React App 프로젝트에도 추가할 수 있다. 참고
Create React App을 사용하지 않는 프로젝트에서 Typescript를 추가하는 방법이다.
최신 버전 Typescript 설치
yarn add --dev typescript
# or
npm install --save-dev typescriptpackage.json파일"script"에 "tsc" 추가
{
// ...
"scripts": {
"build": "tsc", // ...
},
// ...
}tsconfig.json에 tsc 설정을 해야 한다.
yarn run tsc --init
# or
npx tsc --inittsc를 통해 생성된 js 파일과 소스코드를 구분하기 위해서 다음과 같은 작업을 한다.
- 모든 소스코드는
src디렉토리에 넣는다.
├── package.json
├── src
│ └── index.ts
└── tsconfig.json
- 소스코드 경로와 컴파일을 통해 생성된 코드 경로를 작성한다.
// tsconfig.json
{
"compilerOptions": {
// ...
"rootDir": "src",
"outDir": "build" // ...
},
}rootDir는 소스코드 경로, outDir는 tsc를 통해 생성된 코드 경로이다.
build 폴더는 .gitignore에 추가한다.
개발하기 편하게 tsconfig.json파일이 설정된 다음 문서를 참고할 수 있다.
.ts는 TypeScript 파일 기본 확장자이다.
.tsx는 JSX 문법이 포함된 코드를 위한 확장자이다.
yarn build
# or
npm run build다른 패키지의 오류와 힌트를 출력하기 위해 컴파일러는 선언 파일에 의존한다.
선언 파일은 라이브러리에 대한 모든 타입 정보를 제공한다. 프로젝트의 npm에 라이브러리에 대한 선언파일이 있다면 해당하는 JavaScript 라이브러리를 사용할 수 있다.
라이브러리에 대한 선언을 가져올 수 있는 방법은 두가지가 있다.
라이브러리가 자신의 선언 파일을 번들한다. 라이브러리가 번들된 타입을 가지고있는지 확인하려면 프로젝트 내에 index.d.ts 파일을 보면 된다.
선언 파일을 번들하지 않은 라이브러리를 위한 거대 저장소이다. 이 저장소의 선언은 Microsoft와 오픈소스 기여자들에 의해 관리되는 크라우드 소스이다.
예를 들어 React는 자체 선언 파일을 번들하지 않는 대신 다읍과 같이 DefinitelyTyped를 통해 다운받을 수 있다.
yarn add --dev @types/react
# or
npm i --save-dev @types/reactLocal Declarations
사용하고 싶은 패키지가 타입 선언 파일을 번들하지도 않고 DefinitelyTyped에서 제공하지도 않는 경우 로컬 타입 선언 파일을 가질 수 있다.
declarations.d.ts 파일을 sourse 디렉토리의 루트에 생성하고 선언하면 된다.
declare module 'querystring' {
export function stringify(val: object): string;
export function parse(val: string): object;
}[참고]
- TypeScript Documentation: Everyday Types
- TypeScript Documentation: Migrating from JavaScript
- TypeScript Documentation: React and Webpack
ReScript는 JavaScript로 컴파일되는 타입이 있는 언어이다.
핵심 기능 중 몇 가지는 100% 타입 커버리지가 보장된다는 점과 first-class로 JSX를 지원하며, JS와 TS로 작성된 React 코드베이스와의 통합을 허용하기 위한 React 전용 바인딩이 있다.
이미 작성된 JS와 React 코드베이스에 ReScript를 통합하는 방법에 대한 더 자세한 정보는 여기에서 찾을 수 있다.
Kotlin은 JetBrains이 개발한 정적 타입 언어이다. Kotlin의 타깃 플랫폼은 JVM, Android, LLVM, JavaScript이다.
JetBrains은 React 커뮤니티를 위해 React bindings나 Create React Kotlin App와 같은 몇몇 도구를 개발, 유지하고 있다. Create React Kotlin App은 별다른 빌드 설정 없이 Kotlin으로 React 앱을 개발할 수 있도록 도와준다.
JavaScript로 컴파일 할 수 있다면 다른 정적 타입 언어들도 React와 호환할 수 있다.
예를 들면 F#/Fable를 기반으로한 elmish-react가 있다.