프론트엔드 프로젝트를 위한 TypeScript의 점진적 채택 전략-JS 튜토리얼-php.cn

TypeScript

프런트 엔드 프로젝트에서 TypeScript를 점진적으로 채택하는 전략에는 일반적으로 다음이 포함됩니다.

타입스크립트 소개

두 숫자의 합을 계산하는 함수가 포함된 간단한 JavaScript 모듈 utils.js가 있는 경우:

// utils.js
export function add(a, b) {
    return a + b;
}

로그인 후 복사

먼저 파일 확장자를 .ts로 변경하고 유형 주석을 단계별로 추가하기 시작합니다.

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

로그인 후 복사

tsconfig.json 설정

TypeScript 컴파일러를 구성하려면 프로젝트 루트 디렉터리에 tsconfig.json을 생성하세요.

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

로그인 후 복사

고급 구성 항목

경로: 모듈을 가져올 때 경로 관리를 용이하게 하기 위해 경로 별칭 구성에 사용됩니다.

"paths": {
    "@components/*": ["src/components/*"]
}

로그인 후 복사

baseUrl: 프로젝트의 기본 디렉터리를 설정합니다. 경로와 함께 사용하면 더욱 간결한 가져오기 경로를 제공할 수 있습니다.

    "baseUrl": "./src"

로그인 후 복사

resolveJsonModule: JSON 파일을 직접 가져올 수 있습니다.

    "resolveJsonModule": true

로그인 후 복사

lib: ECMAScript, DOM 등 프로젝트에 사용되는 라이브러리 파일 컬렉션을 지정합니다.

    "lib": ["es6", "dom"]

로그인 후 복사

jsx: 프로젝트가 JSX 구문을 사용하는 경우 이 옵션을 설정해야 합니다.

    "jsx": "react-jsx"

로그인 후 복사

상속된 구성

프로젝트 구조가 복잡한 경우 디렉터리마다 다른 구성이 필요할 수 있습니다. 확장 속성을 사용하여 기본 tsconfig.json을 상속할 수 있습니다.

// tsconfig.app.json in a subdirectory
{
    "extends": "../tsconfig.json",
    "compilerOptions": {
    // You can override or add application-specific compilation options here
    },
    // You can add or modify include and exclude here
}

로그인 후 복사

TypeScript를 빌드 프로세스에 통합

TypeScript를 빌드 프로세스에 통합하려면 일반적으로 빌드 도구(예: Webpack, Rollup 또는 Parcel)의 구성을 조정해야 합니다. 그리고 구성 파일에 TypeScript 처리 규칙을 추가합니다.

npm install --save-dev typescript ts-loader webpack webpack-cli

로그인 후 복사

webpack.config.js配置文件

const path = require('path');

module.exports = {
  entry: './src/index.ts', // Your entry file, usually index.ts
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // Add .ts and .tsx extensions
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/, // Exclude the node_modules directory
      },
    ],
  },
  devtool: 'source-map', // Generate source map for easy debugging during development
};

로그인 후 복사

tsconfig.json에서 Webpack의 출력 디렉터리와 일치하도록 올바른 outDir을 구성했는지 확인하세요.

{
  // ...
  "outDir": "./dist",
  // ...
}

로그인 후 복사

이제 명령줄에서 다음 명령을 실행하여 빌드 프로세스를 시작할 수 있습니다.

npx webpack

로그인 후 복사

이렇게 하면 Webpack과 ts-loader를 사용하여 TypeScript 소스 코드를 JavaScript로 컴파일하고 dist 디렉터리에 출력합니다.

npm 스크립트를 사용하는 경우 package.json에 빌드 스크립트를 추가할 수 있습니다.

{
  "scripts": {
    "build": "webpack"
  }
}

로그인 후 복사

그런 다음 npm run build를 통해 빌드를 실행하세요.

유형 정의 사용

프로젝트에서 타사 라이브러리를 사용하는 경우 @types/lodash와 같은 해당 유형 정의 패키지를 설치해야 합니다. 공식적인 유형 정의가 없는 라이브러리의 경우 커뮤니티에서 제공하는 정의를 사용해 보거나 자체 선언 파일을 작성할 수 있습니다.

1. 유형 정의 패키지를 설치합니다.

가장 인기 있는 라이브러리에는 일반적으로 @types 네임스페이스에 있는 해당 유형 정의 패키지가 있습니다. 예를 들어 프로젝트에서 lodash를 사용하는 경우 다음 명령을 실행하여 해당 유형 정의를 설치할 수 있습니다.

