typescript language update

Slide 1

Slide 1 text

Language Update TypeScript --&WFOU CZ!2VSBNZ

Slide 2

Slide 2 text

"CPVUNF w ૔ݟ༸ีBLB!2VSBNZ w ϑϩϯτΤϯυΤϯδχΞ w ීஈ͸3FBDU3FEVYͰ41"Λ࡞ͬͯ·͢

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

5ZQF4DSJQU͓͞Β͍

Slide 5

Slide 5 text

5ZQF4DSJQUͱ͸ w .JDSPTPGU͕։ൃͨ͠"MU+BWB4DSJQU  ओཁͳઃܭऀʹ"OEFST)FKMTCFSH͕͍Δ w ੩తͳܕ෇ݴޠ w +BWB4DSJQUͷεʔύʔηοτɻ઴࣍తͳಋೖ͕Մೳ w #PPUTUSBQQJOH w ΤσΟλϑϨϯυϦʔ

Slide 6

Slide 6 text

ܕνΣοΫͱਪ࿦ w ؔ਺TVNͷ໭Γ஋͸OVNCFSͰ͋Δ͜ͱΛਪ࿦͢Δ function sum(a: number, b: number) { return a + b; } console.log(sum(1, sum(1, 1))); // OK // Argument of type '"a"' is not assignable to // parameter of type 'number' console.log(sum('a', 'b'));

Slide 7

Slide 7 text

4USVDUVBMTVCUZQJOHT w 5ZQF4DSJQU͸ߏ଄త෦෼ܕΛ࠾༻͍ͯ͠Δ w %VDL5ZQJOHͷܕόʔδϣϯͷΑ͏ͳ΋ͷ w ܕͷܧঝؔ܎͸ؾʹͤͣɺܕ͕΋͍ͬͯΔϝ ιουɾϓϩύςΟͷ߹கͷΈΛؾʹ͢Δ

Slide 8

Slide 8 text

4USVDUVBMTVCUZQJOHT class Hoge { name = "Kurami"; } class Foo { name = "Quramy"; } function sayHello(obj: { name: string }) { console.log(obj.name); } sayHello(new Hoge()); sayHello(new Foo()); sayHello(new Error("error"));

Slide 9

Slide 9 text

ϥΠϒϥϦͷܕఆٛ w ༗໊ͳϥΠϒϥϦ͸OQNJ!UZQFTϥΠϒϥϦ ໊Ͱܕఆ͕ٛެ։͞Ε͍ͯΔ w ࠷ۙ͸EUT ܕఆٛϑΝΠϧ Λಉࠝͨ͠ύοέʔ δ΋૿͖͍͑ͯͯΔ npm i @types/node import path from "path"; export function hoge() { const x = path.join("src", "main.ts"); }

Slide 10

Slide 10 text

࠷ۙͷ5ZQF4DSJQU

Slide 11

Slide 11 text

w *NQSPWFNBQQFEUZQFNPEJpFST w $POEJUJPOBMUZQFT w 5ZQFJOGFSFODFJODPOEJUJPOBMUZQFT w 6OLOPXOUZQF w 5VQMFTJOSFTUQBSBNFUFSTBOETQSFBEFYQSFTTJPOT w .BQQFEUVQMFUZQFT w 4USJDUCJOE DBMM BOEBQQMZNFUIPETJOGVODUJPOT w )JHIFSPSEFSGVODUJPOUZQFJOGFSFODF w *NQSPWFETVQQPSUGPSSFBEPOMZBSSBZTBOEUVQMFT w $POTUDPOUFYUTGPSMJUFSBMFYQSFTTJPOT w "TTFSUJPOJODPOUSPMqPXBOBMZTJT w &UD

Slide 12

Slide 12 text

ΊͪΌͪ͘Ό৭ʑ͋Δ

Slide 13

Slide 13 text

5ZQF4DSJQU͸Ͳ͜ʹ޲͔͍ͬͯΔʁ

Slide 14

