JavaScript에서 TypeScript로 전환: 내 경험과 생각

처음 JavaScript를 배우기 시작했을 때 그 강력함과 유연성에 놀랐습니다. 나는 작은 스크립트를 작성하고, 대화형 웹사이트를 구축하고, 결국에는 더 복잡한 웹 애플리케이션을 다룰 수 있게 되었습니다. 그러나 프로젝트의 규모와 복잡성이 커지면서 TypeScript에 대해 더 많이 알게 되었고, TypeScript가 코드 품질과 유지 관리성을 향상시키는 데 어떻게 도움이 되는지, 특히 대규모 코드베이스를 디버깅하고 관리할 때 더욱 그렇습니다.

저의 펠로우쉽 기간 동안 우리는 스스로 새로운 언어를 배우고, 우리가 배운 모든 것의 정점인 최종 프로젝트를 구축하는 데 사용할 언어를 선택하는 임무를 받았습니다. 나는 정적 타이핑, 인터페이스, 향상된 개발자 지원과 같은 강력한 도구를 추가하는 동시에 JavaScript의 모든 기능을 포함하는 언어이기 때문에 종종 JavaScript의 상위 집합이라고 불리는 TypeScript를 사용하기로 결정했습니다. 이 블로그 후반부에서 자세히 설명할 이러한 추가 기능을 사용하면 특히 규모가 크고 복잡한 프로젝트에서 코드 작성, 디버그 및 유지 관리가 더 쉬워집니다.

TypeScript로 전환: 해당 기능으로 전환이 쉬워지는 방법

1. 더욱 스마트해진 도구와 코드 제안

TypeScript는 '유형'을 사용하여 작업 중인 데이터의 종류를 이해합니다. 이는 다음을 가능하게 합니다:

향상된 자동 완성: IDE(예: VS Code, WebStorm)는 변수에 사용할 수 있는 메서드와 속성을 이해하여 시간을 절약하고 실수를 줄입니다.

예를 들어 문자열로 작업할 때 편집기는 .toUpperCase(), .slice() 또는 .substring()과 같은 문자열별 메서드를 제안합니다. 마찬가지로 배열의 경우 .map(), .filter() 또는 .push()를 제안할 수 있습니다.

조기 오류 감지: TypeScript는 코드를 작성할 때 코드를 확인합니다(컴파일 타임 확인이라고 함). 숫자가 예상되는 문자열을 사용하려고 하면 프로그램을 실행하기 전에 TypeScript가 경고를 표시합니다.

더 쉬워진 탐색: 유형을 알면 편집기가 변수, 함수 또는 개체가 정의된 위치에 직접 연결할 수 있어 코드가 어떻게 결합되는지 빠르게 이해할 수 있습니다.

2. 버그를 조기에 잡아라

JavaScript를 사용하면 일부 버그는 프로그램이 실행 중일 때(런타임이라고도 함)에만 명백해질 수 있으며, 이는 디버그하는 데 시간이 많이 걸릴 수 있습니다. 반면에 TypeScript는 다음과 같습니다.

개발 중 버그 찾기: TypeScript는 문자열이 필요한 숫자를 사용하려고 시도하는 등 유형 불일치가 있을 때 경고를 제공하여 런타임 전에 잠재적인 논리적 문제를 파악하는 데 도움이 됩니다.

단순한 실수 방지: TypeScript는 철자가 틀린 변수 이름이나 잘못된 함수 인수와 같은 문제가 발생하기 전에 이를 포착합니다.
이렇게 하면 시간이 절약되고 제품 출시 전에 버그를 수정할 수 있습니다.

3. 더 쉬워진 코드 유지 관리

TypeScript를 사용하면 모든 것을 더욱 예측 가능하게 만들어 코드를 더 쉽게 읽고, 리팩터링하고, 업데이트할 수 있습니다.

명확한 데이터 흐름: 유형은 코드의 각 부분이 기대하고 반환하는 데이터의 종류를 정확히 보여줍니다. 이러한 명확성은 팀으로 작업하거나 이전 프로젝트를 다시 방문할 때 매우 중요합니다. 코드베이스가 커짐에 따라 TypeScript의 유형 주석을 사용하면 코드를 더 쉽게 유지 관리하고 리팩토링할 수 있습니다. 유형은 애플리케이션의 다양한 부분이 어떻게 상호 작용하는지 이해하는 데 도움이 되므로 장기적으로 관리하기가 더 쉽습니다.

더 안전한 변경: 함수 작동 방식을 변경하면 TypeScript는 영향을 받을 수 있는 코드의 모든 위치에 대해 경고하므로 실수로 문제가 발생하지 않습니다

더 빠른 디버깅: TypeScript는 개발 중에 문제를 포착하므로 버그를 추적하는 데 소요되는 시간을 줄이고 기능 구축에 더 많은 시간을 할애합니다.

