Js / Tstypescript

Typescript v3.7 특징

Views: 441

시작하기

Kotlin이나 Swift등의 언어에서는 사용중인 문법으로,
3.7버전을 통해 타입스크립트에서도 Optional Chaining을 지원합니다.

Optional Chaining

서버에서 데이터를 가져오는 상황이라고 가정하고 예시를 들어 보겠습니다.
data: { animal:{ name: 'dog' } } 를 반환할 예정입니다.
data는 undefined이나 null 일 수 있습니다.

1
2
3
4
5
6
7
8
9
// 이전
if (data && data.animal && data.animal.name) {
    // ...
}

// 3.7 이후
if (data?.animal?.name) {
    // ...
}

코드가 훨씬 간단해 졌습니다.

반환값

?. 연산자는 좌측의 값에 대해 null인지 undefined인지 확인하고 해당한다면 이후 속성을 찾는 작업은 중지하고 undefined를 반환합니다.

&&와의 차이점

?.연산자는 기존 코드에서 많이 사용된 &&를 대체할 수 있겠지만 둘은 체크하는 타입이 다릅니다.
&&연산자는 앞의 피연산자가 falsy(false, null, undefined, ‘’, 0, NaN)인지 확인하지만 ?.연산자는 null과 undefined만을 확인합니다.

Optional 요소에의 접근

1
2
3
4
5
6
7
8
function tryGetFirstElement<T>(arr?: T[]) {
    // 이전
    //   return (arr === null || arr === undefined) ?
    //       undefined : arr[0];
       
    // 3.7 이후
    return arr?.[0];
}

arr가 optional이지만 배열 요소 접근하는 방법으로 사용할 수 있습니다.

Optional 함수 실행

함수에 대해서 함수의 유무에 따라 실행 혹은 undefined 반환할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
async function makeRequest(url: string, log?: (msg: string) => void) {
    // 3.7이후
    log?.(`Request started at ${new Date().toISOString()}`);
    //  이전
    //   if (log != null) {
    //       log(`Request started at ${new Date().toISOString()}`);
    //   }
    const result = (await fetch(url)).json();
    log?.(`Request finished at at ${new Date().toISOString()}`);
    return result;
}

Nullish Coalescing Operator

Nullish Coalescing Operator도 Optional Chaining과 마찬가지로
??라는 연산자를 통해 앞의 피연산자가 null 혹은 undefined 인지 확인하고, || 와 같습니다.

1
2
3
4
const False = false;
const True = true;
const Boolean = False || True; // true
const BooleanNCO = False ?? True; // false

|| 의 경우 둘중하나가 true가 되는값이 반환되고,
?? 의 경우 Optional Chaining과 같이 앞 피연산자가 undefined 혹은 null 인지 확인합니다.

Type Alias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 이전
type Json =
    | string
    | number
    | boolean
    | null
    | JsonObject
    | JsonArray;

interface JsonObject {
    [property: string]: Json;
}

interface JsonArray extends Array<Json> {}

// 3.7 이후
type Json =
    | string
    | number
    | boolean
    | null
    | { [property: string]: Json }
    | Json[];

호출하지 않는 함수를 체크

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 수정 이전
interface User {
    isAdministrator(): boolean;
    notify(): void;
    doNotDisturb?(): boolean;
}

// ...

// 에러코드!!
function doAdminThing(user: User) {
    // oops! isAdministrator 는 함수입니다!
 
    if (user.isAdministrator) {
        sudo();
        editTheConfiguration();
    }
    else {
        throw new AccessDeniedError("User is not an admin");
    }
}

// 수정 이후
interface User {
    isAdministrator(): boolean;
    notify(): void;
    doNotDisturb?(): boolean;
}

function issueNotification(user: User) {
    if (user.doNotDisturb) {
        // OK, property is optional
    }
    if (user.notify) {
        // OK, called the function
        user.notify();
    }
}

함수 콜없이 테스트하려고 한다면, undefined/null을 포함하도록 수정하거나,
if(!!user.isAdministrator)와 같은 것을 쓰면서 의도적으로 강요한 것이라고 나타내야 합니다.

Share