JavaScript 개발자를 위한 TypeScript 소개-JS 튜토리얼-php.cn

Introduction to TypeScript for JavaScript Developers

TypeScript는 JavaScript에 선택적 정적 유형 시스템을 추가하는 JavaScript의 상위 집합입니다. JavaScript 개발자라면 최근 TypeScript에 대해 많이 들어보셨을 것입니다. 하지만 정확히 무엇입니까? 왜 그것에 관심을 가져야 합니까? 프로젝트에서 이를 효과적으로 사용하는 방법은 무엇입니까?

이 기사에서는 TypeScript를 간단한 용어로 설명하여 TypeScript가 강력한 이유와 다음 JavaScript 프로젝트에 이상적인 도구인 이유를 이해하는 데 도움을 줍니다.

타입스크립트란 무엇인가요?

TypeScript의 핵심은 유형이 있는 JavaScript입니다. TypeScript는 코드가 실행되기 전에도 개발 중에 잠재적인 오류를 포착하는 데 도움이 되는 정적 타이핑 레이어를 추가하여 JavaScript를 향상시킵니다.

하지만 걱정하지 마세요. TypeScript는 여전히 JavaScript입니다! 유효한 JavaScript 코드는 모두 유효한 TypeScript 코드이기도 합니다. TypeScript는 개발 작업 흐름을 개선하고, 코드를 더욱 강력하게 만들고, 버그를 방지할 수 있는 추가 도구를 제공합니다.

TypeScript를 선택하는 이유는 무엇인가요?

"TypeScript가 유형이 있는 JavaScript라면 왜 JavaScript를 고수하지 않겠습니까?"라고 물을 수 있습니다. 대답은 보안 및 개발자 경험에 있습니다.

정적 입력으로 오류 감소

TypeScript는 유형을 강제 변환하여 오류를 조기에 포착하는 데 도움이 됩니다. JavaScript에서는 예상치 못한 데이터 유형(예: 숫자에 대해 문자열 메서드 호출 시도)으로 인해 버그가 자주 발생합니다. TypeScript는 코드를 실행하기도 전에 이러한 유형의 오류를 포착합니다.
더 나은 도구 및 자동 완성

TypeScript는 더 나은 자동 완성, 더 정확한 유형 검사, 더 쉬운 리팩토링을 제공합니다. IDE는 개발 속도를 높이기 위해 더 스마트한 제안과 오류 메시지를 제공할 수 있습니다.
대규모 프로젝트의 유지 관리 코드

JavaScript 프로젝트가 성장함에 따라 동적 타이핑을 사용하여 대규모 코드 베이스를 관리하는 것이 점점 더 어려워지고 있습니다. TypeScript를 사용하면 코드를 더 잘 구성할 수 있어 장기적으로 유지 관리가 더 쉬워집니다.
JavaScript 개발자는 배우기 쉽습니다

TypeScript는 JavaScript 개발자가 쉽게 배울 수 있도록 설계되었습니다. 완전히 새로운 언어를 배울 필요는 없습니다. 필요한 곳에 유형을 추가하기만 하면 됩니다. 기존 JavaScript 코드베이스 내에서 TypeScript를 점진적으로 사용할 수 있습니다.

JavaScript 개발자를 위한 주요 TypeScript 개념

JavaScript에 익숙하다면 TypeScript가 매우 친숙하게 느껴지겠지만 몇 가지 중요한 차이점이 있습니다. 몇 가지 기본 TypeScript 개념을 살펴보겠습니다.

1. 유형: TypeScript의 핵심

JavaScript와 TypeScript의 가장 큰 차이점 중 하나는 유형 시스템입니다. JavaScript에서 유형은 동적입니다. 즉, 변수가 런타임에 유형을 변경할 수 있습니다.

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

로그인 후 복사

TypeScript에서는 변수 유형을 명시적으로 정의할 수 있으며 컴파일러는 변수에 할당된 값이 해당 유형과 일치하는지 확인합니다.

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

로그인 후 복사

TypeScript의 몇 가지 일반적인 유형은 다음과 같습니다.

string – 텍스트 문자열용.
number – 숫자용(정수 및 부동 소수점 숫자).
boolean – 참 또는 거짓 값.
object – 배열, 객체 등 복잡한 데이터 유형의 경우.
any – 모든 유형에 사용되며 유형 검사를 효과적으로 비활성화합니다(주의해서 사용).

2. 인터페이스: 물체의 모양을 설명합니다.

TypeScript는 인터페이스를 사용하여 개체의 모양을 설명합니다. 이를 통해 속성 및 유형을 포함하여 개체가 준수해야 하는 구조를 정의할 수 있습니다.

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

로그인 후 복사

인터페이스는 모든 사용자 개체에 이름(문자열)과 나이(숫자)가 있는지 확인하는 등 개체가 특정 구조를 따르도록 하려는 경우에 유용합니다.

3. 입력된 함수

TypeScript에서는 함수 매개변수 및 반환 값의 유형을 지정하여 코드를 더 쉽게 예측하고 디버깅할 수 있습니다.