// utils.js
export function add(a, b) {
    return a + b;
}

로그인 후 복사

또는 실 사용:

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

로그인 후 복사

2. 자동 유형 추론

유형 정의를 설치한 후 TypeScript 컴파일러는 이러한 유형 정의를 자동으로 인식하고 사용합니다. 코드에서 이를 명시적으로 가져올 필요는 없으며 프로젝트에서 일반적으로 라이브러리를 참조하면 됩니다.

3. 사용자 정의 유형 정의

공식 유형 정의가 없는 라이브러리를 사용하거나 공식 유형 정의가 불완전한 경우 고유한 유형 선언 파일(.d.ts)을 작성할 수 있습니다. 일반적으로 이 파일은 라이브러리의 JavaScript 파일과 동일한 위치나 유형 또는 @types 디렉토리에 배치되어야 합니다.

예를 들어 customLib라는 라이브러리가 있고 해당 라이브러리의 기본 파일이 customLib.js라고 가정합니다. customLib.d.ts 파일을 생성하여 해당 유형을 선언할 수 있습니다.

{
// Specify the target ECMAScript version for compilation
"target": "es6",

// Specify the module system
"module": "esnext",

// Output directory, where the compiled files are stored
"outDir": "./dist",

// Whether to include source map files for debugging
"sourceMap": true,

// Enable strict type checking options
"strict": true,

// Allow default imports from modules that do not set default exports
"esModuleInterop": true,

// Ignore type checking for libraries
"skipLibCheck": true,

// Ensure consistent case for file names
"forceConsistentCasingInFileNames": true,

// Which files to include for compilation
"include": [
    "src/**/*.ts",
    "src/**/*.tsx" // If TypeScript's JSX is used in the project
],

// Which files or directories are excluded from compilation
"exclude": [
    "node_modules",
    "**/*.spec.ts" // Exclude test files
]
}

로그인 후 복사

그러면 코드에서 TypeScript가 이러한 유형을 인식하고 사용합니다.

4. 커뮤니티 유형 정의

때때로 커뮤니티에서 비공식 유형 정의를 제공할 수도 있습니다. 명확히 유형화된 저장소(https://github.com/DefinitelyTyped/DefinitelyTyped)에서 찾거나 GitHub에서 @types/library-name을 검색할 수 있습니다.

5. 유형 정의의 한계

유형 정의는 코드 품질을 향상시키는 데 도움이 되지만 모든 라이브러리가 완전한 유형 정의를 제공하는 것은 아니며 라이브러리의 실제 동작과 완전히 일치하지 않을 수도 있습니다. 이 경우 특정 유형 검사를 건너뛰려면 코드에서 any 유형 또는 // @ts-ignore 주석을 사용해야 할 수도 있습니다.

IDE 통합

코드 완성, 유형 검사 및 기타 기능을 사용하려면 IDE(예: VSCode)에 TypeScript 플러그인이 설치되어 있는지 확인하세요.

점차적으로 다른 모듈 마이그레이션

시간이 지남에 따라 점차적으로 다른 JavaScript 모듈을 TypeScript로 변환할 수 있습니다. 예를 들어, app.ts로 유사하게 변환하고 유형 주석을 추가할 수 있는 app.js가 있다고 가정해 보겠습니다.

app.js의 이름을 app.ts로 바꿉니다. 이 단계는 모듈이 공식적으로 TypeScript 환경에 진입했음을 나타냅니다.
app.ts를 열고 변수, 함수 매개변수, 반환 값 등에 유형 주석을 추가하기 시작하세요. 이는 TypeScript 컴파일러가 유형 검사를 수행하고 잠재적인 유형 오류를 줄이는 데 도움이 됩니다.

// utils.js
export function add(a, b) {
    return a + b;
}

로그인 후 복사

복잡한 데이터 구조의 경우 인터페이스(인터페이스) 또는 유형 별칭(유형 별칭)을 사용하여 유형을 정의하면 코드 가독성과 유지 관리성이 향상됩니다.

// utils.ts
export function add(a: number, b: number): number {
    return a + b;
}

로그인 후 복사

유형 검사 강화

팀이 TypeScript에 익숙해지면 tsconfig.json에서 strictNullChecks와 같은 더 엄격한 유형 검사 옵션을 점차적으로 활성화할 수 있습니다.

위 내용은 프론트엔드 프로젝트를 위한 TypeScript의 점진적 채택 전략의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!