Today I Learned_230410

TypeScript

인프런 타입스크립트 강의 수강

섹션 12. 타입 추론

타입스크립트가 해당 타입을 어떻게 추론하는지 알아야 한다.

변수 선언 ,초기화 할 때 추론됨. 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어난다.

var a = 'abc'

// es6 이상에서는 파라미터에 default value를 지정할 수 있다.
function getB(b = 10) {
    var c = 'hi';
    return b + c;
}

이러한 일련의 동작이 일어날 때 타입스크립트는 변수들의 타입이 어떤 것인지 추론한다.

// 타입 추론 기본 2
interface Dropdown<T> {
    value: T;
    title: string;
}

var shoppingItem: Dropdown<string> = {
    value: 'hello', title: 'world'
}

// 타입 추론 기본 3
interface Dropdown<T> {
    value: T;
    title: string;
}
interface DetailedDropdown<K> extends Dropdown<K> {
    description: string;
    tag: K;
    // 암묵적으로 아래 속성들이 들어옴
    // value: K
    // title: string
}

var detailedItem: DetailedDropdown<string> = {
    description: '123',
    tag: 'string',
    value: 'abc',
    title: 'string'
}

Best Common Type

타입스크립트가 타입을 해석해 나가는 공식, 알고리즘

var arr = [1, 2, 3] // arr : number
var arr2 = [1, 2, true] // arr: number | boolean

Intellisense가 일어나기 위해서는 내부적으로 타입스크립트 서버가 돌아야 한다.

여기에 있는 tsc, tsserver는 실행 가능한 명령어

#!/usr/bin/env node
require('../lib/tsserver.js')

이런 코드 등이 돌아가고 있기 때문에 타입 추론 등이 잘 일어날 수 있다.

VSC 타입스크립트 소개 문서 : https://code.visualstudio.com/docs/languages/typescript#_code-suggestions

VAS Language Server Extension 가이드 : https://code.visualstudio.com/api/language-extensions/language-server-extension-guide

Language Server : https://langserver.org/

Lauguage Server Protocol 개요 : https://learn.microsoft.com/ko-kr/visualstudio/extensibility/language-server-protocol?view=vs-2019

섹션 13. 타입 단언

타입 단언(type-assertion)

타입스크립트보다 개발자가 타입을 더 잘 알고 있다고 가정.

DOM API를 조작할 때 타입 단언을 많이 사용한다.

var a; // any가 된다
var b = 10; // number로 추론
var c = a;  // c는 any

a = 20;
a = 'a';
var d = a;  // a에 별 짓을 다 해도 typescript는 any로 판단
// 그런데 우리는 'a'를 통해 a가 string인 것을 알 수 있다. 개발자가 확인하기에 string이 확실한 상황
var e = a as string;

타입 단언 예제

이런 인터페이스가 있다..

interface Developer {
    name: string;
    skill: string;
}

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

인터페이스를 이용해 함수를 만든다

function introduce(): Developer | Person {
    return {name: 'Tony', age: 33, skill: 'Iron Making'}
}

var tony = introduce();    // Developer | Person
console.log(tony.skill);    // skill이 있음에도 불구하고 사용이 불가능하다.
// union은 타입들의 공통된 속성들만 접근이 가능함 -> skill은 공통 속성이 아니므로 접근이 불가능하다.

// tony는 Developer라고 단언하였기 때문에 skill 사용이 가능
if ((tony as Developer).skill) {
    var skill = (tony as Developer).skill;
    console.log(skill);
} else if ((tony as Person).age) {
    var age = (tony as Person).age;
    console.log(age);
}

// 반복되는 부분이 많이 생겨 타입 가독성이 너무 떨어진다.. -> 타입 가드 적용

섹션 14. 타입 가드

타입 가드 함수를 만들어서 사용. 타입을 걸러내는 타입 가드 함수

// 필터 대상은 두개
function isDeveloper (target: Developer | Person): target is Developer{ //넘겨받은 파라미터가 해당 타입인지를 구분
    return (target as Developer).skill !== undefined;
}   // 내부 로직을 통과하고 나면 타입으로 넣은것이 Developer타입인지 판별

그러면 코드가 이렇게 줄어 든다

if(isDeveloper(tony)) {
    tony.skill
} else {
    tony.age
}