React, Create React App 및 Next.js로 웹 개발에서 TypeScript 사용에 대한 완전한 가이드.

소개

TypeScript는 웹 개발에 매우 ​​인기가 있습니다. 웹 개발에서 TypeScript를 시작하는 데 도움이 되도록 이 기사에서는 기본 TypeScrip, 웹 페이지 구축을 위한 사용법, React와의 통합을 천천히 소개합니다.

• TypeScript 웹 개발 환경 설정: 코드 , 데모 .
• TypeScript React 웹 개발 환경 설정: code .

• TypeScript란 무엇이고 왜 중요한가
• 전제 조건
• TypeScript 전역 사용 y
• 프로젝트 내에서 TypeScript 사용
• 웹 개발을 위한 TypeScript 지식 준비
• 프레임워크가 없는 Node.js+TypeScript 프로젝트를 위한 웹 개발 환경 설정
• React 프로젝트 개발을 위한 TypeScript 지식 준비
• React TypeScript 프로젝트를 위한 웹 개발 환경 설정
• creat-react-app을 사용하여 React TypeScript 프로젝트를 위한 웹 개발 환경 설정
• Next.js를 사용하여 React TypeScript 프로젝트를 위한 웹 개발 환경 만들기
• 결론

TypeScript는 JavaScript의 모든 기능과 그 위에 추가 계층을 제공합니다. TypeScript의 정적 입력 시스템 .... TypeScript의 주요 이점은 코드에서 예기치 않은 동작을 강조 표시하여 버그 가능성을 낮출 수 있다는 것입니다.

— JavaScript 프로그래머를 위한 TypeScript

TypeScript는 정적 유형 언어(예: Java)로, 변수 유형은 컴파일 시간에 알려지고 어떤 시점에서도 변경할 수 없습니다. 대조적으로 JavaScript는 변수 유형을 변경할 수 있는 동적으로 유형이 지정된 언어입니다. TypeScript의 유형 시스템은 개발자가 개발 중 가변 유형 관련 버그를 쉽고 빠르게 찾을 수 있도록 도와줍니다. 따라서 런타임 오류가 훨씬 적습니다.

TypeScript는 구직 시장에서 수요가 많았습니다. TypeScript는 개발자가 버그의 가능성을 줄이는 데 도움이 될 뿐만 아니라 개발자가 팀의 다른 개발자가 만든 변수와 메서드의 의도를 쉽게 이해할 수 있으므로 팀워크를 훨씬 쉽게 만듭니다. 따라서 TypeScript로 작업하는 방법을 아는 것은 더 좋은 일자리에 지원하는 데 도움이 될 것입니다.

전제 조건

• 컴퓨터에 노드 설치

• 컴퓨터에 설치된 TypeScript Compiler(TSC)를 설치합니다.

TypeScript를 전역적으로 사용

컴퓨터에 전역적으로 TypeScript 컴파일러를 설치해야 합니다.

1단계: TypeScript 컴파일러를 컴퓨터에 전역으로 설치

# Install TypeScript
$ npm i -g typescript
# or 
$ yarn global add typescript
# Check the version
$ tsc --version // or tsc -v

      

       Run ‘tsc — help’ from the terminal to see a list of tsc commands.
      

터미널에서 다음 명령을 실행합니다.

vim index.ts // for vim user
touch index.ts // for Mac user

interface User {
  name: string;
  id: number;
}
const user: User = {
  name: "Hayes", // fixed
  id: 0,
};

다음 명령을 실행하여 TypeScript 파일을 동일한 이름의 JavaScript 파일로 컴파일하고 유형 검사합니다.

tsc index.ts

tsc index.ts --outfile new-file-name.js

데모: 로컬 시스템에서 TypeScript 파일을 컴파일하고 입력하십시오.

참고: 진단 메시지가 표시되는 이유는 . eslintrc.json데스크탑 디렉토리 내. 이 데모에서는 필요하지 않습니다. 사실, 실제 TypeScript 프로젝트에 필요합니다.

Amy의 무료 TypeScript 치트시트

프로젝트 내에서 TypeScript 사용

프로젝트별로 TypeScript를 설정하면 여러 프로젝트에서 다양한 버전의 TypeScript를 사용할 수 있으므로 각 프로젝트가 일관되게 작동할 수 있습니다.

1단계: TypeScript 프로젝트 만들기

프로젝트 디렉토리 생성:

$ mkdir typescript-project
$ cd typescript-project

$ npm i typescript — save-dev
# or 
$ yarn add typescript --dev

TypeScript는 개발 목적으로만 사용합니다. 우리는 프로덕션 목적으로 TypeScript를 JavaScript로 컴파일할 것입니다.