<code class="language-typescript">function greet(name: string): string {
  return `Hello, ${name}!`;
}

greet("Alice");  // 正确
greet(42);  // 错误：类型“number”的参数无法分配给类型“string”的参数</code>

로그인 후 복사

선택적 매개변수, 기본값, 나머지 매개변수를 포함하여 함수 유형을 정의할 수도 있습니다.

<code class="language-typescript">function sum(a: number, b: number = 0): number {
  return a + b;
}

console.log(sum(5)); // 5
console.log(sum(5, 3)); // 8</code>

로그인 후 복사

4. Union 유형: 여러 유형 처리

JavaScript에서 변수는 여러 유형의 숫자 값을 보유할 수 있지만 TypeScript에서는 Union 유형을 사용하여 이러한 유연성을 보다 명시적으로 표현할 수 있습니다.

예를 들어 문자열이나 숫자를 보유할 수 있는 변수를 정의할 수 있습니다.

<code class="language-typescript">let value: string | number;

value = "Hello";
value = 42;</code>

로그인 후 복사

Union 유형은 문자열이나 null을 반환할 수 있는 함수와 같이 여러 형식을 취할 수 있는 값이 있을 때 유용합니다.

5. 클래스와 상속

TypeScript는 JavaScript(ES6)와 마찬가지로 클래스 및 상속과 같은 객체 지향 프로그래밍(OOP) 개념을 지원하지만 추가 유형 안전성을 제공합니다.

<code class="language-typescript">class Animal {
  constructor(public name: string) {}

  speak(): void {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak(): void {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak();  // 输出：Buddy barks.</code>

로그인 후 복사

TypeScript에서는 클래스의 속성과 메서드에 대한 유형을 지정하여 코드를 더욱 예측 가능하게 만들고 클래스의 인스턴스가 예상 구조를 따르도록 할 수 있습니다.

6. 일반: 유연하고 재사용 가능한 코드 작성

제네릭을 사용하면 모든 유형에서 작동하면서도 유형 안전성을 유지하는 함수, 클래스 및 인터페이스를 만들 수 있습니다. 각 유형에 대해 별도의 함수를 작성하는 대신 여러 유형에 작동하는 하나의 함수를 작성할 수 있습니다.

<code class="language-typescript">function identity<T>(arg: T): T {
  return arg;
}

console.log(identity("Hello"));  // 类型为string
console.log(identity(42));  // 类型为number</code>

로그인 후 복사

제네릭은 여러 유형을 처리해야 하는 라이브러리나 유틸리티와 같이 재사용 가능한 구성 요소나 기능을 만드는 데 특히 유용합니다.

TypeScript 시작하기

이제 기본 개념을 이해했으므로 기존 JavaScript 프로젝트에서 TypeScript를 어떻게 사용합니까?

TypeScript 설치 npm을 통해 TypeScript를 설치할 수 있습니다.

<code class="language-bash">npm install -g typescript</code>

로그인 후 복사

TypeScript 구성 파일 만들기 TypeScript는 구성 파일(tsconfig.json)을 사용하여 컴파일러 옵션과 프로젝트 구조를 지정합니다.

다음 명령을 실행하여 이 파일을 생성할 수 있습니다.

<code class="language-javascript">let message = "Hello, world!";
message = 42;  // 没有错误，即使类型已更改</code>

로그인 후 복사

.ts 파일 작성 TypeScript 코드는 일반적으로 .ts 확장자를 가진 파일로 작성됩니다. TypeScript 컴파일러(tsc)는 .ts 파일을 표준 JavaScript 파일로 컴파일할 수 있습니다.

<code class="language-typescript">let message: string = "Hello, world!";
message = 42;  // 错误：类型“number”无法分配给类型“string”</code>

로그인 후 복사

코드 컴파일 및 실행 TypeScript 코드를 작성한 후 다음을 실행하여 JavaScript로 컴파일할 수 있습니다.

<code class="language-typescript">interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25
};</code>

로그인 후 복사

이렇게 하면 브라우저나 Node.js에서 실행할 수 있는 JavaScript 파일이 생성됩니다.

요약

TypeScript는 JavaScript 개발을 더욱 효율적이고 안전하며 확장 가능하게 만드는 강력한 도구입니다. JavaScript의 동적 특성에 대한 유형을 소개하고 정적 분석과 더 나은 도구를 제공하여 오류를 줄이고 개발자 경험을 개선하는 데 도움이 됩니다.

이미 JavaScript에 익숙하다면 TypeScript는 배우기 쉽고 기존 코드 베이스에 점진적으로 채택할 수 있습니다. 유형 안전성, 더 나은 디버깅, 더 유지 관리하기 쉬운 코드라는 추가적인 이점으로 인해 소규모 프로젝트와 대규모 프로젝트 모두에 귀중한 투자가 됩니다.

TypeScript로 즐거운 프로그래밍을 즐겨보세요! ?

위 내용은 JavaScript 개발자를 위한 TypeScript 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!