TypeScript 5.0의 새로운 기능: 선언자, Const 유형, 열거형 개선, 속도 등!

TypeScript 5.0은 2023년 3월 16일에 공식 출시되었으며 이제 모든 사람이 사용할 수 있습니다. 이 릴리스에서는 TypeScript를 더 작고, 더 간단하고, 더 빠르게 만드는 것을 목표로 하는 많은 새로운 기능을 소개합니다.

이 새로운 릴리스는 클래스 사용자 지정을 위한 데코레이터를 현대화하여 재사용 가능한 방식으로 클래스 및 해당 구성원을 사용자 지정할 수 있습니다. 이제 개발자는 형식 매개 변수 선언에 const 한정자를 추가하여 const와 유사한 추론을 기본값으로 허용할 수 있습니다. 새 릴리스는 또한 모든 열거형을 통합 열거형으로 만들어 코드 구조를 단순화하고 TypeScript 경험을 가속화합니다.

이 기사에서는 TypeScript 5.0에 도입된 변경 사항을 살펴보고 새로운 기능에 대해 자세히 살펴봅니다.

TypeScript 5.0 시작하기

TypeScript는 npm을 사용하여 프로젝트에 설치할 수 있는 공식 컴파일러입니다. 프로젝트에서 TypeScript 5.0 사용을 시작하려면 프로젝트 디렉터리에서 다음 명령을 실행할 수 있습니다.

 npm install -D typescript

이제 npx tsc 명령으로 실행할 수 있는 node_modules 디렉터리에 컴파일러가 설치됩니다.

이 설명서의 Visual Studio Code에서 최신 버전의 TypeScript를 사용하는 방법에 대한 지침도 찾을 수 있습니다.

TypeScript 5.0의 새로운 기능은 무엇입니까?

이 기사에서는 TypeScript에 도입된 5가지 주요 업데이트를 살펴보겠습니다. 이러한 기능에는 다음이 포함됩니다.

현대화된 데코레이터

데코레이터는 한동안 TypeScript에서 실험적 플래그로 사용되었지만 새 릴리스에서는 ECMAScript 제안을 통해 속도를 높였습니다. 현재 3단계에 있으며 TypeScript에 추가되는 단계에 있음을 의미합니다.