이제 TypeScript 프로젝트 구조는 다음과 같습니다.

typescript-project
│ -- package-lock.json
│ -- package.json

{
 “devDependencies”: {
    “typescript”: “⁴.8.4”
  }
}

$ npx tsc — init

      

       Initializes a TypeScript project by running ‘npx tsc— init’. Screenshot by author.
      

2단계: TypeScript 프로젝트 컴파일

프로젝트 루트 디렉토리에 TypeScript 파일 생성 —index.ts

interface User {
  name: string;
  id: number;
}
const user: User = {
  username: "Hayes", // Error 
  id: 0,
};

다음 명령을 사용하여 코드를 컴파일하려고 하면:

$ tsc index.ts

수정index.ts

interface User {
  name: string;
  id: number;
}
const user: User = {
  name: "Hayes", // fixed
  id: 0,
};

$PROJECT_ROOT
├── package.json     
└── package-lock.json

3단계: 프로젝트의 루트 디렉터리에 TypeScript 구성 파일( tsconfig.json ) 설정

디렉토리 에 tsconfig.json파일이 있으면 해당 디렉토리가 TypeScript 프로젝트의 루트임을 나타냅니다. 이 tsconfig.json파일은 TypeScript 기반 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.

— TypeScript 문서: tsconfig.json이란?

실행 명령:

$ tsc --init

$PROJECT_ROOT
├── tsconfig.json
|── package.json     
└── package-lock.json

TSConfig 기본 예:

다음 섹션에서 TypeScript를 사용한 웹 개발로 넘어가기 전에 TypeScript 구문, 특히 타이핑 시스템에 대한 사전 지식을 가지고 가자.

웹 개발을 위한 TypeScript 지식 준비

세 가지 주요 기본 요소

• 부울 - true또는false
• 숫자 - 12또는12.34
• 끈 -hello world

interface User {
  name: string;
  id: number;
}
// or using types
types User = {
  name: string;
  id: number;
}
const user: User = {
  name: "Hayes",
  id: 0,
};

• 명시적 유형 — 읽기 쉽고 의도적입니다.

let name: string = “table”;

let name = “table”;

let price: string | number;
price = 100;
price = '100';

let ids: number[] = [1, 2, 3, 4, 5]; 
let names: string[] = ['table', 'chair', 'lamp'];
let results: boolean[] = [true, false, false];

TypeScript의 객체에는 올바른 속성과 값 유형이 모두 있어야 합니다.

interface User {
  name: string;
  id: number;
}
const user1: User = {
  firstName: "Hayes", // Error - not correct properties
  id: 0,
};
const user2: User = {
  name: "Hayes", 
  id: "1234", // Error - not correct value type
};

TypeScript를 사용하면 인수 유형과 반환 유형을 정의할 수 있습니다.

function getItemPrice(name: string, price: number): string {
  return `The price of ${name} is ${price} dollars`;
}
console.log(typeof(getItemPrice('apple', 20)) // string

const getItemPrice = (name: string, price: number): string => {
 return `The price of ${name} is ${price} dollars`;
}

let name: string = “table”; // type string
name = 33; // attempts to re-assign the value to a different type

TypeScript를 사용하는 방법을 이해하는 가장 좋은 방법은 프로젝트와 결합하는 것입니다. 따라서 다음 섹션에서는 TypeScript를 다양한 웹 개발 환경에 통합하여 간단한 웹 페이지를 구축할 것입니다.

프레임워크가 없는 Node.js+TypeScript 프로젝트를 위한 웹 개발 환경 설정

1단계: 프로젝트 폴더 구조 만들기

$ mkdir typescript-web-dev
$ cd typescript-web-dev
$ mkdir src dist

$PROJECT_ROOT
├── dist      
└── src

운영yarn init

╰─ yarn init
yarn init v1.22.19
question name (typescript-web-dev):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 17.88s.

╰─ yarn init -y
yarn init v1.22.19
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

$PROJECT_ROOT
├── dist      
|── src
├── package.json

// ./package.json
"scripts": {
    "dev": "webpack-dev-server --mode development",// or "webpack serve",
    "build": "webpack --mode production", 
},

3단계: TypeScript 및 WebPack 종속성 설치

• TypeScript 컴파일러 및 해당 로더 설치

yarn add -D typescript ts-loader

• 웹팩 및 웹팩 개발 서버 설치

yarn add -D webpack webpack-cli webpack-dev-server

// ./webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/main.ts",
  output: {
    filename: "bundle.js", // all js files are bundled into this single file
    path: path.resolve(__dirname, "dist"),
  },
  devtool: "source-map",
  devServer: {
    static: "./dist",
    port: 9000, //default port: 8080
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader", // TypeScript loader
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
};

// ./tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "allowJs": true
  }
}

./dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>A web app using TypeScript</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

const appContainer = document.getElementById("app");
const el = document.createElement("div");
el.innerHTML = `
    <h1>Hello World</h1>
   <span style="background-color: red; color: white;">
     This is a web app built without frameworks
   </span>
 `;
appContainer?.appendChild(el);

$PROJECT_ROOT
└── dist
|   └── index.html
├── src
│   └── main.ts
├── webpack.config.js
├── node_modules
├── tsconfig.json
├── package.json
└── yarn-lock.json

$PROJECT_ROOT
└── dist
|   ├── index.html 
|   ├── bundle.js.map
|   └── bundle.js
├── src
│   └── main.ts
|── webpack.config.js
|── node_modules
|── tsconfig.json
|── package.json     
└── yarn-lock.json

(()=>{var e=document.getElementById("app"),n=document.createElement("div");n.innerHTML='\n    <h1>Hello World </h1>\n   <span style="background-color: blue; color: white;">\n     This is a web app built without frameworks\n   </span>\n ',null==e||e.appendChild(n)})();
//# sourceMappingURL=bundle.js.map

• 실행 yarn dev-> 브라우저 열기(http://localhost:9000/)-> 코드 변경 -> 변경 사항이 즉시 웹 페이지에 표시됩니다.
• 실행 yarn build-> 번들 파일이 이 디렉토리에 표시됩니다.

React는 웹 개발 업계에서 사용되는 가장 인기 있는 프론트엔드 프레임워크 중 하나이므로 다음 단계를 계속하겠습니다. React 프로젝트에 TypeScript를 통합하여 유형이 안전한 React 구성 요소와 그 이점을 만드는 것입니다.

React 프로젝트 개발을 위한 TypeScript 지식 준비

TypeScript를 사용하여 React Props 입력하기

유형 또는 인터페이스를 사용하여 React에서 Props 및 State를 입력할 수 있습니다. 어떤 것을 사용해야 할까요?

react-typescript-cheatsheet doc 에서 제공하는 React의 유형 또는 인터페이스를 사용하는 경험 법칙 :

• interface라이브러리 또는 타사 앰비언트 유형 정의를 작성할 때 항상 공용 API 정의를 사용하십시오 .
• typeReact Component Props and State에 사용하는 것을 고려 하십시오.

interface를 사용하여 React props를 입력 하는 예 :

// src/components/person.tsx

import React from 'react';
interface PersonProps {
  name: string;
  age: number;
  skills: string[];
}
const Person: React.FC<PersonProps> = ({ name, age, skills }) => {
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
      <div>Skills<ul>{ skills.map((skill) => <li>{skill}</li>}</ul></div>
</div> 
);};

export default Person;

// src/index.tsx
import React from 'react';
import Person from './components/person';

const App: React.FC = () => {
  return (
    <div>
      <Person name='Fish' age={40} skills={['Programming', 'Writing', 'Storytelling'}/>
    </div>
  );
};

export default App;

export declare interface AppProps {
  children?: React.ReactNode; 
  childrenElement: JSX.Element;
  style?: React.CSSProperties; 
  onChange?: React.FormEventHandler<HTMLInputElement>; 
  props: Props & React.ComponentPropsWithoutRef<"button">; 
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>;
}

// useState<T>()
const [count, setCount] = useState<number | null>(1);
// createContext<T>(), useContext()
const ScrollContext = React.createContext<ScrollValue>({
  scrollY: 0
})
// useRef<T>()
const { scrollY } = useContext(ScrollContext)
const divRef = useRef<HTMLDivElement>(null)

React+TypeScript에 대한 지식이 있으면 React 프로젝트에서 계속 작업할 수 있습니다. React 프로젝트를 만드는 방법에는 처음부터 시작하거나 React 프레임워크를 활용하는 두 가지 방법이 있습니다. React 설정을 더 잘 이해하기 위해 다음 섹션에서 프레임워크를 사용하지 않고 React 프로젝트를 만드는 방법을 알아보겠습니다.

React TypeScript 프로젝트를 위한 웹 개발 환경 설정

위의 TypeScript 웹 개발 프로젝트를 만드는 것과 동일한 여러 단계가 있습니다 .

1단계: TypeScript React 프로젝트 폴더 구조 만들기

$ mkdir typescript-react-web-dev  
$ cd typescript-react-web-dev  
$ mkdir src dist

yarn init -y

"scripts": {  
    "dev": "webpack-dev-server --mode development",  
    "build": "webpack --mode production",   
},

yarn add -D typescript @typescript-eslint/parser
yarn add react react-dom 
yarn add -D @types/react @types/react-dom
yarn add -D @babel/core babel-loader @babel/preset-react @babel/preset-typescript
yarn add -D webpack webpack-cli webpack-dev-server

./webpack.config.js

const path = require("path");  
module.exports = {  
  entry: "./src/main.tsx",  
  output: {  
    filename: "bundle.js", // all js files are bundled into this single file  
    path: path.resolve(__dirname, "dist"),  
  },  
  devtool: "source-map",  
  devServer: {  
    static: "./dist",  
    port: 9000, //default port: 8080  
  },  
  module: {  
    rules: [  
      {  
        test: /\.tsx?$/,  
        use: {
          loader: 'babel-loader',
         },        
        exclude: /node_modules/,  
      },  
    ],  
  },  
  resolve: {  
    extensions: [".tsx", ".ts", ".js", ".jsx],  
  },  
};

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react"
   ]
}

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "umd",
    "lib": ["ESNext", "dom"],
    "jsx": "react",
    "noEmit": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

./dist/index.html

// ./dist/index.html
<!DOCTYPE html>
<html>
  <head>
    <title>A web app using TypeScript</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
createRoot(document.getElementById('app'))
  .render(<App />);

import React from 'react';
export const App = () => (
  <h1>TypeScript + React</h1>
);

실행 yarn dev하여 로컬 환경에서 앱을 시작합니다.

GitHub 코드

Transpilers우리 앱은 최신 브라우저에서 잘 작동하지만 이전 엔진에서 작업하려면 두 가지 도구 를 사용해야 합니다 Polyfills. 더 자세한 이해를 위해 Transpile and Polyfill to ES5 및 이해 Transipers and Polyfills 을 참조하십시오 .

오늘날 Create React App — TS docs , Next.js — TS docs 및 Gatsby — TS Docs 와 같은 많은 프레임워크가 즉시 TypeScript를 지원합니다 . 위의 React- TypeScriptcreat-react-app 지식 을 에 의해 생성된 다른 React 프로젝트 에 가져와 보겠습니다.

creat-react-app을 사용하여 React TypeScript 프로젝트를 위한 웹 개발 환경 설정

TypeScript로 React 프로젝트 만들기

React 프로젝트에서 TypeScript를 사용하는 방법을 막 배우기 시작할 때 상용구를 사용하면 편리합니다.

yarn create react-app typescript-react-app --template typescript

$PROJECT_ROOT
├── public     
|── src    
|   ├── App.css
|   ├── App. tsx
|   ├── index.css
|   └── index.tsx
├── tsconfig.json
├── package.json
└── yarn.lock

개발 환경에서 앱 실행

npm start
# or
yarn start

내부에 프로덕션 배포 코드를 저장할 위치를 사용자 지정할 수 있습니다.tsconfig.json

컴파일된 React 앱의 프로젝트 구조:

$PROJECT_ROOT
├── build
|   └── static
|         |-- css
|         |-- js
|         └── media
|── src
└── public

Next.js 프로젝트 만들기

react-dom다음 명령을 실행하여 react, , next, eslint, eslint-config-next, , typescript, @types/react, @types/node를 포함한 종속성이 사전 설치된 Next.js 프로젝트를 생성합니다 @types/react-dom.

yarn create next-app --typescript typescript-nextjs-app

$PROJECT_ROOT
├── pages
│   ├── _app.tsx
│   ├── index.tsx
│   ├── api
│        ├── hello.ts
├── styles
│   ├── Home.module.css
│   ├── globas.css
├── node_modules
├── next-env.d.ts
├── next.config.js
├── tsconfig.json
├── README.md
├── package.json
└── yarn.lock

명령 yarn dev을 시작하려면 실행하십시오 .next dev

Next.js와 같은 다른 React 프레임워크에서 TypeScript를 사용하는 방법에 대한 더 많은 예제/튜토리얼을 찾으려면 이 문서를 확인하는 것이 좋습니다.

결론

다음 React 프로젝트에서 TypeScript를 사용해 보기를 바랍니다. 처음에는 TypeScript로 작성하면 작업 프로세스가 느려진다고 느낄 수 있지만 확실히 효과가 있습니다.

읽어 주셔서 감사합니다! 즐거운 코딩!

유용한 소스 및 링크

• React+TypeScript 치트시트 — React 및 TypeScript에 대한 최신 정보입니다.
• Webpack 및 Babel을 사용하여 React TypeScript 프로젝트 만들기 — 문서에서 단계별 빌드 프로세스를 다룹니다.