최근 TypeScript 5가 공개되면서 개발자들 사이에서 큰 관심을 불러일으켰습니다. 이번 버전은 프로그래밍 경험을 전례 없는 수준으로 끌어올릴 수많은 혁신적인 기능과 개선 사항을 자랑합니다.
단순화된 함수 반환 및 접근자 유형
자바스크립트에서 함수를 생성하고 반환문을 만나지 않고 실행하면 정의되지 않은 값을 자동으로 반환합니다.
TypeScript의 최신 버전인 버전 5.1에서는 이제 정의되지 않은 값을 렌더링하는 함수에서 반환 키워드를 완전히 사용하지 않도록 허용합니다. 이 혁신은 코드 작성의 명확성을 높일 뿐만 아니라 간결성에도 기여합니다.
function logMessage(message: string): undefined {
console.log(message);
// No return statement needed here
}
주어진 코드 조각은 콘솔에 메시지를 인쇄하기 위한 “logMessage”라는 함수의 구현을 보여줍니다. 그러나 이 함수는 명시적인 값을 반환하지 않습니다.
게터 및 세터에 대한 관련 없는 유형
TypeScript의 최신 릴리스인 버전 5.1에서는 명시적 유형 주석이 제공되는 경우 게터 및 세터에서 관련 없는 유형을 활용할 수 있는 새로운 기능이 도입되었습니다.
이 개선 사항의 구현은 속성을 획득하고 변경하기 위해 서로 다른 분류를 적용하는 효과적인 수단으로 사용되어 액세스 및 수정 권한을 보다 강력하게 제어할 수 있습니다.
class User {
private _name: string | null = null;
set name(newName: string) {
this._name = newName;
}
get name(): string {
return this._name ?? 'Unknown';
}
}
사용자 클래스는 문자열 또는 널일 수 있는 불연속적인 `_name` 속성을 보유합니다. name` 접근자는 제공된 문자열 유형의 `새 이름`을 받아들여 `_name`의 값으로 설정합니다. name` 리트리버는 `_name`이 널이 아닌 경우 값을 반환하고, 널인 경우 “알 수 없음”을 반환합니다.
“이 메커니즘을 구현함으로써 ‘name’ 속성을 문자열 값으로만 초기화할 수 있도록 하는 동시에 ‘name’ 속성이 설정되기 전에 검색할 때 ‘알 수 없음’의 인스턴스를 반환할 가능성도 허용합니다.
이 기능을 활용하면 아래 그림에서 볼 수 있듯이 보다 탄력적이고 표현력 있는 유형 지정이 가능합니다.
interface CSSStyleRule {
// Always reads as a `CSSStyleDeclaration`
get style(): CSSStyleDeclaration;
// Can only write a `string` here.
set style(newValue: string);
}
앞서 언급한 인스턴스에는 CSSStyleDeclaration을 검색하는 getter 함수와 문자열을 매개변수로 받는 setter 함수가 서로 유사함에도 불구하고 함께 표시됩니다. 이는 TypeScript 버전 5.1의 특징입니다.
JSX 개선 사항
TypeScript의 최신 릴리스인 버전 5.1은 JSX와 관련하여 여러 가지 개선 사항을 제공합니다.특히 JSX 엘리먼트와 태그 유형에 대한 독립적인 타입 검사가 가능하므로 Redux와 같이 컴포넌트가 단순한 JSX 엘리먼트 이상의 것을 생성할 수 있는 라이브러리에 유용할 수 있습니다.
import * as React from "react";
async function AsyncComponent() {
return <div>Loaded</div>;
}
// This is now allowed:
let element = <AsyncComponent />;
이 예시는 JSX 요소를 산출하는 비동기 함수의 예시입니다. TypeScript 5.1의 등장으로 이전 프로그래밍 언어에서는 사용할 수 없었던 기능인 JSX 컴포넌트와 같은 함수를 활용할 수 있게 되었습니다.
TypeScript의 최신 버전인 버전 5.1에는 React에서 도입한 새로운 자바스크립트 변환인 JSX 트랜스폼이 통합되어 있어 사용자가 React를 임포트할 필요 없이 JSX 구문을 활용할 수 있습니다.
// Before
import React from "react";
function Component() {
return <h1>Hello, world!</h1>;
}
// After
function Component() {
return <h1>Hello, world!</h1>;
}
앞서 언급한 Component 함수는 그 연산을 통해 JSX 엘리먼트를 생성합니다. TypeScript 5.1과 React 17부터는 React를 임포트하지 않고도 JSX를 활용할 수 있습니다.
TypeScript 5.1의 성능 향상 및 주요 변경 사항
TypeScript의 최신 릴리스인 5.1 버전에는 전반적인 성능을 향상시키기 위해 설계된 여러 가지 개선 사항이 포함되어 있습니다. 이러한 개선 사항은 속도, 메모리 및 패키지 크기 최적화뿐만 아니라 불필요한 유형 인스턴스화 빈도 감소, 유니온 리터럴의 보다 효율적인 처리 구현, JSDoc 구문 분석 중 스캐너 호출 횟수 최소화 등의 범주에 속합니다.
외부 유형 매개변수에 대한 참조를 보유하지 않는 객체 내에서 유형 사양의 활용도를 줄이면서 공용체 리터럴 검사 속도를 개선한 사례는 다음과 같습니다.
type Union = 'a' | 'b' | 'c';
function check(value: Union) {
// ...
}
TypeScript 5.1을 활용하면 유니온 내의 각 개별 유형과 비교할 필요 없이 주어진 값이 유니온 유형에 속하는지 여부를 효율적으로 확인할 수 있습니다.
type Point = { x: number, y: number };
function translate(point: Point, dx: number, dy: number): Point {
return { x: point.x + dx, y: point.y + dy };
}
let p: Point = { x: 1, y: 2 };
p = translate(p, 1, 1);
Point 유형은 비일반 객체 유형으로, TypeScript 5.1의 번역 함수로 호출하면 유형 인스턴스화를 최적화할 수 있어 유형 검사 속도가 빨라집니다.
TypeScript 5.1 수용
TypeScript의 최신 릴리스인 버전 5.1은 JavaScript 개발을 크게 변화시킬 수 있는 몇 가지 주목할 만한 개선 및 개선 사항을 자랑합니다. 이러한 업데이트에는 함수 반환문 처리를 위한 간소화된 기능, JSX 구문에 대한 향상된 지원 및 다양한 성능 향상 조치가 포함됩니다. 이러한 발전으로 이제 개발자는 더 나은 유형 검사 및 향상된 성능을 누리면서 더욱 우아하고 정확한 코드를 작성할 수 있습니다.
TypeScript 5.1을 도입하면 개발자는 새로운 기회를 탐색하고 생산성과 창의성을 높여 JavaScript 프로젝트를 개선할 수 있습니다. 이 최신 버전의 TypeScript 구현은 더욱 정교하고 최적화된 JavaScript 개발 환경에 액세스할 수 있는 진입점 역할을 합니다.