4. 대규모 프로젝트에 적합

프로젝트가 성장함에 따라 JavaScript 관리가 지저분해질 수 있습니다. TypeScript는 다음과 같은 상황에서 빛을 발합니다.

복잡성 처리: TypeScript는 일관된 데이터 구조와 유형을 적용하여 코드를 체계적이고 확장 가능하게 유지합니다.

팀워크 향상: 유형을 사용하면 팀원이 서로의 코드를 더 쉽게 이해할 수 있어 오해가 줄어들고 개발 속도가 빨라집니다.

요점: 주요 TypeScript 기능

정적 입력: 변수가 보유해야 하는 데이터 유형(예: 문자열, 숫자 또는 개체)을 정의할 수 있습니다.

인터페이스: 객체의 모양을 정의하여 코드를 더욱 예측 가능하고 이해하기 쉽게 만듭니다.

향상된 도구: VS Code와 같은 도구는 TypeScript와 원활하게 작동하여 실시간 피드백과 스마트 탐색 옵션을 제공합니다.

JavaScript와의 상위 및 하위 호환성

TypeScript는 최신 JavaScript 기능을 지원하므로 새로운 표준에 맞춰 최신 코드를 작성할 수 있습니다. 또한 코드를 이전 JavaScript 버전으로 변환하여 이전 시스템에서 작동하도록 하여 이전 버전과의 호환성을 보장합니다.

예를 들어 TypeScript에서 async/await와 같은 최신 기능을 사용할 수 있으며 이를 지원하지 않는 이전 브라우저에서 작동하도록 코드가 자동으로 변환됩니다. 이렇게 하면 광범위한 호환성을 보장하면서 새로운 기능을 사용할 수 있다는 두 가지 장점을 모두 누릴 수 있습니다.

JavaScript와 TypeScript의 차이점

유형 주석:

JavaScript에서 변수는 동적으로 유형이 지정됩니다. 즉, 런타임 시 유형이 변경될 수 있습니다. 이러한 유연성으로 인해 추적하기 어려운 버그가 발생할 수도 있습니다.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

---

TypeScript는 변수 유형을 명시적으로 선언할 수 있도록 하여 이 문제를 해결합니다. 다른 유형의 값을 할당하려고 하면 TypeScript는 컴파일 타임에 오류를 발생시킵니다.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

이렇게 하면 크고 복잡한 코드베이스에서 버그가 발생할 수 있는 우발적인 유형 변경을 방지할 수 있습니다.

기능 유형 확인

JavaScript에서는 함수 유형이 느슨합니다. 함수에 모든 유형의 인수를 전달할 수 있으며 JavaScript는 논리적으로 이해되지 않는 경우에도 불평하지 않습니다.

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

---

TypeScript를 사용하면 함수 인수에 어떤 유형이 필요한지 명시적으로 정의하여 올바른 유형만 전달되도록 할 수 있습니다.

Javascript Example

function greet(name) {
  return `Hello, ${name}`;
}
greet("Alice");  // Works fine
greet(42);       // Also works, but it's not intended

이렇게 하면 함수가 예상대로 작동하고 런타임 시 잠재적인 버그가 줄어듭니다.

객체 구조용 인터페이스

JavaScript를 사용하면 유연한 구조로 개체를 정의할 수 있지만 이러한 유연성으로 인해 개체 속성이 잘못 수정되면 예측할 수 없는 버그가 발생할 수 있습니다.

Typescript Example

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

---

TypeScript에는 객체에 대한 특정 구조를 정의할 수 있는 인터페이스가 도입되었습니다. 이렇게 하면 객체가 설정된 패턴을 준수하고 객체 속성에 잘못된 데이터 유형을 할당하는 등의 오류를 방지할 수 있습니다.

Javascript Example 

let person = { name: "John", age: 30 };
person.age = "thirty";  // No error, but could cause issues later

이는 부적절하게 구조화된 데이터로 인해 발생하는 일반적인 버그를 방지하는 데 도움이 됩니다.

클래스와 상속

TypeScript는 클래스 속성 및 메서드에 대한 유형 안전성을 통해 JavaScript의 클래스 기반 구조를 확장하여 더욱 명확성과 예측 가능성을 제공합니다.

Typescript Example

interface Person {
  name: string;
  age: number;
}

let person: Person = { name: "John", age: 30 };
// person.age = "thirty";  // Error: Type 'string' is not assignable to type 'number'

---

TypeScript에서는 속성 유형과 메서드 반환 값을 정의하여 클래스를 더 예측 가능하게 만들고 오류 가능성을 줄일 수 있습니다.

Javascript Example

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

클래스에 추가된 유형 명확성은 상속 및 객체 지향 원칙이 사용되는 대규모 프로젝트를 관리하는 데 도움이 됩니다.

