TypeScript 기초: 초보자 가이드(✅

TypeScript는 개발자들 사이에 끝없는 논쟁을 불러일으켰습니다. 어떤 사람들은 이를 JavaScript의 자유에 대한 관료적 장애물로 보는 반면, 다른 사람들은 이를 느슨하게 형식화된 코드의 참호에 빛의 등불이라고 환영합니다. 좋든 싫든 TypeScript는 여기에 있습니다. 일단 알게 되면 이것이 부담이 아니라 프로젝트에 축복이 될 수도 있습니다.

이 시리즈에서는 TypeScript를 살펴보고 기본 사항은 물론 몇 가지 요령과 문제 해결 팁도 다룹니다.

1. 소개

타입스크립트란 무엇입니까?

TypeScript는 일반 JavaScript로 컴파일되는 정적으로 유형이 지정된 JavaScript의 상위 집합입니다. 간단히 말해서, 오류를 조기에 포착하고 더 우수하고 유지 관리하기 쉬운 코드를 작성하는 데 도움이 되는 추가 기능을 갖춘 JavaScript입니다.

TypeScript를 제출하기 전에 작업을 다시 확인하는 친절한 조수라고 생각하세요. 다음을 수행할 수 있습니다.

• 배포 후가 아니라 코딩하는 동안 오류를 찾아보세요.
• 더 읽기 쉽고 이해하기 쉬운 코드를 작성하세요.
• 연결 방식을 놓치지 않고 프로젝트를 확장하세요.

TypeScript를 사용하는 이유는 무엇입니까?

실천적으로 시작해 보세요. JavaScript가 이미 작동하는데 왜 TypeScript에 관심을 가져야 합니까?

실질적인 이점:

1. 오류 조기 포착: 잘못된 데이터 유형을 함수에 전달하는 것과 같은 일반적인 함정을 피하세요.

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. 자동 완성 및 문서화: VS Code와 같은 최신 편집기는 입력 시 풍부한 자동 완성 제안 및 문서를 제공합니다.

2. 코드 확장성: TypeScript의 기능은 일관성 유지가 중요한 대규모 프로젝트에서 빛을 발합니다.

3. 향상된 팀 협업: 명확한 유형을 사용하면 팀 구성원이 코드를 한눈에 더 쉽게 이해할 수 있습니다.

저는 TypeScript가 더 큰 앱을 계획하는 데 특히 도움이 된다는 것을 알았습니다. 어떤 유형의 데이터를 처리할지, 내 기능이 어떤 데이터를 가져오거나 반환하는지 이해합니다.

전제 조건

들어가기 전에 기본적인 JavaScript 지식이 있는지 확인하세요. 다음 내용을 숙지해야 합니다.

• 변수 및 데이터 유형(예: let, const, 문자열, 숫자)
• 기능
• 배열과 객체

아직 자신이 없다면 시간을 내어 JavaScript 기본 사항을 검토해 보세요.

---

2. 환경 설정

타입스크립트 설치

TypeScript는 시작하려면 설치가 필요한 도구입니다. 몇 단계만 거치면 TypeScript로 코딩을 시작할 수 있는 환경을 준비할 수 있습니다. 방법은 다음과 같습니다.

TypeScript를 사용하려면 Node.js가 설치되어 있어야 합니다. 일단 가지고 있으면:

1. TypeScript를 전역적으로 설치합니다.

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. 설치 확인:

   npm install -g typescript

VS 코드 설정

VS Code는 TypeScript 개발에 가장 널리 사용되는 편집기 중 하나입니다. 코딩을 더욱 쉽고 효율적으로 만들어주는 다양한 기능과 확장 기능을 제공합니다. 설정해 봅시다:

VS Code는 TypeScript 개발자를 위한 편집기입니다. 설정 방법은 다음과 같습니다.

1. VS Code 설치: 여기에서 다운로드하세요.
2. 다음과 같은 유용한 확장 기능을 추가하세요.
   • ESLint: TypeScript 코드 린팅용.
   • 더 예쁘다: 일관된 코드 형식을 위해.
   • TypeScript Hero: 생산성 향상을 위해.

첫 번째 TypeScript 프로젝트 만들기

직접 체험하는 것이 TypeScript를 배우는 가장 좋은 방법입니다. 이 섹션에서는 파일 생성부터 코드 실행까지 첫 번째 프로젝트 설정 과정을 안내합니다.

1. 프로젝트를 위한 새 폴더를 생성하고 해당 폴더로 이동합니다.

   tsc --version

1. 새 프로젝트 초기화:

   mkdir typescript-starter
   cd typescript-starter

1. TypeScript 추가:

   npm init -y

1. tsconfig.json 파일을 만듭니다.

   npm install --save-dev typescript

1. 첫 번째 TypeScript 파일을 작성하세요.

   npx tsc --init

1. 컴파일 및 실행:

   echo "console.log('Hello, TypeScript!');" > index.ts

방금 첫 번째 TypeScript 프로그램을 작성하고 컴파일했습니다!

---

3. 기본 유형 개요

TypeScript의 강력한 힘은 유형 시스템에 있습니다. 몇 가지 기본 유형을 살펴보겠습니다.

기본 유형

기본 유형은 TypeScript 유형 시스템의 구성 요소입니다. 여기에는 문자열, 숫자, 부울과 같은 기본 데이터 유형이 포함됩니다. 사용 방법을 간단히 살펴보겠습니다.

1. 문자열:

   npx tsc index.ts
   node index.js

1. 번호:

   let name: string = "Alice";

1. 부울:

   let age: number = 25;

고급 유형

기본 요소 외에도 TypeScript는 배열, 튜플, any 및known과 같은 특수 유형과 같은 더 복잡한 유형을 지원합니다. 이러한 유형은 안전을 유지하면서 코드를 유연하게 만듭니다.

1. 배열:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. 튜플:

   npm install -g typescript

1. 모든 것 (아껴서 사용):

   tsc --version

1. 알 수 없음(어떤 것보다 안전함):

   mkdir typescript-starter
   cd typescript-starter

1. void(아무것도 반환하지 않는 함수):

   npm init -y

1. null 및 정의되지 않음:

   npm install --save-dev typescript

---

4. 유형 주석을 사용한 첫 번째 단계

TypeScript의 유형 주석을 사용하면 개발자는 변수, 매개변수 또는 함수 반환 값의 유형을 지정할 수 있습니다. 이렇게 하면 코드가 정의된 구조를 준수하므로 개발 중에 오류를 더 쉽게 포착하고 프로젝트 전반에 걸쳐 일관성을 유지할 수 있습니다.

평소처럼 코드를 작성할 때 통합할 수 있는 아래 기능을 참고하세요

기본 변수 입력

항상 올바른 것으로 설정되고 앱의 나머지 부분이 해당 변수가 무엇인지 이해할 수 있도록 변수 유형을 설정하세요.

   npx tsc --init

함수 매개변수 입력

마찬가지로 함수의 경우 인수 유형과 반환 유형을 정의할 수 있습니다.

   echo "console.log('Hello, TypeScript!');" > index.ts

반환 유형 주석

   npx tsc index.ts
   node index.js

실제 예: 사용자 프로필

TypeScript를 사용하면 자신만의 유형을 선언하여 코드의 구조를 개선하고 규칙을 적용할 수 있습니다. 유형이나 인터페이스를 사용하면 객체, 함수 또는 공용체에 대한 사용자 정의 유형을 정의할 수 있습니다. 이렇게 하면 코드가 더욱 강력해질 뿐만 아니라 대규모 프로젝트의 가독성과 일관성도 향상됩니다.

   let name: string = "Alice";

---

5. 인터페이스를 사용한 빠른 시작

기본 구문

TypeScript의 인터페이스는 객체의 구조를 정의하여 객체가 특정 속성과 유형을 갖도록 합니다. 이 섹션에서는 이를 생성하고 사용하는 방법을 보여줍니다.

   let age: number = 25;

선택적 속성

객체의 모든 속성이 필수가 아닌 경우도 있습니다. TypeScript를 사용하면 인터페이스에서 선택적 속성을 정의하여 이러한 경우를 적절하게 처리할 수 있습니다.

   let isStudent: boolean = true;

읽기 전용 속성

읽기 전용 속성은 특정 값을 설정한 후에 변경할 수 없도록 하려는 경우에 유용합니다. 인터페이스에서 이를 사용하는 방법은 다음과 같습니다.

   let scores: number[] = [90, 85, 88];

실제 사례: API 응답

인터페이스를 사용하여 API 응답을 입력하면 서버의 데이터를 안전하고 효과적으로 처리할 수 있습니다. 실제 예는 다음과 같습니다.

   let user: [string, number] = ["Alice", 25];

---

6. 연습 프로젝트: 간단한 할 일 목록 만들기

TypeScript를 익히려면 연습이 중요합니다. 이 프로젝트에서는 지금까지 배운 기능을 활용하는 간단한 할 일 목록 애플리케이션을 만듭니다.

1. Todo 유형 만들기:

   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

1. 간단한 할일 배열 만들기:

   npm install -g typescript

1. 할 일을 추가하고 할 일을 완료로 표시하는 몇 가지 기능을 추가하세요.

   tsc --version

---

7. 다음 단계

지금은 여기까지입니다. 이 튜토리얼이 즐거웠기를 바랍니다. 유용한 TypeScript 기능과 사용 사례를 더 자세히 알아보기 위해 몇 가지 추가 튜토리얼을 작성할 예정입니다.

• 다음 강의: TypeScript 기능과 고급 유형에 대해 자세히 알아보세요.
• 리소스:
  • TypeScript 문서
  • TypeScript를 온라인으로 연습하기 위한 CodeSandbox.
• 과제: 블로그 게시물을 위한 TypeScript 인터페이스를 만들고 이를 사용하여 블로그 게시물 목록을 유형 확인하세요.

다음에 또 만나요!

위 내용은 TypeScript 기초: 초보자 가이드(✅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!