Deep Dive Into TypeScript

by Taketoshi Aono(青野健利 a.k.a brn)

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

せ⵸: @brn (ꫬꅿ⨳ⵃ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn

Slide 3

Slide 3 text

Agenda -  What is TypeScript? TypeScriptך稱➜ -  About TypeSystems TypeScriptך㘗חאְג -  About LanguageService TypeScriptךIDE؟ه٦زחאְג -  About CustomTransformer TypeScriptךAST乼⡲חאְג -  Roadmap ➙䖓ךٗ٦سوحفחאְג -  Popular Issues 鑧겗ךIssueחאְג

Slide 4

Slide 4 text

What is TypeScript? TypeScript׏ג⡦זךׁ

Slide 5

Slide 5 text

In a word. ְ׻ײ׷AltJSך♧珏կ javascriptח㘗ءأذي׾鷄⸇׃ծEcmascript proposalך堣腉׾ ⯓《׶׃גزٓٝأػ؎ٕׅ׷կ 植㖈TypeScriptכGoogle爡ⰻד׮Ⱅ钠鎉铂ה׃ג䱰欽ׁ׸׷זוծ ׉ך㖑⡘׾然甧׃אא֮׷կ What is TypeScript?

Slide 6

Slide 6 text

Why Type is needed? ז׈㘗ָ䗳銲זך What is TypeScript?

Slide 7

Slide 7 text

More Robust code 㘗כ؝٦سך侭さ䚍嗚鏾׾〳腉חׅ׷կ ؝ٝػ؎ٕדֹ׷=> ؝٦سח濨湼ָזְկ What is TypeScript?

Slide 8

Slide 8 text

It's not mean "No Bugs" غָؚזְ׻ֽדכ搀ְկ Runtimeךؒٓ٦כ㢌׻׵׆饯ֹ׷կ What is TypeScript?

Slide 9

Slide 9 text

But… ׉׸ד׮㘗嗚叨׃ג剑⡚ꣲך嗚鏾כ꫼涸ח׃׋ְ׃ծׅ׷ץֹկ 㘗כ؝٦سח㙵׭鴥ת׸׋剑⡚ꣲךسًُؗٝزד֮׷կ What is TypeScript?

Slide 10

Slide 10 text

3rd Party 㢩鿇ךٌآُ٦ٕך㘗כ What is TypeScript?

Slide 11

Slide 11 text

DeﬁnitelyTyped 3rdParty醡ך㘗㹀纏ؿ؋؎ٕ׾盖椚׃גְ׷GitHub Repoկ npm install @types/… What is TypeScript?

Slide 12

Slide 12 text

Is DeﬁnitelyTyped Enough? 㘗ך꧊秈٥3rdParty醡ٓ؎ـٓٔפך㘗➰ֽהְֲ䠐㄂דכ㣐ֹ ז䧭卓ה罋ִגְ׷կ 2017/9/14植㖈@types⟃♴חכ3595ך㘗㹀纏ؿ؋؎ָٕ֮׷կ What is TypeScript?

Slide 13

Slide 13 text

Manual Typing DeﬁnitelyTypedח㘗㹀纏ָזְַծ荈⡲ٓ؎ـٓٔך㜥さכ 荈ⴓד㘗㹀纏׾剅ֻկ What is TypeScript?

Slide 14

Slide 14 text

import increment from 'increment';! ! increment(1);!

Slide 15

Slide 15 text

declare module 'increment' {! export default function increment(! a: number! ): number;! }!

Slide 16

Slide 16 text

TypeSystems About Type of TypeScript

Slide 17

Slide 17 text

ꅾ銲זהֿ׌ֽ

Slide 18

Slide 18 text

Structural Subtyping 圓鸡涸鿇ⴓ㘗 ؔـآؙؑزך圓鸡ח岣湡׃׋㘗ءأذيկ 㘗ך侭さ䚍כ㘗ך圓鸡ך׫ד嗚鏾ׁ׸׷կ TypeSystems

Slide 19

Slide 19 text

Why Structural Subtyping? javascriptכ⽯儗ؔـآؙؑز׾⢪ֲ걼䏝ָ넝ְկ ⽯儗ؔـآؙؑزח㼎׃ג㘗ך㹑鎉׾ׅ׷ךכ撕׻׃ְկ TypeSystems

Slide 20

Slide 20 text

interface Point2D {! x: number;! y: number;! }! ! const point = {! x: 0,! y: 0! };! ! function acceptPoint2D(point: Point2D) {}! ! acceptPoint2D(point);!

Slide 21

Slide 21 text

interface Point2D {! x: number;! y: number;! }! ! const point = {! x: 0,! y: 0,! z: 1! };! ! function acceptPoint2D(point: Point2D) {}! ! acceptPoint2D(point);!

Slide 22

Slide 22 text

Structural Subtyping 㘗ך㹑鎉׾ׅ׷䗳銲כזְկ 圓鸡ָ㘗׾鋉㹀ׅ׷կ TypeSystems

Slide 23

Slide 23 text

User Deﬁned Type ׮׍׹׿classװinterfaceծenumָ⢪ִ׷կ TypeSystems

Slide 24

Slide 24 text

interface MyInterface extends OtherInterface,! AnotherInterface {! prop: number;! method(args: string): boolean;! optional?: boolean;! }!

Slide 25

Slide 25 text

class MyClass extends OtherClass implements OtherInterface {! public constructor() { super(); }! protected methodFoo() { }! private property: number = 1;! public static methodFoo() { }! private static property = 1;! public get getter() {}! public set setter(value: any) {}! public get set prop() {}! private readonly immutableProp: string = 'a';! }!

Slide 26

Slide 26 text

enum Enum {! VALUE_A = 1,! VALUE_B, // 2! VALUE_C, // 3! }! ! enum Enum {! VALUE_A = 'value'! }! ! Enum.VALUE_A // 'value'! Enum[Enum.VALUE_A] // 'VALUE_A'!

Slide 27

Slide 27 text

// const修飾するとコンパイル後にリテラル化される const enum ConstEnum {! VALUE = 1,! ...! }! const value = ConstEnum.VALUE;! // コンパイル後 => const value = 1;

Slide 28

Slide 28 text

Type Inference ׮׍׹׿TypeScriptכ㘗䱿锷׮אְג׷կ TypeSystems

Slide 29

Slide 29 text

// Simple assignment.! const a = 0;! ! // Function return value.! const b = () => 1;! ! // Callback! const d = (callback: (a: number) => boolean) => {! callback(1);! };! d(x => x === 0);! ! // Best Common Type.! const p2d = { x: 0, y: 0 };! const p3d = { x: 0, y: 0, z: 1 };! const p4d = { x: 0, y: 0, z: 1, t: 0 }! const c = [ p2d, p3d, p4d ]; // { x: number; y: number }[];!

Slide 30

Slide 30 text

Generics ְ׻ײ׷筨獥㘗կ 㘗׾ػًٓ٦ة⻉׃㢩鿇ַ׵䭷㹀דֹ׷״ֲחׅ׷կ TypeSystems

Slide 31

Slide 31 text

// Generic Array! class MyArray {! private arr: T[];! ! public push(value: T) { this.arr.push(value); }! }! const numArr = new MyArray();! ! // Constraints! function fn(value: T) {! return value.x + 1; // Error!! }! ! function fn(value: T) {! return value.x + 1;! }!

Slide 32

Slide 32 text

Type Conversion and Generation 㘗׾ֿיֿיׅ׷կ TypeSystems

Slide 33

Slide 33 text

// Type Alias! type MyString = string;! ! // Insersection Type! type A = { x: number };! type B = { y: number };! type Point2D = A & B;! ! // Union Type! type UnionType = string | number;!

Slide 34

Slide 34 text

Special Types ׍׳׏ה㢌׻׏׋㘗 TypeSystems

Slide 35

Slide 35 text

// String Literal Types! type Suit =! 'diamond'! | 'club'! | 'spade'! | 'heart';! ! const suit: Suit = 'joker';! // Error !!! ! // Index Type! type StringMap = { [key: string]: string };!

Slide 36

Slide 36 text

Tagged Union 㘗חةؚ׾אֽ׷կ TypeSystems

Slide 37

Slide 37 text

// Tagged Union! interface TypeA { kind: 'type-a'; typeAValue: number; }! ! interface TypeB { kind: 'type-b'; typeBValue: string; }! ! function processAB(value: TypeA | TypeB) {! switch (value.kind) {! case 'type-a':! return value.typeAValue;! case 'type-b':! return value.typeBValue;! default:! throw new Error('Undefined type.');! }! }!

Slide 38

Slide 38 text

Type Guard 㘗׾穾׶鴥׬կ TypeSystems

Slide 39

Slide 39 text

// Type Guard! function fn(! x: Element | number | boolean! ) {! if (x instanceof Element) {! console.log(x.tagName);! } else if (typeof x === 'boolean') {! console.log(x);! } else {! console.log(x.toFixed(0));! }! }!

Slide 40

Slide 40 text

// User defined type guard! function isString(x: any): x is string {! return typeof x === 'string';! }!

Slide 41

Slide 41 text

// Type Guard! function fn(! x: Element | string | number | boolean! ) {! if (x instanceof Element) {! console.log(x.tagName);! } else if (typeof x === 'boolean') {! console.log(x);! } else if (isString(x)) {! console.log(x.toUpperCase());! } else {! console.log(x.toFixed(0));! }! }!

Slide 42

Slide 42 text

never ⵋ麦♶腉կ TypeSystems

Slide 43

Slide 43 text

function test1(): never {! throw new Error('error');! }! ! function test2(value: string | number) {! if (typeof value === 'string') {! ! } else if (typeof value === 'number') {! ! } else {! value // value = never! }! }!

Slide 44

Slide 44 text

never neverכֲתֻ⢪ִלծ״׶㘗㸜Ⰻז؝٦س׾剅ֻךח⢪ִ׷կ TypeSystems

Slide 45

Slide 45 text

enum Test { KEY_1 = 1, KEY_2, KEY_3 }! ! function test(m: Test) {! switch (m) {! case Test.KEY_1:! return 'key1';! case Test.KEY_2:! return 'key2';! default;! const check: never = m;! // error Test.KEY_3 is not assignable to never.! }! }!

Slide 46

Slide 46 text

Mapped Type 㘗ךفٗػذ؍׾⴨䮙׃ծ㘗׾㢌䳔ׅ׷կ TypeSystems

Slide 47

Slide 47 text

interface MyInterface {! a: string;! b: number;! c: boolean;! }! ! type AKeys = keyof MyInterface;! // AKeys = 'a' | 'b' | 'c'!

Slide 48

Slide 48 text

type MyInterfaceClone = {! [P in AKeys]: MyInterface[P]! };! // MyInterfaceClone = {! // a: string;! // b: number;! // c: boolean;! // }!

Slide 49

Slide 49 text

type MyPromiseInterface = {! [P in AKeys]: Promise;! }! // MyPromiseInterface = {! // a: Promise;! // b: Promise;! // c: Promise;! // }!

Slide 50

Slide 50 text

Variance ֮׷㘗הⴽך㘗ך湱✼➿Ⰵ〳腉זꟼ⤘䚍 TypeSystems

Slide 51

Slide 51 text

class Base {! value = 1;! }! ! class Derived extends Base {! otherValue = 2;! }! ! class Another extends Base {! anotherValue = 3;! }!

Slide 52

Slide 52 text

declare let baseArr: Base[];! declare let derivedArr: Derived[];! ! // Covariant 共変! baseArr = derivedArr;! ! // Contravariant 反変 Error! // TypeScriptでは認められていない derivedArr = baseArr;!

Slide 53

Slide 53 text

declare let processDerived: (derived: Derived) => void;! declare let processBase: (base: Base) => void;! ! // Bivariant 双変! processDerived = processBase;! processBase = processDerived;! ! // Runtime Error.! processBase(new Another());!

Slide 54

Slide 54 text

TypeScript Choose… GenericsכⰟ㢌 ꟼ侧כ⿽㢌 TypeSystems

Slide 55

Slide 55 text

Why Bivariant? ꟼ侧ָBivariantדזְהDerived[] => Base[]ך㢌䳔ָדֹזְկ TypeSystems

Slide 56

Slide 56 text

class MyArray {! push(value: T);! }! ! declare let arr: MyArray;! declare let arr2: MyArray;! arr2 = arr;! // arr = push(value: Derived);! // arr2 = push(value: Base);!

Slide 57

Slide 57 text

Because be more PRACTICAL. Derived[] => Base[]ך׋׭חBivariantז麣׾鼅׿׌կ ָծ C#ךin/outך״ֲחCovariance/Contravariance׾鼅䫛〳腉חׅ ׷䲿周ָ⳿גְ׷կ TypeSystems

Slide 58

Slide 58 text

Only ONE thing 搀蘠׾ׅ׷ז TypeSystems

Slide 59

Slide 59 text

Take care of … ثُ٦ؚٔٝ㸣Ⰻ 㘗ٖكٕ TypeSystems

Slide 60

Slide 60 text

TypeScript is NOT a language like C++ or Scala!! ➬✲ד⢪ֲ儗ך鑧דׅ״…?✮꣇简

Slide 61

Slide 61 text

Laguage Service TypeScriptךIDE٥ؒر؍ة؟ه٦ز

Slide 62

Slide 62 text

What is Language Service? غحؙؚٓٝسד⹛⡲ׅ׷IDE؟ه٦ز欽ך؟٦ؽأկ رؿٕؓزדVSCodeָ㼎䘔׃גְ׷կ ؟٦غָ饯⹛ׅ׷׌ֽկ Emacsד׮vimד׮OK! Language Service

Slide 63

Slide 63 text

LanguageService Plugin TypeScript 2.2ַ׵㼪Ⰵׁ׸׋կ LanguageService׾䭁䓸ׅ׷׋׭ך堣腉 TypeScriptךCompiler劤⡤ח堣腉׾鷄⸇ׅ׷׻ֽדכזְկ LanguageService

Slide 64

Slide 64 text

Scope -  lint堣腉ך鷄⸇ -  㹑鎉Jump堣腉ך㢌刿 -  string literalװtemplateך圓俑 ثؑحؙ זו LanguageService Plugin

Slide 65

Slide 65 text

植朐 tsconﬁg.jsonךpluginsفٗػذ؍ח 鷄⸇ׅ׸ל⢪ִ׷ָծ Angularה Quramyׁ׿ךGraphqlךفؚٓ؎ٝ ֻ׵ְ׃ַזְկ LanguageService Plugin

Slide 66

Slide 66 text

Custom Transformer TypeScriptךAST乼⡲חאְג

Slide 67

Slide 67 text

Scope AST׾湫䱸㢌刿׃ג⳿⸂׾㢌刿דֹ׷կ pluginה麩׏ג湫䱸TypeScriptך؝ٝػ؎ٕ穠卓ח➜Ⰵדֹ׷կ TypeScript劤⡤׮ぐ珏Transformerד䕎䧭ׁ׸גְ׷կ Custome Transformer

Slide 68

Slide 68 text

植朐 TypeScriptךAST׾ְׄ׸ג㴍׃ְֿהָծ 㘗䞔㜠׾Runtimeח䒷׏䓸׏גֻ׷ֻ׵ְ׃ַזְկ Ⱅ䒭דٗ٦س倯岀ָ欽䠐ׁ׸גְזְկ 儗劍㼿傍זךדכկ Custom Transformer

Slide 69

Slide 69 text

Next Release 如㔐ٔٔ٦أ✮㹀ך堣腉

Slide 70

Slide 70 text

Next Release(2017/10) -  ؔ٦ز؝ٝفٔ٦زדimportך酡㸣 -  noImplicitAnyךؒٓ٦׾QuickFixד㘗➰ֽׅ׷ -  Unique-Symbol㘗׾Computed-Propertyה׃גinterface٥type٥ classךًٝغה׃ג⢪ִ׷ -  Incremental Compiler APIך䲿⣘ -  @ts-ignore؝ًٝزדJS׮ؒٓ٦׾䫇ⵖ〳腉ח

Slide 71

Slide 71 text

ؔ٦ز؝ٝفٔ٦زדimportך酡㸣 ٌآُ٦ٕךせ⵸׾ؔ٦ز؝ٝفٔ٦زד酡㸣ׅ׷הծ荈⹛ד import圓俑תד䯏Ⰵ׃גֻ׸׷堣腉կ Next Release(2017/10)

Slide 72

Slide 72 text

noImplicitAnyךؒٓ٦׾ QuickFixד㘗➰ֽׅ׷ noImplicitAnyָONחז׏גְ׷朐䡾דany㘗׾鋅אֽ׋㜥さծ QuickFixד㘗䞔㜠׾✮䟝׃ג䲿周ׅ׷կ Next Release(2017/10)

Slide 73

Slide 73 text

Unique-Symbol㘗׾Computed-Property ה׃ג㘗ח⢪ִ׷״ֲח Unique-Symbolהְֲ嚊䙀ָ㼪Ⰵׁ׸׷կ Unique-Symbolהכconstַreadonly⥜귅ׁ׸׋㢌侧٥فٗػ ذ؍կ ֿךUnique-Symbolז㢌侧׾class٥interface٥typeךفٗػ ذ؍ؗ٦ח⢪ֲֿהָדֹ׷կ Next Release(2017/10)

Slide 74

Slide 74 text

// main.ts (input)! export const x = "literal name";! const y = 1;! export interface A {! [x]: string;! [y]: string;! // error: Interface 'A' has or is using private name '[y]' ! // (when using --declaration)! }!

Slide 75

Slide 75 text

type B {! [x]: string;! [y]: boolean;! }! let a: A;! let b: B;! a = b;! // error: Type 'B' is not assignable to type 'A'. ! // Types of property '[y]' are incompatible.!

Slide 76

Slide 76 text

Incremental Compiler APIך䲿⣘ --watchٌ٦سך鸞䏝何㊣կ ׁ׵חծcreateWatchModeꟼ侧׾䲿⣘✮㹀կ Next Release(2017/10)

Slide 77

Slide 77 text

@ts-ignore؝ًٝزדJS׮ ؒٓ٦׾䫇ⵖ〳腉ח @ts-ignore؝ًٝز׾鎸鶢ׅ׷ֿהדծ javascriptؿ؋؎ٕ׮暴㹀ךؒٓ٦׾䫇ⵖ〳腉חկ ⟃⵸כTypeScript׃ַ㼎䘔׃גְזַ׏׋կ Next Release(2017/10)

Slide 78

Slide 78 text

if (false) {! // @ts-ignore: Unreachable code error! console.log("hello");! }!

Slide 79

Slide 79 text

Roadmap ➙䖓ך㹋鄲ٗ٦سوحف

Slide 80

Slide 80 text

Plans -  醱侧ךtsconﬁg.json׾؟ه٦ز -  〳㢌ꞿ㘗ך؟ه٦ز -  ➭ך㘗ءأذيך؟ه٦ز -  㘗ؿ؋؎ٕך㹑鎉ך꧊秈הؒٓ٦ ٔه٦ذ؍ؚٝך何㊣

Slide 81

Slide 81 text

Plans -  倜׃ְES Decoratorsך㹋鄲 -  Design Time Decorator e.g. deprecated, conditional -  Decorators for (arrow) function expression -  dynamic import׾ろ׭׋import㹑鎉⟃㢩ך倯岀דך㘗䱿锷 -  䕎㹀纏ؿ؋؎ָٕזַ׏׋㜥さחծ @typesךQuickFix׾䲿爙

Slide 82

Slide 82 text

醱侧ךtsconfig.json׾؟ه٦ز tsconfig.jsonחdependencyהְֲ갪湡׾⡲׶ծ׉ֿחⴽךفٗ آؙؑزפך⿫撑׾鎸鶢ׅ׷ֿהדծ ⴽךtsconfig.jsonפⳢ椚׾獳隁ׅ׷ֿהָדֹ׷״ֲחז׷կ Roadmap

Slide 83

Slide 83 text

〳㢌ꞿ㘗ך؟ه٦ز ְ׻ײ׷Variadic Typeך؟ه٦زկ Genericsך〳㢌ꞿ䒷侧٥Tupleפך㼎䘔ָ〳腉חז׷կ Variadic TypeכTupleה✼䳔䚍׾䭯אկ Roadmap

Slide 84

Slide 84 text

function makeTuple<...T>(...ts:...T): ...T {! return ts;! }! ! const ts = makeTuple('a', 1, {x: 1});! // ...T = [string, number, {x: number}];!

Slide 85

Slide 85 text

function f<...T,...U>(ts:...T): [...T,...U] {! let us: ...U = makeTuple('hello', 'world');! return [...ts, ...us];! }! const ret = f('html', 5, 'conference');! // ret = ['html', 5, 'conference', 'hello', 'world'];! // ...T = [string, number, string]! // ...U = [string, string];! // [...T, ...U] = [string, number, string, string, string]!

Slide 86

Slide 86 text

Non Structural Subtypingך؟ه٦ز Structural Subtyping⟃㢩Nominal Typing瘝ך㘗ءأذيך 鷄⸇կ ׋׌׃ծוך״ֲח㹋鄲ׅ׷ַךず䠐כה׸גְזְկ Symbol.hasInstance׾⢪ֲ⢽ָ䮙־׵׸גְ׷ָծ׉ך׋׭חכ Symbol.hasInstanceח״׷TypeGuard׮㹋鄲ׅ׷䗳銲ָ֮׷կ Roadmap

Slide 87

Slide 87 text

interface MyNumber extends number {}! ! const Positive = {! [Symbol.hasInstance](v) {! return typeof v === 'number' && v > 0;! }! }! ! let value = 1;! if (value instanceof Positive) {! // value is Positive;! }!

Slide 88

Slide 88 text

㘗ؿ؋؎ٕך㹑鎉ך꧊秈ה ؒٓ٦ٔه٦ذ؍ؚٝך何㊣植㖈ծmodule/declaration/outךאך؝ٝػ؎ٕؔفءّٝ׾ 䭷㹀ׅ׷הծ♧אחתהת׏׋d.tsָ欰䧭ׁ׸׷ָծ ׉ך⚥魦ָぐؿ؋؎ַٕ׵ךؙؒأه٦زחז׏גְ׷ך׾ծ 1ٌآُ٦ٕחתה׭ծexport * as …ׁ׸גְ׷ٌآُ٦ٕせָ עאַ׏׋㜥さחؒٓ٦הׅ׷何⥜周կ ׋׌植朐⨡忔׃גֶ׶㼪Ⰵׁ׸׷ַכ♶僇կ Roadmap

Slide 89

Slide 89 text

declare module "mylib/a" {! export * from "mylib/b";! export * from "mylib/c";! }! declare module "mylib/b" {! export interface Foo {}! ! export class Bar {! constructor()! do(): Foo! }! }! declare module "mylib/c" {! export class Baz {}! }! declare module "mylib" {! export * from "mylib/a";! }!

Slide 90

Slide 90 text

declare module "mylib" {! export interface Foo {}! ! export class Bar {! constructor()! do(): Foo! }! ! export class Baz {}! }!

Slide 91

Slide 91 text

倜׃ְES Decoratorך㹋鄲 TypeScript2.5儗挿ד㹋鄲ׁ׸גְ׷decoratorכ〢ְproposal׾ ك٦أח׃גֶ׶ծ植儗挿דך倜׋זproposalחさ׻ׇ׷何⥜周կ Roadmap

Slide 92

Slide 92 text

type Constructor = new(...args): {};! ! interface MemberDesciptor {! kind: "Property"! key: string,! isStatic: boolean,! descriptor: PropertyDescriptor,! extras?: MemberDescriptor[]! finisher?(ctor: Constructor): void;! }!

Slide 93

Slide 93 text

function classDecorator(! ctor: Constructor,! parent: Constructor,! arrayOfDescriptor: MemberDesciptor[]) {! ...! }! ! function memberDecorator(! memberDescriptor: MemberDesciptor! ) {! ...! }!

Slide 94

Slide 94 text

Design Time Decorator ؝ٝػ؎ٕ儗٥Ambient㹑鎉ⰻד鐰⣣ׁ׸׷decorator㹋鄲կ deprecatedװconditional瘝կ ת׌陽锷⚥ך׋׭ծוך״ֲז䕎ח滠㖑ׅ׷ַכ♶僇կ CustomTransformerָדֹ׋ךדծ陽锷ָ♴抟חז׏ג׷䠬׮֮ ׷կ Roadmap

Slide 95

Slide 95 text

interface JQuery { ! @@deprecated("...", false) ! selector: string; ! }! ! @@suppressWarning("disallow-leading- underscore") ! function __init() { ! }!

Slide 96

Slide 96 text

Decorators for (arrow) function expression ꟼ侧䒭ח㼎׃גdecorator׾剅ֽ׷״ֲחׅ׷周կ 劤㹺tc39/proposal-decoratorד׮⡦䏝׮♳ָ׏גְ׷㉏겗׌ָծ ת׌穠锷ָ⳿גְזְկ ꟼ侧㹑鎉דכזֻꟼ侧䒭ח׃ַ黝欽דֹזְךכծ Function Hoistingָdecoratorהꟼ侧ח㼎׃ג湱✼⡲欽׃ג㉏겗 ׾䒷ֹ饯ֿׅ׋׭կ Roadmap

Slide 97

Slide 97 text

dynamic import׾ろ׭׋ import㹑鎉⟃㢩ך倯岀דך㘗䱿锷 dynamic importװ׉ך➭ךimport倯岀דٌآُ٦ٕ׾ٗ٦س׃׋ 㜥さךmoduleך《׶䪔ְ׾何㊣ׅ׷周կ 植㖈ךהֿ׹module㘗׾㼪Ⰵׅ׷倯ぢד鑧ָ鹌׿דְ׷ָծ ㉏겗׮㢳ֻת׌寸㹀涸ז陽锷כ搀ְկ Roadmap

Slide 98

Slide 98 text

// 0.ts! export interface foo {}! export class C {}! // 1.ts! var p: module("./0");! // ここで型と値両方をimportするのか、 // 型は別でimportするのかとかの問題もある。

Slide 99

Slide 99 text

䕎㹀纏ؿ؋؎ָٕזַ׏׋㜥さחծ @typesךQuickFix׾䲿爙 ׮׃TypeScript؝ٝػ؎ٓ٦ָ㘗㹀纏׾鋅אֽ׵׸זַ׏׋㜥さ ח@typesַ׵installׅ׷״ֲח䲿周ׅ׷何⥜կ Roadmap

Slide 100

Slide 100 text

Popular Issues 陽锷ך㽴ֹזְծ㣐➂孡זissue麦

Slide 101

Slide 101 text

Support override keyword on class methods 倜׋חoverrideؗ٦ٙ٦س׾㼪Ⰵ׃גծ 崢欰ؙٓأדًاحس׾ؔ٦غ٦ٓ؎سׅ׷儗ח鎸鶢ׇׁ׷䲿周կ ♧傉鷿⚥דꟗׄ׵׸גֶ׶ծreopenך䥪격ד㣐ꆀך؝ًٝزָא ְגְג鷄ֲךָ㣐㢌זissueחז׏גְ׷կ 㹋鄲ׅ׷ֿהכ寸ת׏גְגծׅדח㹋鄲׮㨣ת׏גְ׷կ Popular Issues

Slide 102

Slide 102 text

Request: Class Decorator Mutation class decoratorָclassך㘗׾㢌刿דֹזְ׋׭ծ decoratorⰻד鷄⸇׃׋فٗػذ؍ח،ؙإأדֹזְկ ׉ך׋׭ծdecoratorדclassך㘗׾㢌刿׃׋ְהְֲissueկ MetaProgramming崢הDecorator should not change classז➂ ׋׍ך䨌ְָ粸׶䎢־׵׸גְ׷կ 儗䫓react-reduxךconnectָreference׃ג圫㶨׾鋅גְ׷կ Popular Issues

Slide 103

Slide 103 text

Suggestion: miniﬁcation TypeScript؝ٝػ؎ٓדا٦أךMinifyתדװ׷ץֹהְֲ䲿周կ Uglify׾⢪ִהְֲ䠐鋅ָד׷׮ծTypeScriptך㘗䞔㜠׾ְַ׃ ׋剑黝⻉׾׃׋ְהְֲ䠐鋅ָדגծClosureCompilerתד岚⿹ ׃ծIssueָ⠼ן׋կ 植㖈陽锷⚥׌ָת׌ת׌㹋植כ黅ְ䠬ׄկ Popular Issues

Slide 104

Slide 104 text

׀幠耮֮׶ָהֲ׀ְׂת׃׋կ

Slide 105

Slide 105 text

⿫罋 •  https://qiita.com/na-o-ys/items/aa56d678cdf0de2bdd79 •  https://github.com/Microsoft/TypeScript/issues •  https://github.com/Microsoft/TypeScript/wiki •  http://ufcpp.net/study/csharp/sp4_variance.html •  https://speakerdeck.com/vvakame/about-typescript-and-language- server-protocol •  https://ja.wikipedia.org/wiki/ %E5%85%B1%E5%A4%89%E6%80%A7%E3%81%A8%E5%8F%8D %E5%A4%89%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F %E7%A7%91%E5%AD%A6)