몇 가지 개인적인 통찰력

점진적인 채택과 새로 시작하는 것

선택하는 접근 방식은 프로젝트와 개인 목표에 따라 다릅니다. 소규모 프로젝트나 간단한 스크립트를 작업하는 경우 TypeScript의 점진적 채택 모델이 적합할 수 있습니다. TypeScript는 JavaScript의 상위 집합이므로 단계별로 소개할 수 있어 모든 것을 한 번에 리팩토링할 필요 없이 잠재적인 문제를 발견하는 데 도움이 됩니다.

대규모 프로젝트나 장기적인 확장성을 목표로 하는 프로젝트의 경우 새로운 TypeScript 프로젝트로 새로 시작하는 것이 종종 최선의 선택입니다. 이를 통해 정적 타이핑 및 향상된 코드 구성을 포함하여 처음부터 TypeScript의 이점을 완전히 활용할 수 있습니다. 새로 시작하면 TypeScript를 기존 코드베이스에 통합하는 데 따른 복잡성을 피하고 처음부터 모범 사례를 적용하여 코드가 더 깔끔하고 유지 관리가 용이하며 오류 발생 가능성이 줄어듭니다.

엄격 모드 활성화

TypeScript를 최대한 활용하려면
에서 엄격 모드를 활성화하세요. tsconfig.json 파일입니다. 이렇게 하면 모든 엄격한 유형 검사 기능이 활성화되어 코드가 더욱 강력해지고 더 많은 잠재적인 오류를 포착할 수 있습니다.

Javascript Example
let message = "Hello, world!";
message = 77;  // No error, but can cause issues later
message = true; // Also works, but may cause bugs

TypeScript의 모든 유형 이해:

any 유형을 사용하면 특정 변수나 함수에 대한 TypeScript의 엄격한 유형 지정을 일시적으로 우회할 수 있습니다. 변수가 제한 없이 모든 유형의 값을 보유할 수 있는 JavaScript 모드로 돌아가는 것으로 생각하십시오.

Typescript Example

let message: string = "Hello, world!";
// message = 77;  // Error: Type 'number' is not assignable to type 'string'
// message = true; // Error: Type 'boolean' is not assignable to type 'string'

이는 언어에 익숙해지는 데 도움이 되지만 너무 많이 의존하면 TypeScript의 핵심 이점인 유형 안전성이 약화될 수 있습니다. 가능한 한 빨리 보다 구체적인 유형을 사용하기 시작하는 것이 좋습니다. 이렇게 하면 TypeScript의 유형 검사를 최대한 활용하고, 유형 검사에 의존하지 않고, 나중에 더 적은 수의 리팩터링으로 보다 원활한 학습 경험을 보장할 수 있습니다.

결론:

TypeScript는 JavaScript에 익숙한 개발자를 위한 강력한 도구로, 유형 안전성, 도구 및 유지 관리 측면에서 상당한 이점을 제공합니다. 코드 예측 가능성을 향상시키고 버그를 줄임으로써 TypeScript는 JavaScript 기술을 향상시키려는 사람들에게 탁월한 선택입니다. 기존 JavaScript 프로젝트에 완벽하게 통합되며 점진적인 학습 곡선을 통해 모든 수준의 개발자가 원활하게 전환할 수 있습니다.

TypeScript 환경으로 전환한 이후로 저는 TypeScript에 내장된 오류 포착 기능에 익숙해졌고 종종 이를 개발 프로세스의 일부로 당연하게 여겼습니다. JavaScript에 대한 이전 경험을 되돌아보고 나서야 이제 TypeScript의 유형 검사 기능에 얼마나 의존하고 있는지 깨닫게 되었습니다.

그래도 저는 JavaScript에 많은 빚을 지고 있습니다. 이는 제가 웹 개발에 뛰어들 때 처음 사용한 언어였으며 간단한 애플리케이션을 구축하는 실습 경험을 제공했습니다. JavaScript를 사용한 초기 시절, 특히 싱글 페치 작업과 같은 프로젝트를 작업할 때 개발자로서의 성장을 형성하는 데 핵심이었습니다. 단순함이 여전히 빛나는 소규모의 유연한 프로젝트에서 제가 선호하는 제품입니다.

고마워요, JavaScript - 안녕하세요, TypeScript!

그 과정에서 나를 지원해 준 리소스

• https://youtu.be/zQnBQ4tB3ZA?si=38FjZEWGdjCM3END
• https://www.codecademy.com/learn/learn-typescript
• https://www.typescriptlang.org/docs/

TypeScript 설정에 대한 자세한 내용과 가이드는 이 블로그를 확인하세요.

• https://dev.to/sovannaro/typescript-roadmap-2024-step-by-step-9i4

위 내용은 JavaScript에서 TypeScript로 전환: 내 경험과 생각의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!