Slide 14 text

"The goal of TypeScript's type system is to statically model patterns in JavaScript in a reasonable way while catching bugs and enforcing correctness" ೥্ظ5ZQF4DSJQUϩʔυϚοϓ IUUQTHJUIVCDPN.JDSPTPGU5ZQF4DSJQUJTTVFT ΑΓൈਮ

Slide 15

Slide 15 text

w +BWB4DSJQUͷදݱͷॊೈ͞Λอͪͭͭɺܕਪ ࿦ྗɾܕνΣοΫೳྗΛߴΊΔVQEBUF͕܁Γ ฦ͞Ε͍ͯΔ w ܕνΣοΫͷڧྗ͞Λ఻͑Δ΂͘ɺʢൺֱతʣ ࠷ۙͷػೳΛҰ෦঺հ

Slide 16

Slide 16 text

%FNP

Slide 17

Slide 17 text

"QQFOEJY $POEJUJPOBMUZQFT

Slide 18

Slide 18 text

$POEJUJPOBMUZQFT w WYͰಋೖ w "TTJHOBCMFΛ৚݅ͱͯ͠෼ذ͢ΔܕΛදݱՄೳ w ʮܕ5͕ܕ6ͷ෦෼ܕͰ͋Ε͹ɺܕ9ɺͦ͏Ͱͳ͚Ε͹ ܕ:ʯͱ͍͏ҙຯ type MyType = T extends U ? X : Y;

Slide 19

Slide 19 text

5ZQFJOGFSFODFJO  DPOEJUJPOBMUZQFT

Slide 20

Slide 20 text

5ZQFJOGFSFODFJODPOEJUJPOBMUZQFT w WYͰ$POEJUJPOBM5ZQFTͱಉ࣌ʹϦϦʔε ͞Εͨػೳ w $POEJUJPOBM5ZQFTͷ৚݅෦෼ʹͯϚονϯ ά࣌ʹਪ࿦͞ΕͨܕΛ࠶ར༻Ͱ͖ΔΑ͏ʹ T extends MyCondition ? SomeType : Y;

Slide 21

Slide 21 text

*OGFSBOE$BQUVSF w ਖ਼نදݱͷΩϟϓνϟϦϯάʢάϧʔϓԽʣͱࣅ͍ͯ Δ w Ϛονͨ͠άϧʔϓ෦෼Λޙ͔Βར༻Ͱ͖Δ const regexp = /hoge(\d+)/; const hit = "hoge10".match(regexp); console.log(hit[1]) // 10

Slide 22

Slide 22 text

*OGFSBOE$BQUVSF w 5͕ؔ਺Ͱ͋Ε͹ɺͦͷ໭Γ஋ͱͯ͠ਪ࿦͞ ΕΔܕ͕3ʹ֨ೲ͞ΕΔ type Return = T extends (...args: any[]) => infer R ? R : never; let r: Return<() => number>; // typeof r = number

Slide 23

Slide 23 text

"QQFOEJY  (FOFSJDSFTUQBSBNFUFST

Slide 24

Slide 24 text

(FOFSJDSFTUQBSBNFUFST w 3FTU1BSBNFUFSTʹ૯শܕ͕ར༻Մೳʹ w WYʹ͓͚ΔՄม௕Ҿ਺ܕਪ࿦ڧԽͷҰ؀ w declare function curry( fn: (x: T, ...args: U) => R ): (x: T) => (...args: U) => R; const sum = (a: number, b: number) => a + b; const bound = curry(sum)(1); const x = bound(2); // type of x = number const error = bound("hoge"); // error

Slide 25

Slide 25 text

0UIFSSFTPVSDFT w )5.-$POGFSFODF w IUUQTZPVUVCF/19:U8CWRL MJTU1-F';8[-+Q;DDVPQE#K+"VPE@U:( W7$*)W w IUUQTTQFBLFSEFDLDPNRVSBNZ UZQFTDSJQUFWPMVUJPOOHPOBJS