데코레이터는 재사용 가능한 방식으로 클래스와 해당 멤버의 동작을 사용자 지정하는 방법입니다. 예를 들어, 두 가지 메서드가 있는 클래스가 있는 경우 greet 및 getAge :

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}.`); } getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

실제 사용 사례에서 이 클래스에는 일부 비동기 논리를 처리하고 부작용 등이 있는 더 복잡한 메서드가 있어야 합니다. 여기서 일부 console.log 호출을 던져 메서드를 디버깅하는 데 도움이 됩니다.

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet() { console.log('LOG: Method Execution Starts.'); console.log(`Hello, my name is ${this.name}.`); console.log('LOG: Method Execution Ends.'); } getAge() { console.log('LOG: Method Execution Starts.'); console.log(`I am ${this.age} years old.`); console.log('Method Execution Ends.'); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

이것은 자주 발생하는 패턴이며 모든 방법에 적용할 수 있는 솔루션이 있으면 편리합니다.

데코레이터가 작동하는 곳입니다. 다음과 같이 나타나는 debugMethod 라는 함수를 정의할 수 있습니다.

 function debugMethod(originalMethod: any, context: any) { function replacementMethod(this: any, ...args: any[]) { console.log('Method Execution Starts.'); const result = originalMethod.call(this, ...args); console.log('Method Execution Ends.'); return result; } return replacementMethod; }

위의 코드에서 debugMethod 원래 메서드( originalMethod )를 사용하고 다음을 수행하는 함수를 반환합니다.

1. "Method Execution Starts."라는 메시지를 기록합니다.
2. 원래 메서드와 모든 인수(이 포함)를 전달합니다.
3. "Method Execution Ends." 메시지를 기록합니다.
4. 원래 메서드가 반환한 모든 것을 반환합니다.

데코레이터를 사용하면 아래 코드와 같이 debugMethod 메서드에 적용할 수 있습니다.

 class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } @debugMethod greet() { console.log(`Hello, my name is ${this.name}.`); } @debugMethod getAge() { console.log(`I am ${this.age} years old.`); } } const p = new Person('Ron', 30); p.greet(); p.getAge();

그러면 다음이 출력됩니다.

 LOG: Entering method. Hello, my name is Ron. LOG: Exiting method. LOG: Entering method. I am 30 years old. LOG: Exiting method.

데코레이터 함수( debugMethod )를 정의할 때 context 두 번째 매개 변수가 전달됩니다(컨텍스트 개체입니다. 장식된 메서드가 선언된 방법과 메서드 이름에 대한 유용한 정보가 있습니다). context 개체에서 메서드 이름을 가져오도록 debugMethod 업데이트할 수 있습니다.

 function debugMethod( originalMethod: any, context: ClassMethodDecoratorContext ) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`'${methodName}' Execution Starts.`); const result = originalMethod.call(this, ...args); console.log(`'${methodName}' Execution Ends.`); return result; } return replacementMethod; }

코드를 실행하면 이제 출력에 debugMethod 데코레이터로 장식된 각 메서드의 이름이 표시됩니다.

 'greet' Execution Starts. Hello, my name is Ron. 'greet' Execution Ends. 'getAge' Execution Starts. I am 30 years old. 'getAge' Execution Ends.

데코레이터로 할 수 있는 일이 더 있습니다. TypeScript에서 데코레이터를 사용하는 방법에 대한 자세한 내용은 원본 풀 요청을 확인하십시오.

const 유형 매개변수 소개

이것은 함수를 호출할 때 얻는 추론을 개선하기 위해 제네릭이 있는 새로운 도구를 제공하는 또 다른 큰 릴리스입니다. 기본적으로 const 로 값을 선언하면 TypeScript는 리터럴 값이 아닌 유형을 유추합니다.

 // Inferred type: string[] const names = ['John', 'Jake', 'Jack'];

지금까지 원하는 추론을 달성하려면 "as const"를 추가하여 const 어설션을 사용해야 했습니다.

 // Inferred type: readonly ["John", "Jake", "Jack"] const names = ['John', 'Jake', 'Jack'] as const;

함수를 호출할 때도 비슷합니다. 아래 코드에서 유추된 국가 유형은 string[] 입니다.

 type HasCountries = { countries: readonly string[] }; function getCountriesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: string[] const countries = getCountriesExactly({ countries: ['USA', 'Canada', 'India'] });

이전에 수정할 수 있는 한 가지 방법은 as const 어설션을 추가하는 것보다 더 구체적인 유형을 원할 수 있습니다.

 // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] } as const);

이것은 기억하고 구현하기 어려울 수 있습니다. 그러나 TypeScript 5.0에는 유형 매개 변수 선언에 const 수정자를 추가할 수 있는 새로운 기능이 도입되어 const와 유사한 추론을 기본값으로 자동 적용합니다.

 type HasCountries = { countries: readonly string[] }; function getNamesExactly(arg: T): T['countries'] { return arg.countries; } // Inferred type: readonly ["USA", "Canada", "India"] const names = getNamesExactly({ countries: ['USA', 'Canada', 'India'] });

const 유형 매개변수를 사용하면 개발자가 코드에서 의도를 보다 명확하게 표현할 수 있습니다. 변수가 일정하고 절대 변경되지 않는 경우 const 유형 매개변수를 사용하면 실수로 변경되지 않도록 할 수 있습니다.

TypeScript에서 const 유형 매개변수가 작동하는 방식에 대한 자세한 내용은 원본 풀 요청을 확인할 수 있습니다.

열거형 개선 사항

TypeScript의 열거형은 개발자가 명명된 상수 집합을 정의할 수 있는 강력한 구조입니다. TypeScript 5.0에서는 열거형이 더욱 유연하고 유용하도록 개선되었습니다.

예를 들어 함수에 전달된 다음 열거형이 있는 경우:

 enum Color { Red, Green, Blue, } function getColorName(colorLevel: Color) { return colorLevel; } console.log(getColorName(1));

TypeScript 5.0이 도입되기 전에는 잘못된 수준 번호를 전달할 수 있었고 오류가 발생하지 않았습니다. 그러나 TypeScript 5.0의 도입으로 즉시 오류가 발생합니다.

또한 새 릴리스에서는 계산된 각 구성원에 대해 고유한 유형을 생성하여 모든 열거형을 공용체 열거형으로 만듭니다. 이 개선 사항을 통해 모든 열거형의 범위를 좁히고 해당 멤버를 유형으로 참조할 수 있습니다.

 enum Color { Red, Purple, Orange, Green, Blue, Black, White, } type PrimaryColor = Color.Red | Color.Green | Color.Blue; function isPrimaryColor(c: Color): c is PrimaryColor { return c === Color.Red || c === Color.Green || c === Color.Blue; } console.log(isPrimaryColor(Color.White)); // Outputs: false console.log(isPrimaryColor(Color.Red)); // Outputs: true

TypeScript 5.0의 성능 향상

TypeScript 5.0에는 코드 구조, 데이터 구조 및 알고리즘 확장에 대한 수많은 중요한 변경 사항이 포함되어 있습니다. 이것은 설치에서 실행에 이르기까지 전체 TypeScript 경험을 개선하여 더 빠르고 효율적으로 만드는 데 도움이 되었습니다.

예를 들어 TypeScript 5.0과 4.9의 패키지 크기 차이는 상당히 인상적입니다.

TypeScript는 최근 네임스페이스에서 모듈로 마이그레이션되어 범위 호이스팅과 같은 최적화를 수행할 수 있는 최신 빌드 도구를 활용할 수 있습니다. 또한 일부 사용되지 않는 코드를 제거하면 TypeScript 4.9의 63.8MB 패키지 크기에서 약 26.4MB가 줄었습니다.

다음은 TypeScript 5.0과 4.9 사이의 속도와 크기 면에서 몇 가지 더 흥미로운 승리입니다.

더 나은 모듈 분해능을 위한 번들러 분해능

TypeScript에서 import 문을 작성할 때 컴파일러는 import가 무엇을 참조하는지 알아야 합니다. 모듈 해상도를 사용하여 이를 수행합니다. 예를 들어 import { a } from "moduleA" 작성할 때 컴파일러는 사용을 확인하기 위해 moduleA 에서 a 의 정의를 알아야 합니다.

TypeScript 4.7에서 --module 및 moduleResolution 설정에 대한 두 가지 새로운 옵션인 node16 및 nodenext 가 추가되었습니다.

이러한 옵션의 목적은 Node.js의 ECMAScript 모듈에 대한 정확한 조회 규칙을 보다 정확하게 나타내는 것입니다. 그러나 이 모드에는 다른 도구에서는 적용되지 않는 몇 가지 제한 사항이 있습니다.

예를 들어 Node.js의 ECMAScript 모듈에서 상대 가져오기가 올바르게 작동하려면 파일 확장자가 포함되어야 합니다.

 import * as utils from "./utils"; // Wrong import * as utils from "./utils.mjs"; // Correct

TypeScript는 "moduleResolution 번들러"라는 새로운 전략을 도입했습니다. 이 전략은 TypeScript 구성 파일의 "compilerOptions" 섹션에 다음 코드를 추가하여 구현할 수 있습니다.

 { "compilerOptions": { "target": "esnext", "moduleResolution": "bundler" } }

이 새로운 전략은 Vite, esbuild, swc, Webpack, Parcel 및 기타 하이브리드 조회 전략을 활용하는 최신 번들러를 사용하는 사람들에게 적합합니다.

TypeScript에서 moduleResolution 번들러가 작동하는 방식에 대한 자세한 내용은 원본 풀 요청 및 해당 구현을 확인할 수 있습니다.

지원 중단

TypeScript 5.0에는 런타임 요구 사항, lib.d.ts 변경 사항 및 API 주요 변경 사항을 포함하여 일부 감가 상각이 포함되어 있습니다.

1. 런타임 요구 사항: TypeScript는 이제 ECMAScript 2018을 대상으로 하며 패키지는 최소 엔진 기대치를 12.20으로 설정합니다. 따라서 Node.js 사용자는 TypeScript 5.0을 사용하려면 최소 버전 12.20 이상이 있어야 합니다.
2. lib.d.ts 변경 사항: 기존 코드에 영향을 미칠 수 있는 DOM의 유형 생성 방법에 몇 가지 변경 사항이 있습니다. 특히 특정 속성이 숫자에서 숫자 리터럴 유형으로 변환되었으며 잘라내기, 복사 및 붙여넣기 이벤트 처리를 위한 속성과 메서드가 인터페이스 간에 이동되었습니다.
3. API 주요 변경 사항: 일부 불필요한 인터페이스가 제거되었으며 정확성이 일부 개선되었습니다. TypeScript 5.0도 모듈로 이동했습니다.

TypeScript 5.0은 target: ES3 , out , noImplicitUseStrict , keyofStringsOnly , suppressExcessPropertyErrors , suppressImplicitAnyIndexErrors , noStrictGenericChecks , charset , importsNotUsedAsValues ​​및 preserveValueImports 를 포함한 특정 설정 및 해당 값을 더 이상 사용하지 않으며 프로젝트 참조에 추가됩니다.

이러한 구성은 TypeScript 5.5까지 유효하지만 사용자가 여전히 이를 사용하고 있음을 알리는 경고가 발행됩니다.

요약

이 기사에서는 속도 및 크기 개선과 함께 열거형, 번들러 해상도 및 const 유형 매개변수 개선과 같은 TypeScript 5.0의 주요 기능 및 개선 사항 중 일부를 배웠습니다.

다음 프로젝트를 위한 TypeScript에 대해 생각하고 있다면 Kinsta의 애플리케이션 호스팅을 무료로 사용해 보십시오.

이제 당신의 차례입니다! TypeScript 5.0에서 가장 매력적인 기능이나 개선 사항은 무엇입니까? 우리가 간과했을 수 있는 중요한 사항이 있습니까? 댓글로 알려주세요.