<div id="readability-page-1" class="page"><div><div><div><a rel="noopener" href="/?source=post_page-----ef5ab7f6bb6b--------------------------------"><img alt="Dongmin Jang" src="https://miro.medium.com/fit/c/56/56/1*RBfR8MoT_zPwbzfWAGb0gw.jpeg" width="28" height="28"></a></div><figure><div role="button" tabindex="0"><img alt="" src="https://miro.medium.com/max/1440/1*Mg0vEsHQGHVB4cpHm8p9_Q.jpeg" width="720" height="566" role="presentation"></div></figure>Vue(Nuxt) + Typescript 조합으로 새로운 프로젝트를 준비하던 중에 typescript 4.0이 배포되어 정리해 봅니다.<h2 id="f24b">Variadic Tuple Types</h2><blockquote>첫번째 변화는 tuple type 에서의 spread가 generic이 될 수 있다는 것이다. 이 말은 우리가 실제 type을 모른다 하더라도 tuple, array에서 higher-order operations으로 표현할 수 있다는 것이다. generic spreads가 이러한 tuple type에서 인스턴스화 되면(또는 실제타입으로 대체되면), 또다른 array 나 tuple을 만들어 낼 것이다.</blockquote><pre>function tail&lt;T extends any[]&gt;(arr: readonly [any, ...T]) { const [_ignored, ...rest] = arr; return rest; }const myTuple = [1, 2, 3, 4] as const; const myArray = ["hello", "world"];const r1 = tail(myTuple); // ^ = const r1: [2, 3, 4]const r2 = tail([...myTuple, ...myArray] as const); // ^ = const r2: [2, 3, 4, ...string[]]</pre><blockquote>두번째 변화는 rest element가 tuple 어디에도 위치할 수 있다 — 끝에 두지 않아도 된다는 것!</blockquote><pre>type Strings = [string, string]; type Numbers = number[]; type StrStrNumNumBool = [...Strings, ...Numbers, boolean]; // ^ = type StrStrNumNumBool = [string, string, ...(number | boolean)[]</pre>위 두 특징을 조합해서 type을 잘 정리한 <code>concat</code> 을 만들 수 있습니다. (override를 할 필요가 없어졌네요)<pre>type Arr = readonly any[];function concat&lt;T extends Arr, U extends Arr&gt;(arr1: T, arr2: U): [...T, ...U] { return [...arr1, ...arr2]; }</pre>rest paramers 나 rest tuple 에 대한 추론 기능도 향상되서 아래와 같이 할 수 도 있습니다.<pre>type Arr = readonly unknown[];function partialCall&lt;T extends Arr, U extends Arr, R&gt;( f: (...args: [...T, ...U]) =&gt; R, ...headArgs: T ) { return (...tailArgs: U) =&gt; f(...headArgs, ...tailArgs); }</pre>위와 같이 코드를 작성하면 어떤 paremeter가 초기화 될 수 있는지, return function이 정확하게 실행 여부를 판단 할 수 있습니다.(partialCall에 대해, 위에서는 paremer가 어떻게 위치되는지를 명시해줬다면, 아래 코드에서 parameter의 타입 형식을 정확히 잡아줌)<pre>const foo = (x: string, y: number, z: boolean) =&gt; {};const f1 = partialCall(foo, 100);// number가 아닌 string이 두번째 인자로 와야 합니다const f2 = partialCall(foo, "hello", 100, true, "oops");// 인자가 한개 더 들어왔네요// This works! const f3 = partialCall(foo, "hello"); // ^ = const f3: (y: number, z: boolean) =&gt; void// What can we do with f3 now?// Works! f3(123, true);f3(); // 인자가 안들어옴f3(123, "hello"); // strin이 아닌 boolean이 들어와야 함</pre><h2 id="f38f">Labeled Tuple Elements</h2><blockquote>tuple에 label을 붙이면 가독성이 좋아집니다.</blockquote><pre>function foo(...args: [string, number]): void { // ... }// 아래와 같이 표현 할 수도 있습니다. function foo(arg0: string, arg1: number): void { // ... }foo("hello", 42);foo("hello", 42, true); // 인자가 2개만 들어와야 되는데 3개나 들어왔네요foo("hello"); // 인자가 2개 들어와야 되는데 1개만 들어왔네요</pre></div><div><pre>// 가독성! type Range = [start: number, end: number];type Foo = [first: number, second?: string, ...rest: any[]];type Bar = [first: string, number]; // 모두 이름을 붙이던가 아니면 안붙이던가 통일해야 합니다function foo(x: [first: string, second: number]) { // ... // 변수에 tuple label을 사용할 필요는 없습니다. const [a, b] = x; a // ^ = const a: string b // ^ = const b: number }type Name = | [first: string, last: string] | [first: string, middle: string, last:string]function createPerson(...name: Name) { // ... }createPerson() &lt;== IDE(vs code)에서 guide text가 나옵니다</pre><h2 id="ec7e">Class Property Inference from Constructors</h2>class의 member 변수는 생성자를 추론해서 변수를 할당되거나 undefiend가 암묵적으로 들어가게 됩니다.그런데 아래와 같이 annotation을 이용해서 type을 명시할 수 있습니다.<pre>class Square { // definite assignment assertion // v sideLength!: number; // type annotation constructor(sideLength: number) { this.initialize(sideLength); } initialize(sideLength: number) { this.sideLength = sideLength; } get area() { return this.sideLength ** 2; }}</pre><h2 id="b9c0">Short-Circuiting Assignment Operators</h2>logical and (<code>&amp;&amp;</code>), logical or (<code>||</code>), and nullish coalescing (<code>??</code>).<code>&amp;&amp;=</code>, <code>||=</code>, and <code>??=</code>.<pre>// could be 'a ||= b' if (!a) { a = b; }</pre></div><div><pre>let values: string[]; (values ?? (values = [])).push("hello"); // After (values ??= []).push("hello");</pre></div><div><pre>obj.prop ||= foo();// 아래 둘과 비슷obj.prop || (obj.prop = foo());if (!obj.prop) { obj.prop = foo(); }</pre></div><div><pre>const obj = { get prop() { console.log("getter has run"); // Replace me! return Math.random() &lt; 0.5; }, set prop(_val: boolean) { console.log("setter has run"); }}; function foo() { console.log("right side evaluated"); return true;}console.log("항상 setter를 실행"); obj.prop = obj.prop || foo();console.log("이건 항상 실행되지 않음"); obj.prop ||= foo();</pre><h2 id="e5ca"><code>Unknown</code> on <code>catch</code> Clause Bindings</h2><blockquote>catch의 변수에 기본적으로 any가 type으로 지정되서 코드를 마음대로 작성할 수 있는데, 이렇게 되면 에러 핸들링에 대한 코드에서 에러가 발생할 수 있다. 그래서 unknown을 이용해서 type을 확인하도록 상기시켜주는 것이 좋다.</blockquote><pre>try { // ...} catch (e: unknown) { // unkown에 바로 접근 못함 console.log(e.toUpperCase()); // Object is of type 'unknown'. if (typeof e === "string") { // We've narrowed 'e' down to the type 'string'. console.log(e.toUpperCase()); }}</pre><h2 id="f65a">Custom JSX Factories</h2><pre>{ compilerOptions: { target: "esnext", module: "commonjs", jsx: "react", jsxFactory: "h", jsxFragmentFactory: "Fragment", }, }</pre></div><div><pre>// Note: these pragma comments need to be written // with a JSDoc-style multiline syntax to take effect./** @jsx h */ /** @jsxFrag Fragment */import { h, Fragment } from "preact";export const Header = ( &lt;&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;/&gt;);…아래 코드로 나올거에요// Note: these pragma comments need to be written // with a JSDoc-style multiline syntax to take effect./** @jsx h */ /** @jsxFrag Fragment */import { h, Fragment } from "preact"; export const Header = (h(Fragment, null, h("h1", null, "Welcome")));</pre><h2 id="ac69">Speed Improvements in <code>build</code> mode with <code>--noEmitOnError</code></h2><code>--noEmitOnError</code> flag를 사용할 때, 컴파일이 한번 진행 된 후(<code>—- incremental</code> error)의 다음 컴파일이 엄청 느렸는데, 이게 개선되었습니다.<code>-— noEmitOnError</code> 때문에 이전 컴파일의 빈 정보가 .tsbuildinfo 파일이 캐시 되어서 그런 문제라고 합니다.<blockquote>— build mode scenarios (<code>--incremental</code> and <code>--noEmitOnError</code>)</blockquote><h2 id="e004"><code>--incremental</code> with <code>--noEmit</code></h2><code>-— incremental</code> 컴파일이 될 때에도 <code>—- noEmit</code> flag를 사용할 수 있다고 합니다. 이전에는 <code>—- incremental</code> flag가 .tsbuildinfo 파일에 eimit을 해야 했는데, 속도때문에 바뀐거 같습니다.<h2 id="5da0">Editor Improvements</h2><h2 id="5e6c">Convert to Optional Chaining</h2>vs code에서 popup메뉴로 손쉽게 할 수 있게 되었습니다.<h2 id="a96d"><code>/** @deprecated */</code> Support</h2>deprecated 주석을 사용하면 vs code 에서 popup으로 guide 문국가 노출 됩니다.<h2 id="97c5">Smarter Auto-Imports</h2><code>@type</code> 을 이용해서 vs code에서 손쉽게 ts type을 사용할 수 있게 되었습니다.</div></div></div>

