요약하려면 TypeScript는 반응 코드를 컴파일하여 코드를 유형 확인합니다. JavaScript 출력을 방출하지 않습니다 (대부분의 시나리오에서). 출력은 여전히 비 형식 스크립트 반응 프로젝트와 유사합니다.
구성
함수 선언 function expression을 사용합니다. 에 주석을 달 수 있습니다. 함수 구성 요소”.
소품
후크
출처 : React-typescript-cheatsheet hooks 섹션 리터럴
두 가지 방법 모두 문제를 해결합니다. 어느 것을 사용해야하는지 결정하는 것은 당신에게 달려 있습니다. 개인적으로 인터페이스를 확장하는 것은 더 읽기 쉬운 느낌이 들지만 궁극적으로 그것은 당신과 당신의 팀에게 달려 있습니다.
를 사용하여 수행 할 수 있습니다.
@Types 네임 스페이스는 패키지 유형 정의를 위해 예약되어 있습니다. 그들은 Semusttyped라는 저장소에 살고 있으며, 이는 TypeScript 팀과 부분적으로 부분적으로 커뮤니티에 의해 유지됩니다.
> eslint/prettier
npx create-react-app my-app <span>--template typescript
</span>
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span><span>yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev
</span>
module<span>.exports = {
</span> <span>parser: '@typescript-eslint/parser', // Specifies the ESLint parser
</span> <span>extends: [
</span> <span>'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
</span> <span>'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin
</span> <span>],
</span> <span>parserOptions: {
</span> <span>ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
</span> <span>sourceType: 'module', // Allows for the use of imports
</span> <span>ecmaFeatures: {
</span> <span>jsx: true, // Allows for the parsing of JSX
</span> <span>},
</span> <span>},
</span> <span>rules: {
</span> <span>// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
</span> <span>// e.g. "@typescript-eslint/explicit-function-return-type": "off",
</span> <span>},
</span> <span>settings: {
</span> <span>react: {
</span> <span>version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
</span> <span>},
</span> <span>},
</span><span>};
</span><span>yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
</span>
"라이브러리 또는 3 자 주변 유형 정의를 작성할 때 항상 공개 API 정의에 인터페이스를 사용하십시오."
npx create-react-app my-app <span>--template typescript
</span>
공통 사용 사례
.
npx create-react-app my-app <span>--template typescript
</span>
<span>{
</span> <span>"compilerOptions": {
</span> <span>"target": "es5", // Specify ECMAScript target version
</span> <span>"lib": [
</span> <span>"dom",
</span> <span>"dom.iterable",
</span> <span>"esnext"
</span> <span>], // List of library files to be included in the compilation
</span> <span>"allowJs": true, // Allow JavaScript files to be compiled
</span> <span>"skipLibCheck": true, // Skip type checking of all declaration files
</span> <span>"esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
</span> <span>"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
</span> <span>"strict": true, // Enable all strict type checking options
</span> <span>"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
</span> <span>"module": "esnext", // Specify module code generation
</span> <span>"moduleResolution": "node", // Resolve modules using Node.js style
</span> <span>"isolatedModules": true, // Unconditionally emit imports for unresolved files
</span> <span>"resolveJsonModule": true, // Include modules imported with .json extension
</span> <span>"noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
</span> <span>"jsx": "react", // Support JSX in .tsx files
</span> <span>"sourceMap": true, // Generate corrresponding .map file
</span> <span>"declaration": true, // Generate corresponding .d.ts file
</span> <span>"noUnusedLocals": true, // Report errors on unused locals
</span> <span>"noUnusedParameters": true, // Report errors on unused parameters
</span> <span>"incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
</span> <span>"noFallthroughCasesInSwitch": true // Report errors for fallthrough cases in switch statement
</span> <span>},
</span> <span>"include": [
</span> <span>"src/**/*" // *** The files TypeScript should type check ***
</span> <span>],
</span> <span>"exclude": ["node_modules", "build"] // *** The files to not type check ***
</span><span>}
</span>
요약
npx create-react-app my-app <span>--template typescript
</span>
TypeScript가있는 React 프로젝트를 시작하려면 TypeScript 템플릿이있는 React App 만들기와 같은 도구를 사용할 수 있습니다. TypeScript를 사용하면 React와 함께 동적 및 대화식 사용자 인터페이스를 구축하는 동안 정적 타이핑의 이점을 누릴 수있어보다 신뢰할 수 있고 유지 관리 가능한 웹 응용 프로그램이 생성됩니다.
REACT에 TypeScript가 필요합니까? React Applications를 구축하는 데 TypeScript가 필요하지 않지만 매우 유익 할 수 있습니다. React는 원래 JavaScript (ECMAScript)를 사용하여 개발되었으며 많은 REACT 응용 프로그램은 여전히 일반 JavaScript로 작성됩니다. React는 JavaScript와 완벽하게 작동하며 TypeScript없이 완전히 기능적이고 효율적인 React 응용 프로그램을 만들 수 있습니다.
react.js와 React Typecript의 차이점은 무엇입니까?
JavaScript 선택 : JavaScript를 선택하는 것이 소규모 프로젝트 또는 타이트한 마감일로 작업 할 때 더 적합 할 수 있습니다. JavaScript는 더 가볍고 학습 곡선이 짧아서 더 빠르게 설정하고 시작할 수 있습니다. 팀이 TypeScript에 대한 경험이 부족하거나 프로젝트 요구 사항에 강력한 타이핑이 필요하지 않은 경우 JavaScript가 실용적인 선택 일 수 있습니다. 또한 JavaScript Ecosystem은 광범위한 라이브러리 및 리소스 모음을 자랑하여 프로젝트에 대한 솔루션과 지원을보다 쉽게 찾을 수 있습니다.
위 내용은 TypeScript : 모범 사례와 반응합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
