TypeScript 2.2

Mixin Class 지원

mixin

  • ES2015 의 믹스인 스펙을 지원합니다.
  • 믹스인에 타입에 대한 규정을 하기 위한 추가적인 기능을 제공합니다.
  • 전통적인 믹스인과 다릅니다. 스펙을 확인해보시는게 좋을 것 같습니다. 
  • http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/
  • 근데 어렵습니다. 문서를 보신다면 저와 함께 시원하게 욕을 하시게 될 것 같습니다.

mixin example & Constructor

class Point {
    constructor(public x: number, public y: number) {}
}

class Person {
    constructor(public name: string) {}
}

type Constructor<T> = new(...args: any[]) => T;

function Tagged<T extends Constructor<{}>>(Base: T) {
    return class extends Base {
        _tag: string;
        constructor(...args: any[]) {
            super(...args);
            this._tag = "";
        }
    }
}

const TaggedPoint = Tagged(Point);

let point = new TaggedPoint(10, 20);
point._tag = "hello";

class Customer extends Tagged(Person) {
    accountBalance: number;
}

let customer = new Customer("Joe");
customer._tag = "test";
customer.accountBalance = 0;

object 타입 추가

object type

  • 이것은 타입입니다.
  • 소문자에 주의하세요
  • primitive type 의 반대라 생각하시면 됩니다.
  • 정확히 어떤 타입인지는 모르겠지만, 원시 타입은 아니다 싶을때 쓰면 좋다고 합니다. (카더라)

object type

const a: object = 0;
// error TS2322: Type '0' is not assignable to type 'object'.

const b: object = 'string';
// error TS2322: Type '"string"' is not assignable to type 'object'.

const c: object = false;
// error TS2322: Type 'false' is not assignable to type 'object'.

const d: object = {};

// strictNullChecks true
const e: object = null;
// error TS2322: Type 'null' is not assignable to type 'object'.

const f: object = undefined;
// error TS2322: Type 'undefined' is not assignable to type 'object'.

new.target 지원

new.target 이 function 에서 쓰일 때

function test() {
    console.log(new.target);
}

test();
new test();

// 결과
test() => undefined
new test() => [Function: test]

new.target 이 class 에서 쓰일 때

class Test {
    constructor() {
        console.log(new.target);
    }
}

new Test();

// 결과
[Function: Test]

new.target

  • function 이나 class 의 생성자에서 new.target 이라는 메타 프로터치가 생성됩니다.
  • function의 경우 new 없이 호출을 하면 new.target 은 undefined 입니다.
  • new 를 통해 호출할 경우에는 new.target 에 처음 인스턴스를 할당할때 사용된 constructor 의 참조값이 들어갑니다.
  • built-in class 를 extends 할때 추천 됩니다.

CustomError

// 프로토타입 체인이 망가지는 특수한 케이스
class CustomError extends Error {
    constructor(message?: string) {
        super(message); // 'Error' breaks prototype chain here
        Object.setPrototypeOf(this, new.target.prototype); // restore prototype chain
    }
}

null / undefined

Title Text

string index signatures 에 dotted property 로 접근 지원

Indexable Type

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

interface PersonMap {
    [x: string]: Person;
}

const family: PersonMap = {};

family['father'] = {
    name: 'mark',
    age: 35
};

dotted property

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

interface PersonMap {
    [x: string]: Person;
}

const family: PersonMap = {};

family['father'] = {
    name: 'mark',
    age: 35
};

family.mother = {
    name: 'anna',
    age: 24
};

react 관련 기능 추가

TS 내에 스인 JSX 에 Spread 사용 가능

function Todo(prop: { key: number, todo: string }) {
    return <div>{prop.key.toString() + prop.todo}</div>;
}

function TodoList({ todos }: TodoListProps) {
    return <div>
        {...todos.map(todo => <Todo key={todo.id} todo={todo.todo} />)}
    </div>;
}

let x: TodoListProps;

<TodoList {...x} />

jsx 옵션에 react-native 추가

  • 컴파일 옵션 중에 원래 jsx 옵션이 있었고, value 로 'React' 와 'Preserve' 가 있었습니다.
  • 'react-native'
  • JSX 구문을 가진  JS 결과물에서 보호합니다.
  • react 를 ts 로 작업하는 상세한 내용은 다음 세미나에...

TypeScript 2.2 발표자료

By Woongjae Lee

TypeScript 2.2 발표자료

타입스크립트 한국 유저 그룹 기술 세미나 201704

  • 599
Loading comments...

More from Woongjae Lee