Stories by Dongmin Jang on Medium

Vue(Nuxt) + Typescript 조합으로 새로운 프로젝트를 준비하던 중에 typescript 4.0이 배포되어 정리해 봅니다.
Variadic Tuple Types
첫번째 변화는 tuple type 에서의 spread가 generic이 될 수 있다는 것이다. 이 말은 우리가 실제 type을 모른다 하더라도 tuple, array에서 higher-order operations으로 표현할 수 있다는 것이다. generic spreads가 이러한 tuple type에서 인스턴스화 되면(또는 실제타입으로 대체되면), 또다른 array 나 tuple을 만들어 낼 것이다.
function tail<T extends any[]>(arr: readonly [any, ...T]) {
 const [_ignored, ...rest] = arr;
 return rest;
}
const myTuple = [1, 2, 3, 4] as const;
const myArray = ["hello", "world"];
const r1 = tail(myTuple);
// ^ = const r1: [2, 3, 4]
const r2 = tail([...myTuple, ...myArray] as const);
// ^ = const r2: [2, 3, 4, ...string[]]
두번째 변화는 rest element가 tuple 어디에도 위치할 수 있다 — 끝에 두지 않아도 된다는 것!
type Strings = [string, string];
type Numbers = number[];
type StrStrNumNumBool = [...Strings, ...Numbers, boolean];
// ^ = type StrStrNumNumBool
 = [string, string, ...(number | boolean)[]
위 두 특징을 조합해서 type을 잘 정리한 concat 을 만들 수 있습니다.
(override를 할 필요가 없어졌네요)
type Arr = readonly any[];
function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
 return [...arr1, ...arr2];
}
rest paramers 나 rest tuple 에 대한 추론 기능도 향상되서 아래와 같이 할 수 도 있습니다.
type Arr = readonly unknown[];
function partialCall<T extends Arr, U extends Arr, R>(
 f: (...args: [...T, ...U]) => R,
 ...headArgs: T
) {
 return (...tailArgs: U) => f(...headArgs, ...tailArgs);
}
위와 같이 코드를 작성하면 어떤 paremeter가 초기화 될 수 있는지, return function이 정확하게 실행 여부를 판단 할 수 있습니다.
(partialCall에 대해, 위에서는 paremer가 어떻게 위치되는지를 명시해줬다면, 아래 코드에서 parameter의 타입 형식을 정확히 잡아줌)
const foo = (x: string, y: number, z: boolean) => {};
const f1 = partialCall(foo, 100);
// number가 아닌 string이 두번째 인자로 와야 합니다
const f2 = partialCall(foo, "hello", 100, true, "oops");
// 인자가 한개 더 들어왔네요
// This works!
const f3 = partialCall(foo, "hello");
// ^ = const f3: (y: number, z: boolean) => void
// What can we do with f3 now?
// Works!
f3(123, true);
f3();
// 인자가 안들어옴
f3(123, "hello");
// strin이 아닌 boolean이 들어와야 함
Labeled Tuple Elements
tuple에 label을 붙이면 가독성이 좋아집니다.
function foo(...args: [string, number]): void { // ... }
// 아래와 같이 표현 할 수도 있습니다.
function foo(arg0: string, arg1: number): void { // ... }
foo("hello", 42);
foo("hello", 42, true);
// 인자가 2개만 들어와야 되는데 3개나 들어왔네요
foo("hello");
// 인자가 2개 들어와야 되는데 1개만 들어왔네요
// 가독성!
type Range = [start: number, end: number];
type Foo = [first: number, second?: string, ...rest: any[]];
type Bar = [first: string, number];
// 모두 이름을 붙이던가 아니면 안붙이던가 통일해야 합니다
function foo(x: [first: string, second: number]) {
 // ...
 // 변수에 tuple label을 사용할 필요는 없습니다.
 const [a, b] = x;
 a
 // ^ = const a: string
 b
 // ^ = const b: number
}
type Name =
 | [first: string, last: string]
 | [first: string, middle: string, last:string]
function createPerson(...name: Name) {
 // ...
}
createPerson() <== IDE(vs code)에서 guide text가 나옵니다
Class Property Inference from Constructors
class의 member 변수는 생성자를 추론해서 변수를 할당되거나 undefiend가 암묵적으로 들어가게 됩니다.
그런데 아래와 같이 annotation을 이용해서 type을 명시할 수 있습니다.
class Square {
 // definite assignment assertion
 // v
 sideLength!: number;
 // type annotation
 constructor(sideLength: number) {
 this.initialize(sideLength);
 }
 initialize(sideLength: number) {
 this.sideLength = sideLength;
 }
 get area() {
 return this.sideLength ** 2;
 }
}
Short-Circuiting Assignment Operators
logical and (&&), logical or (||), and nullish coalescing (??).
&&=, ||=, and ??=.
// could be 'a ||= b'
if (!a) {
 a = b;
}
let values: string[];
(values ?? (values = [])).push("hello");
 // After
(values ??= []).push("hello");
obj.prop ||= foo();
// 아래 둘과 비슷
obj.prop || (obj.prop = foo());
if (!obj.prop) {
 obj.prop = foo();
}
const obj = {
 get prop() {
 console.log("getter has run");
 // Replace me!
 return Math.random() < 0.5;
 },
 set prop(_val: boolean) {
 console.log("setter has run");
 }
};
function foo() {
 console.log("right side evaluated");
 return true;
}
console.log("항상 setter를 실행");
obj.prop = obj.prop || foo();
console.log("이건 항상 실행되지 않음");
obj.prop ||= foo();
Unknown on catch Clause Bindings
catch의 변수에 기본적으로 any가 type으로 지정되서 코드를 마음대로 작성할 수 있는데, 이렇게 되면 에러 핸들링에 대한 코드에서 에러가 발생할 수 있다. 그래서 unknown을 이용해서 type을 확인하도록 상기시켜주는 것이 좋다.
try {
 // ...
} catch (e: unknown) {
 // unkown에 바로 접근 못함
 console.log(e.toUpperCase());
 // Object is of type 'unknown'.
 if (typeof e === "string") {
 // We've narrowed 'e' down to the type 'string'.
 console.log(e.toUpperCase());
 }
}
Custom JSX Factories
{
 compilerOptions: {
 target: "esnext",
 module: "commonjs",
 jsx: "react",
 jsxFactory: "h",
 jsxFragmentFactory: "Fragment",
 },
}
// Note: these pragma comments need to be written
// with a JSDoc-style multiline syntax to take effect.
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
export const Header = (
 <>
 <h1>Welcome</h1>
 </>
);
…아래 코드로 나올거에요
// Note: these pragma comments need to be written
// with a JSDoc-style multiline syntax to take effect.
/** @jsx h */
/** @jsxFrag Fragment */
import { h, Fragment } from "preact";
export const Header = (h(Fragment, null,
 h("h1", null, "Welcome")));
Speed Improvements in build mode with --noEmitOnError
--noEmitOnError flag를 사용할 때, 컴파일이 한번 진행 된 후(—- incremental error)의 다음 컴파일이 엄청 느렸는데, 이게 개선되었습니다.
-— noEmitOnError 때문에 이전 컴파일의 빈 정보가 .tsbuildinfo 파일이 캐시 되어서 그런 문제라고 합니다.
— build mode scenarios (--incremental and --noEmitOnError)
--incremental with --noEmit
-— incremental 컴파일이 될 때에도 —- noEmit flag를 사용할 수 있다고 합니다. 이전에는 —- incremental flag가 .tsbuildinfo 파일에 eimit을 해야 했는데, 속도때문에 바뀐거 같습니다.
Editor Improvements
Convert to Optional Chaining
vs code에서 popup메뉴로 손쉽게 할 수 있게 되었습니다.
/** @deprecated */ Support
deprecated 주석을 사용하면 vs code 에서 popup으로 guide 문국가 노출 됩니다.
Smarter Auto-Imports
@type 을 이용해서 vs code에서 손쉽게 ts type을 사용할 수 있게 되었습니다.

[TypeScript] What’s new 4.0 (simply)

댓글