éçºè ã¯ã次ã®ãããªtsãšã©ãŒã®äžã«ã³ã¡ã³ããè¿œå ã§ããå¿ èŠããããŸãã
/// TS_IGNORE
let a:string = 1
ã³ã³ãã€ã©ã«ãã®ãšã©ãŒãå ±åãããªãã§ãã ãã...
éçºè
ãæãããç¥ã£ãŠããŠããšã©ãŒã¬ããŒããéãã«ãããç¹å®ã®ã·ããªãªããããŸãã
ã®ãããªïŒany
ãããã
ã·ã§ãŒã³
åæããŸããã ç¹ã«ããã§èª¬æããã±ãŒã¹ã§ã¯ãJavaã®@SuppressWarnings
ã®ãããªãã®ãžã®æ§ãïŒ
以äžïŒ
const typeMetadataKey = Symbol('type'); function type(name: string): PropertyDescriptor { return Reflect.metadata(typeMetadataKey, name); }
ãšã©ãŒãçºçããŸãïŒ
Unable to resolve signature of class decorator when called as an expression.
ã以äžã®ããã«äœ¿çšããå ŽåïŒ
class Person { @type('string') firstName: string; }
ãã³ã¬ãŒã¿ã¯æåŸ ã©ããã«æ©èœããã³ã³ãã€ã«ãããŸãããäžèšã®ãšã©ãŒãçºçããŸãã
ãããã©ã®ããã«è§£æ±ºããããã«ã€ããŠèããŠããå Žåã¯ã誰ããæ£ããæ¹åãæã瀺ãããå Žåã¯ãåãã§æãäžããŠãã ããã
ãã£ã¹ãããã ãã§ãïŒãã£ã¹ãã¯æ£åŒãªçšèªã§ã¯ãããŸããããåãæŠå¿µã§ãïŒ
const foo: string = 7 as any;
ããã¯ããªããæ¢ããŠãããã®ã§ããïŒ
ç§ã¯äŸãæããŸããããå®éã«ã¯ããã§ã¯ãããŸããïŒç§ã¯ãã£ã¹ãã«ã€ããŠãã¹ãŠç¥ã£ãŠããŸãïŒãç§ã¯æ¬¡ã®ãããªä»ã®ã±ãŒã¹ããããŸã
ã¹ãŒããŒã¯ã³ã³ã¹ãã©ã¯ã¿ãŒã®æåã®è¡ãšä»ã®åé¡ã®åŸã«åŒã³åºãããŸã...
ããã¯éèŠãªæ©èœã§ã
ã ãã// tslint:disable
ãããªãã®ïŒ
ããããã tsc
ãå®è¡ããç¹å®ã®ãã§ãã¯ããªã³/ãªãã«ããããšããã§ããŸããïŒ
_egïŒ_ const FooBar: string = 'rozzzly'; // tslint:disable-line camelcase
ããã¯çŽ æŽãããã§ããã...
ããããŸãã... tsc
ç¯å²å€ãããããŸããã ããããªã³ã¿ãŒã®ç®çã§ãã
ãã·ã£ããããŠã³ãã§ããå¿ èŠããããŸã:)
APIãå°ãäžå®å®ã§ããšã©ãŒãåžžã«æ£ç¢ºã§ãããšã¯éããªãããã³ã¬ãŒã¿ãªã©ã®ãå®éšçãæ©èœã«é¢ãããšã©ãŒ/èŠåãæå¶ããããã«è°è«ãããå ŽåããããšæããŸãã tsconfigã®ãexperimentalDecoratorsããã£ãŒã«ãã䜿çšããã ãã§ãããã®ïŒéåžžã«å ·äœçãªïŒããŒãžã§ã³ãååŸã§ããŸããã1ã€ã®ã¿ã€ãã®èŠåã®ã¿ãæå¶ãããŸãã
ç§èªèº«ã®æªéã®ä»£åŒè ãæŒããããã«ãããã¯TypeScriptã®æ°ãããŠãŒã¶ãŒã«ãèŠåãçºçããçç±ãåŠã¶ä»£ããã«ãç解ã§ããªãèŠåãæå¶ããããã«ä¿ãããšãã§ããŸãã ãŸããå®éšçãªæ©èœã䜿çšãããšã誰ããäžçš®ã®æ°ãããŠãŒã¶ãŒã«ãªããŸãããšã©ãŒãæå¶ããæ©èœããããšããŠãŒã¶ãŒã¯åé¡ãéãã®ã§ã¯ãªããæ°ããæ©èœã®ãã°ã«æºè¶³ããããšãã§ããŸãã
æçµçã«ã¯ãSyntasticã®åºåãã¯ãªãŒã³ã«ããããšæã£ãŠããŸãã ããã¯ããšã©ãŒãæå¶ããããšãæå³ããŸãã ãã¡ãããããã¯_åŸ_ã«ãªãå¯èœæ§ã®ãããã°ã®åé¡ãéããŠã詳现ã調ã¹ãããšããŸãã ;ïŒ
ãã·ã£ããããŠã³ãã®åé¡ã¯ãããããããäœãåŸããããããããªãããšã§ãã let a:string = 1
ã¯number
ãŸãã¯string
ã§ããïŒ a
å¥ã®å®£èšãããå Žåãããã¯ããŒãžãããŸããïŒ èª°ãããã®å€æ°ã®ã¿ã€ãïŒããšãã°return {a} ;
ïŒããã£ããã£ããå Žåããããã{ a : number }
ãŸãã¯{ a: string }
ããããã¯ãã®äž¡æ¹ã«å²ãåœãŠãããšãã§ãããšãããã©ãã§ããããã
åºæ¬çãªããšã®1ã€ã¯ããšã©ãŒã¯ãã¹ãŠç¡èŠã§ãããšããããšã§ãã ãšã©ãŒã¯ãåºåã®çæãããŒã«ããããã¯ããŸããã
ã³ãŒãã®ç¹å®ã®éšåã®ãã§ãã¯ãæå¶ã§ããããã«ããããŸããŸãªã¡ã«ããºã ããããŸããããšãã°ã any
ãåã¢ãµãŒã·ã§ã³ïŒãã£ã¹ãïŒãã¢ã³ããšã³ã宣èšãªã©ã§ãã
ãããã£ãŠãããšãã°ããç¡å¹ãªãå®çŸ©ãæã€ã©ã€ãã©ãªãããå Žåã¯ããããåé€ããŠã declare module "blah" { export = any }
眮ãæããããšãã§ããŸãã ãŸãã¯declare var $: any
ãããŠããªãã¯è¡ã£ãŠãããã§ãã
ç§ã¯éåžžãããã®ãªã¯ãšã¹ãã«è¿ä¿¡ããã®ã§ãããªãã®åé¡ã¯ãšã©ãŒã®æå¶ã«ãããšã¯æããŸããã æ¬åœã®åé¡ã¯ã圹ã«ç«ããªããšæããšã©ãŒãçºçããããšã§ãã æ ¹æ¬çãªåé¡ã解決ããªãæå¶ã¯ããããã«ããŒããã ãã§ãããèŠåã®ãªãäžè²«æ§ã®ãªãç¶æ ã®åœ±é¿ããããŸãã æ£ãã解決çã¯ãçºçããŠãããšã©ãŒãç¥ãããšã§ãã ããã¯ã©ã®å³æžé€šã§ããïŒ ã³ã³ãã€ã©ã圹ã«ç«ããªããšã©ãŒã衚瀺ããçç±...
ãããŠãã®ããã«ãç§ãã¡ã¯ããªãã®ãŠãŒã¹ã±ãŒã¹ã«ã€ããŠãã£ãšç¥ãå¿ èŠããããŸãã
ããšãã°ãTS 2.0ã§ã¯ããããã®æ ¹æ¬çãªåé¡ã®ããã€ãã解決ããããã«ããã€ãã®äœæ¥ãè¡ããŸããã
declare module "@angular\*";
ç°¡åã«ç¡å¹ã«ã§ããŸãã.d.ts
ãã¡ã€ã«ãã¿ã€ããã§ãã¯ããªãæ°ãã--skipLibCheck
--typeRoots
ãµããŒãã«ããã宣èšãã¡ã€ã«ã®ããŒãå
ããªãŒããŒã©ã€ãã§ããŸãããããã䜿çšããŠãã ãããããã¯ãã·ã£ããããŠã³ãããæ¹æ³ã§ããããããããšã®ã¡ãªããïŒãŸãã¯å®éã«ã¯ãã®æ¬ åŠïŒã¯å¥ã®è³ªåã§ã
let x: PieInTheSky = <any> 'cake is a lie';
ããããŸããããç¹°ãè¿ããŸãããåé¡ã¯ç¹ã«ãã£ã¹ãã«é¢ãããã®ã§ã¯ãããŸãã
<any>
ã¯ãTypeScriptã®ãã¹ãŠã®è¿·æãªããšãã100ïŒ
èªç±ãªããã©JavaScriptãæäŸããŸããããã§ãä»ã«äœãå¿
èŠã§ããïŒ
ç§ã®å Žåãã³ã³ã¹ãã©ã¯ã¿ãŒã®æåã®è¡ãšããŠã§ã¯ãªãsuperãåŒã³åºãããšã©ãŒãéããå¿ èŠããããŸã
ã¢ã³ããã¿ãŒã³ãåãå ¥ããããã«åŒ·å¶ãã代ããã«ã次ã®ãããªãã®ãæžããŠã¿ãŸãããã
_ ClassA.ts
_
class A {
constructor() {
this.init();
}
protected init() {
// does nothing by itself
}
}
_ ClassB.ts
_
class B extends A {
constructor() {
super();
console.log('rest of code from B\'s constructor');
}
protected init() {
console.log('this runs before the rest of code from B\'s constructor');
}
}
ãããtypescriptããšãŠãçŽ æŽãããããããŠãŸãè¿·æãªãã®ã«ããŠããã®ã§ãã ããã¯ããªãã«ãã£ãšè¯ãã³ãŒããæžãããšã匷å¶ããããªããããè¯ãéçºè ã«ããŸãã ãããžã§ã¯ãã®å€æã¯æ¥œãããã®ã§ã¯ãã
ç§ã®å Žåãã³ã³ã¹ãã©ã¯ã¿ãŒã®æåã®è¡ãšããŠã§ã¯ãªãsuperãåŒã³åºãããšã©ãŒãéããå¿ èŠããããŸã
ãããŠãã³ãŒããES6ãšäºææ§ã®ãªããã®ã«ããŸã...ã ãããããTypeScriptã®äž»ãªç®çã¯ð£ïŒgunïŒãæããé¢ãããšã§ãã
TypeScriptãäœããæ£ãã解éããŠããªãå Žåã¯ããåé¿çãã§ã¯ãªãä¿®æ£ããå¿ èŠããããŸãã çŸåšãTypeScriptããªã³ã¿ãŒã®ããã«æ©èœããŠããããšãããã€ããããããšã©ãŒããšãèŠåãã®æŠå¿µã¯ãŸã ãããŸããã èŠåãæ¥ããšãã«æå¶ãèŠãããšãã§ããŸãã æ»ãåŸã®ã³ãŒããæªäœ¿çšã®ãã©ã¡ãŒã¿ãŒã®ãããªãã®ã¯ãæ§æçã«æ£ããã®ã§ïŒã°ãããŠããŸããïŒãç§ã®æèŠã§ã¯èŠåã«ãªãã¯ãã§ãã
ãããç§ããã®æ©èœãæã¡ãããšæãããäžã€ã®ã±ãŒã¹ã§ãïŒ
interface Animal {
numberOfLegs: number;
// a gazillion more properties
}
class Dog implements Animal {
breed: string;
constructor(animal: Animal, breed: string) {
Object.assign(this, animal);
this.breed = breed;
}
}
çŸåšãtsãããšã©ãŒããããŸãïŒ
[ts]ã¯ã©ã¹ãDogããã€ã³ã¿ãŒãã§ãŒã¹ãAnimalãã誀ã£ãŠå®è£ ããŠãã
ããããã£ãnumberOfLegsããã¿ã€ããDogãã«ãããŸãã
ã芧ã®ãšãããã³ã³ãã€ã©ã¯å®å šã«ééã£ãŠããŸãããã³ã³ãã€ã©ã®ããã ãã«ãã€ã³ã¿ãŒãã§ã€ã¹ãããã¹ãŠã®ããããã£ãã³ããŒããããããŸããïŒåŒ·å¶ãããã¹ãã§ã¯ãããŸããïŒã
@DethArielåºæ¬çã«ããªããæ±ããŠããã®ã¯ãåã·ã¹ãã ã§äºåŸç¶æ ã®å¯äœçšãè¡šçŸããæ¹æ³ã§ãã ããã¯èå³æ·±ãããšã§ãããã²ã©ãè€éãªã³ãŒãã«ã€ãªãããšæããŸãã
@aluanhaddadãããç§ã¯å®å šã«ããã
ã€ã³ã¿ãŒãã§ã€ã¹ãšã¯ã©ã¹ã®çµã¿åããã䜿çšããã ãã§ã
interface Animal {
numberOfLegs: number;
// a gazillion more properties
}
interface Dog extends Animal {
}
class Dog {
breed: string;
constructor(animal: Animal, breed: string) {
Object.assign(this, animal);
this.breed = breed;
}
}
Thxã @ mhegazy ãããã¯ç¢ºãã«æ©èœããŸãã
ãšã©ãŒã<any>
åé€ã§ããªãå Žåã¯ã©ããªããŸããïŒ
https://github.com/Microsoft/TypeScript/issues/3508ã§èª¬æãããŠããããã«ãå®éšçãªãã€ã³ãæ§æã䜿çšããŠã::
åã®åè¡ã®ãšã©ãŒãç¡èŠãããããšãã§ããŸããã TS1128: Declaration or statement expected
ïŒ
å®éšçãªãã€ã³ãæ§æã䜿çšããŠããŸã
ããã¯ãå®éã«ã¯1ã€ã®èŠåãåŽäžããã ãã§ã¯ãããŸããã ããŒãµãŒã¯ããããµããŒãããŠããªããããçµæã®ããªãŒã¯å®å šã«ééã£ãŠããŸãããã以éã®ã³ã³ãã€ã©ãŒæ©èœã¯ãã¹ãŠæ©èœããŸããããããã£ãŠãåæšè«ãäºææ§ãã§ãã¯ããã©ãŒããããè£å®ãäœããããŸããã ãããã£ãŠããã¹ãŠã®ãšã©ãŒãç¡èŠãããã.jsãã¡ã€ã«ã§äœæ¥ããæ¹ãããã§ãããã
çŸåšã巚倧ãªJSãããžã§ã¯ããtypescriptã«å€æããŠããŸãããå€æãè¡ã£ãåŸã gulp build
ã³ãã³ããå®è¡ãããšãã³ã³ãã€ã«äžã«çŽ2000ã®TSãšã©ãŒã衚瀺ããããšã©ãŒã®å€§éšåã¯ãã¯ã©ã¹ãŸãã¯ã¢ãžã¥ãŒã«ã§å®çŸ©ãããŠããªãããããã£ã«é¢é£ããŠããŸããå®çŸ©ãããŠããŸãã åºåJSãã¡ã€ã«ãçæããããšãã«ããããã®ã¿ã€ãã®ãšã©ãŒãæå¶ããæ¹æ³ãå¿
èŠã ãšæããŸãã
ããã¯ãŸãã«ç§ã®å Žåã§ããES6ããåã®modules-as-propertiesãã¶ã€ã³ã§æ§ç¯ãããã¢ããªãå€æããã®ã§ã巚倧ãªapp.namespace1.namespace2.something.views.viewã®ãããªã°ããŒãã«ãªããžã§ã¯ãããããŸãã
ç§ã¯ãã®äžéšãæžãçŽããã°ããŒãã«ãªappã*ãªããžã§ã¯ããšãã®ã³ãŒãå ã®ããŸããŸãªãµãèŠçŽ ã«äŸåããŠããŸãã ãåå空é 'ã¢ããª'ãèŠã€ãããŸããããšããèŠåã倧éã«è¡šç€ºãããŸãã
ãã¹ãŠã®ã°ããŒãã«äŸåé¢ä¿ãglobalProxy.tsã«ãªãã¡ã¯ã¿ãªã³ã°ããã®ã§ããããèŠåãåãåãå¯äžã®å Žæã§ãããã³ã³ãœãŒã«ãã¯ãªãŒã³ã¢ããããããã«ããã®ãã¡ã€ã«ã®å é ã«// TS-NO-WARNINGSãè¿œå ããã®ã¯çŽ æŽãããããšã§ããæçœãªã¡ãã»ãŒãžãã...
TSãšã©ãŒã¯ã³ãŒãçæããããã¯ããŸããã ããããç¡èŠããããšãã§ããŸããããããã瀺ããŠããã®ã¯ãã³ã³ãã€ã©ãŒãã³ãŒãã®æ£ç¢ºæ§ãè¡šæã§ããªããšããããšã§ãã
@ zeeshanjan82 --allowJs
ã䜿çšããŠããã¡ã€ã«ããšã«ç§»è¡ããŠã¿ãŸãããïŒ ãã®èšå®ã§ã¯ãJavaScriptãœãŒã¹ããã¿ã€ããšã©ãŒãçºçããããšã¯ãããŸããã ã¢ã³ããšã³ãã¯ã€ã«ãã«ãŒã宣èšã䜿çšããŠã次ã®ãããªã¢ãžã¥ãŒã«è§£æ±ºãšã©ãŒãæå¶ããããšãã§ããŸãã
_globals.d.ts_
declare module '*';
ãšã©ãŒæå¶ã®ãã1ã€ã®äœ¿çšäŸã次ã«ç€ºããŸãã
ã¢ãŒã¡ã³ãã©ã€ãã©ãªã®ã¡ã³ããã¯ã startOf
endOf
ã¡ãœãããšisoWeek
ãè¿œå ããã®ãå¿ããŠããŸããã åŸç¶ã®ãªãªãŒã¹ã§ä¿®æ£ãããŸããããããããããšã§ããããã®ãŠãããã®åŠçæ¹æ³ãå®å
šã«ãªãã¡ã¯ã¿ãªã³ã°ããããããç§ãã¡ã®åŽã§ããçŽããå€ãããŸããã
ããã§ãmomentã®ããŒãžã§ã³ãä¿®æ£ããŸããããTSã¹ããŒãšã©ãŒã®ãããåºæ¬çã«isoWeek
䜿çšã§ããªããªããŸããã ãã®ãããçŸæç¹ã§ã¯å²©ãšåºãå Žæã®éã«ç«ã¡åŸçããŠããŸãã
ããŒã«ã«ã³ããŒãè¿œå ããã ãã§ãã 次ã®ãããªç°¡åãªããšãèšã£ãŠãã ããã
// ./overrides/moment.d.ts
declare module "moment";
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"baseUrl": ".",
"paths": {
"moment": ["overrides/moment.d.ts"] // override definition for moment
}
}
}
ããã§ãã³ã³ãã€ã©ã¯ãããã±ãŒãžã«ä»å±ããŠãããã®ã§ã¯ãªãã override/moment.d.ts
ããŒã«ã«ã³ããŒããã§ãã¯ããŸãã æããã«ãããã¯ã¢ãŒã¡ã³ã宣èšãã¡ã€ã«ã®ããŒã«ã«ã³ããŒããŸãã¯å¿
èŠãªãã®ã®å°ããªã»ããã§ããå¯èœæ§ããããŸãã
ãµãŒãããŒãã£ã©ã€ãã©ãªã®ç¬èªã®ã¿ã€ãã³ã°å®çŸ©ãç¶æããæéãšæ¬²æ±ã®äž¡æ¹ãäžè¶³ããŠããŸã;ïŒ
ãµãŒãããŒãã£ã©ã€ãã©ãªã®ç¬èªã®ã¿ã€ãã³ã°å®çŸ©ãç¶æããæéãšæ¬²æ±ã®äž¡æ¹ãäžè¶³ããŠããŸã;ïŒ
ãããŠãããã¯ãŸã£ããåé¡ãããŸããã ã¢ãžã¥ãŒã«ã®declare var $: any
ã«çžåœããdeclare module "moment";
ã䜿çšããã ãã§ãã³ã³ãã€ã©ãŒã¯ããã«ã€ããŠåã³æ°ã«ããããšã¯ãããŸããã
@mhegazyã®ææ¡ã¯éåžžã«è¯ããã®ã§ãã ãããè¡ãã«ã¯çŽ20ç§ããããŸãã ã¡ãªã¿ã«ãç¬éçã«ã¯ãç§ã䜿ã£ãŠãããŠããããããã€ãå¿ããŠããŸãããã«ãªã¯ãšã¹ããåãå ¥ããŠãããŸããã
è¿œå ã®æ¬ ç¹declare module "moment";
ãããªãã¯ããã¯ãä»»æã®ç¬éã«é¢é£ããã³ãŒãã®ããã®ä»»æã®IDEã€ã³ããªã»ã³ã¹ãéçåãã§ãã¯ãæããªããšããããšã§ãã ãŸããçºçããany
åšå²ã®ã³ãŒãã«ããªãŒãã¢ãŠãããåŸåããããããã§ãå€ãã®éçãã§ãã¯ãã·ã£ããããŠã³ããŸãã åäžã®åé¡ã®ããåæå€ã«é¢é£ãããšã©ãŒãæå¶ããããã«æ¯æãã®ã¯é«é¡ã§ãã
@aluanhaddadã¯ãåé¡ãä¿®æ£ããããã«éããŠãããã«ãªã¯ãšã¹ãããããŸããããå¥ã®ãªã¯ãšã¹ããé倧ãªå€æŽãå°å
¥ãããŸããïŒããã§ãã isoWeek
ãµããŒãã¯è¿œå ãããŸãã
éèŠãªã®ã¯ãAngular 2ãªã©ã®æ¡çšã«ããããããã®åé¡ã¯å°æ¥ããã«é »ç¹ã«çºçãããããç¹å®ã®ãšã©ãŒãæå¶ããæ¹æ³ã圹ç«ã€ãšæããŸãã
ããŒãã³ã¢ã©ã€ãã©ãªïŒããããããŒã6.9 LTSïŒã§ãã®åé¡ãçºçããŸãïŒ
server = net.createServer({ pauseOnConnect: true }, function(connection) { ... })
// [ts] severity: 'Error'
message: 'Argument of type '{ pauseOnConnect: boolean; }' is not assignable to parameter of type '{ allowHalfOpen?: boolean; }'.
Object literal may only specify known properties, and 'pauseOnConnect' does not exist in type '{ allowHalfOpen?: boolean; }'.'
ãŸããioredisã©ã€ãã©ãªã䜿çšããå ŽåïŒ
var redis = new Redis(CONFIG.redis);
// [ts] severity: 'Error'
message: 'Only a void function can be called with the 'new' keyword.'
@yortusãš@adamreisnzãææããããã«ãå®çŸ©ãã¡ã€ã«ãåžžã«æ£ããæŽæ°ããããšã¯éããªããããããã¯äžè¬çãªåé¡ã§ãã ããã«ã declare module "x";
ã䜿çšããŠTSã®ã¡ãªãããç ç²ã«ããå¿
èŠãããå ŽåããããããªãTSã䜿çšããã®ã§ããããã
ã€ã³ããªãžã§ã³ã¹ã倱ããªãããã«ãæ¬ èœããŠããã¿ã€ãã§ã¢ãžã¥ãŒã«ãæ¡åŒµããããšãã§ããŸãã
ããŠãç§ãæžããšãïŒ
if (typeof Symbol === "function" && Symbol.match) {
// ...
}
target
ães5
å Žåãtypescriptã³ã³ãã€ã©ã¯åžžã«ãšã©ãŒCannot find name 'Symbol'
å ±åããŸããããã®ã³ãŒãã¯å®éã«æåŸ
ã©ããã«æ©èœããŸãã
ãããã£ãŠãã³ã¡ã³ãè¡ã§æ©èœããããã€ãã®å¶åŸ¡ãã£ã¬ã¯ãã£ããéåžžã«å¿ èŠã§ããããšã«åæããŸãã
declare var Symbol: any;
@ gdh1995 @mhegazyãŸãã¯ã lib
ãã©ã°ães2015
èšå®ããå®éã®ä¿®æ£ã䜿çšããŸãã
@mhegazyããããšãã ç§ã¯ãããããŸããããšæããŸãïŒ
declare var Symbol: {
(description?: anyNotSymbol): symbol;
readonly match: symbol;
};
@DanielRosenwasser es2015
ã¯ãããã®äŸ¿å©ãªæ©èœãè¿œå ããŸãããç§ã®ãããžã§ã¯ãã¯es5
ãšã®äºææ§ã«å¶éãããŠãããããä»ã®ãã¡ã€ã«ã§ã¯Symbol
ãé¿ããå¿
èŠããããŸãã
ç§ãä»ç解ããŠããªãã®ã¯ã typeof Symbol === "function"
æžãããšããŠããTypeScriptã³ã³ãã€ã©ãŒããšã©ãŒãåºããšããããšã§ãã äœãã¢ããã€ã¹ïŒ
ç§ãåãäžããªããã°ãªããªã1ã€ã®ã±ãŒã¹ã¯ãäŸåé¢ä¿ãã¢ãã¯ããããšã§ãã
// Test.ts
// Component to test
import {ComponentToTest} from './ComponentToTest';
// Dependency of ComponentToTest to mock
import {Dependency} from './Dependency';
// Mock to replace it with
import {MockedDependency} from './MockedDependency';
Dependency = MockedDependency;
ãã®ã³ãŒãã«ã¯ããã¹ããããã³ã³ããŒãã³ãå ã§äŸåé¢ä¿ãã¢ãã¯ãããšããæãŸããå¹æããããŸãããTypeScriptã¯ããå€æ°ã§ã¯ãªãããããäŸåé¢ä¿ãã«å²ãåœãŠãããšãã§ããŸããããšããæçœãªçµæãã¹ããŒããŸãã ãšã©ãŒã
ç§ã¯ééã£ãæšãå ããŠããã®ã§ã inject-loader
ãããªãã®ã䜿çšããå¿
èŠããããšããå¿çã«ãªããšç¢ºä¿¡ããŠããŸãããç§ã®çµéšããããããã®ãœãªã¥ãŒã·ã§ã³AïŒã¯åäœããã®ãé¢åã§ã/åžžã«ã§ã¯ãããŸããä»äºãšBïŒã¯äžèšã»ã©åçŽã§ã¯ãããŸããã OPãè¿°ã¹ãããã«ãéçºè
ãæãããç¥ã£ãŠããå ŽåããããŸãã ç§ã¯ãããããããŒãªè§£æ±ºçã§ããããšãç¥ã£ãŠããŸãããããã¯æ©èœããŸãããã®å ŽåãTSãã·ã£ããããŠã³ããããšãæãã§ããŸãã
ãã®ã³ãŒãã«ã¯ããã¹ããããã³ã³ããŒãã³ãå ã§äŸåé¢ä¿ãã¢ãã¯ãããšããæãŸããå¹æããããŸãããTypeScriptã¯ããå€æ°ã§ã¯ãªãããããäŸåé¢ä¿ãã«å²ãåœãŠãããšãã§ããŸããããšããæçœãªçµæãã¹ããŒããŸãã ãšã©ãŒã
ããã¯ES6ã®ãšã©ãŒã§ãã ãã®ãããå°æ¥ããšã³ãžã³ãES6ã¢ãžã¥ãŒã«ããã€ãã£ãã«ãµããŒãããããã«ãªããšããã¹ããæžãçŽãå¿ èŠããããŸãã
ãŸãã¯ã ComponentToTest
ã«Dependency
åŒæ°ãåãå
¥ããããŠããã¹ãã«åæ Œãããããã¡ãœãããåŒã³åºãåã«Dependency
ã®å€ããªãŒããŒã©ã€ãã§ãããã¹ãããã¯ãèšå®ããããšãã§ããŸãã ComponentToTest
ã
ããã¯ES6ã®ãšã©ãŒã§ãã ãã®ãããå°æ¥ããšã³ãžã³ãES6ã¢ãžã¥ãŒã«ããã€ãã£ãã«ãµããŒãããããã«ãªããšããã¹ããæžãçŽãå¿ èŠããããŸãã
ãã®èŠä»¶ã¯ãã®åé¡ã«æ¥ããŠããã®ã§ãç§ã¯ãããåé€ããŸãã
ãŸãã¯ãComponentToTestã«Dependencyã®åŒæ°ãåãå ¥ããããããšãã§ãããã¹ãã¯ããã«åæ Œããããšãã§ããŸã...
ãããç§ãã¡ããã£ãããšã ãšæããŸãã ã¯ã©ã¹ã®APIãåå®çŸ©ããŠãã¹ãå¯èœã«ããå¿ èŠãããã®ã¯ããªãäžèªç±ã§ãããããã¯TSã«åºæã®åé¡ã§ã¯ãªããšæããŸãã
ãã£ãŒãããã¯ãããããšãã @ mhegazy
é¢æ°ã®åŒæ°ã®åã®ãã§ãã¯ãäžæžããããã®ã§ããã
ç§ã®ãŠãŒã¹ã±ãŒã¹ã¯éåžžã«åçŽã§ã次ã®ãããªé¢æ°ããããŸãã
function isValidId(s: string): boolean {}
æååãäœããã®èŠåã«åŸã£ãŠãããã©ããããã§ãã¯ããŸãã
ããã¯å
éšçã«ããŠãŒã¶ãŒå
¥åã®æ€èšŒã«ã䜿çšãããŸã-ãŠãŒã¶ãŒãæåå以å€ã®ãã®ãæ¿å
¥ãããšãã«false
è¿ããã©ããã確èªãããã¹ããäœæããããšæããŸãã
å³å¯ã«èšãã°ãé¢æ°ã¯ããã管çã§ããã®ã§å ¥åãšããŠäœã§ãåãå ¥ããããšãã§ããŸãããå éšã§ã䜿çšããã®ã§ãæååãå¿ èŠã§ããããšãæå®ããããšæããŸã
ãããã£ãŠããã¹ãã§ã®ééã£ã圢åŒã«é¢ãããšã©ãŒãæå¶ããããã«äœãã欲ããã§ã
@rpadovaniã¯any
䜿çšããã ãã§ãïŒ
expect(isValidId(78 as any)).toBe(false);
ããã䜿ããŸãã fooïŒbarïŒanyãbazïŒanyïŒããã¬ãŒã ã¯ãŒã¯ã®äžéšãšããŠå®çŸ©ãããŠããç¶æ³ããããŸãããfooã®äžéšã®å®è£ ã§ã¯ãbarã䜿çšãããŠããŸããã ã¿ã€ãã¹ã¯ãªãããšã©ãŒãã§ãã¯ããªã³ã«ãããšãæªäœ¿çšã®å€æ°ã宣èšãããŠããããããšã©ãŒãã¹ããŒãããŸãã ä»ã®ããŒãžã§ã³ã®fooãbarã䜿çšãããŠããããã宣èšããå¿ èŠããããŸãã
@benjaminabbitt foo (_bar: any, baz: any)
æ©èœããŠããããã§ãã "_"
å§ãŸãååã¯åŒ·å¶çã«äœ¿çšãããŸããã
è¿œå ïŒç¹å¥ãªãšã©ãŒãäžæžã/ç¡èŠããæ©èœãéèŠã ãšæããŸãã
ããã§é£ããã®ã¯ããšã©ãŒãæå¶ããããã³ãŒãã¹ãããããæçš¿ãããããããã®ãšã©ãŒãæ¶é³ããããã®å¹æçãªã³ãŒãå ãœãªã¥ãŒã·ã§ã³ãå ¥æãããïŒãŸãã¯ã³ãŒããèŠã€ããã®ã«æ¬åœã«åé¡ãããïŒãšäººã ãèšãç¶ããããšã§ãã æ¬åœã«åé¡ã®ãããšã©ãŒãã©ã®ããã«èŠãããããŸãã¯äººã ãã°ããŒãã«ã«æå¶ããããšã©ãŒãã©ã®ãããªãã®ã§ããããç解ããã«ããã®æ©èœãèšèšããããšã¯å°é£ã§ãã
ãããžã§ã¯ãã«å«ããããµãŒãããŒãã£ã®JavaScriptã³ãŒããåŠçããé©åãªæ¹æ³ã¯äœã§ããïŒ
次ã®ã·ããªãªãèããŠã¿ãŸãããã npmã«å ¬éãããŠããªã巚倧ãªã©ã€ãã©ãªããããå ¬éãããŠãããšããŠããã©ã€ãã©ãªããã®ãŸãŸäœ¿çšãããšãã¢ããªã±ãŒã·ã§ã³ã倧éã®ãããã³ãŒããæã¡æ©ãããšã«ãªããŸãïŒããªãŒã®æºãã¯ãã¹ãŠããªããžã§ã¯ãã«ã¢ã¿ããããããã圹ã«ç«ã¡ãŸããïŒã
ãã®å Žåããã®ã³ãŒããæœåºããŠnpmã§å ¬éãã䟡å€ããªããšä»®å®ããŸãããã ä»ã«ã©ã®ãããªãªãã·ã§ã³ããããŸããïŒ
ãã®ã©ã€ãã©ãªã䜿çšããããã«ããããžã§ã¯ãã«å¿ èŠãªã³ãŒããæœåºããã¿ã€ãã¹ã¯ãªãããã¡ã€ã«ãšããŠãããžã§ã¯ãã«çµã¿èŸŒã¿ãŸããã ããã«é¢ããåé¡ã¯ãtypescriptããã®ãã¡ã€ã«ããã§ãã¯ãããã®ãã¡ã€ã«ã«å¯ŸããŠå€ãã®ãšã©ãŒãåºãããšã§ãã
ãã®ç¶æ³ã§ã¯ããã¡ã€ã«å
ã§çºçããå¯èœæ§ã®ãããšã©ãŒãæ°ã«ããªãããšãtypescriptãèªèã§ããããã«ãäžéšã«/* ts:disable */
ã³ã¡ã³ããä»ãããšäŸ¿å©ã§ãã
ç§ã®ãããžã§ã¯ãã¯JavaScriptãã¡ã€ã«ãã³ãããããªããªã£ãããšã«æ³šæããŠãã ãããã³ããããããšããŠããJavaScriptããããŒã«çµã¿èŸŒããšããã«ãããã»ã¹ãããè€éã«ãªããŸãã
typescriptãããžã§ã¯ãã§ãã¹ãããå¿ èŠããããµãŒãããŒãã£ã®javascriptã³ãŒããåŠçããæ¹æ³ã«ã€ããŠèª°ãã¢ããã€ã¹ããããŸããïŒ
typescriptãããžã§ã¯ãã§ãã¹ãããå¿ èŠããããµãŒãããŒãã£ã®JavaScriptã³ãŒããåŠçããæ¹æ³ã«ã€ããŠèª°ãã¢ããã€ã¹ããããŸããïŒ
ãããã移è¡ããªãã§ãã ããã .jsãã¡ã€ã«ã¯ãã®ãŸãŸã«ããŠãããŸãã 代ããã«ããããã®.d.tsãã¡ã€ã«ãäœæããŸãã ããã¯ãããããæ¹æ³ã§.d.tsãã¡ã€ã«ãäœã§ãããã§ãã
.d.tsãã¡ã€ã«ã¯ã次ã®ãããªåºæ¬çãªãã®ã§å§ããããšãã§ããŸãã
declare var $: any;
次ã«ãå¿ èŠã«å¿ããŠããŸãããŒãºã倧ãããªãã«ã€ããŠãããã«è¿œå ããŸãã
ç§ãjsãã¡ã€ã«ãã³ãããããŠãããªããããã¯è¯ããªãã·ã§ã³ã§ãã jsãã¡ã€ã«ãç¡èŠãããããžã§ã¯ãã«ä»ã®ãªãã·ã§ã³ã¯ãããŸããïŒ
ç§ãjsãã¡ã€ã«ãã³ãããããŠãããªããããã¯è¯ããªãã·ã§ã³ã§ãã jsãã¡ã€ã«ãç¡èŠãããããžã§ã¯ãã«ä»ã®ãªãã·ã§ã³ã¯ãããŸããïŒ
質åãç解ã§ãããããããŸããã JSãã¡ã€ã«ã¯ããã©ã«ãã§ç¡èŠãããŸãã ãããã£ãŠããã¡ã€ã«ã®è¿œå ããªããã€ã³ããŸãã ç¹°ãè¿ãã«ãªããŸãããèªåã®ãã®ã§ã¯ãªãå€éšã³ãŒãããŸãã¯å€æŽããäºå®ã®ãªãã¬ã¬ã·ãŒã³ãŒãã«ã€ããŠã¯ãããããTSã«å€æããªãããšããå§ãããŸãã ãããã®ããã«.d.tsãã¡ã€ã«ãæžãããšããå§ããŸãã ãã®ããã«ã any
åçŽã«éå§ãã次ã«è¿œå ããŸãã
jsãã¡ã€ã«ãgitãªããžããªã«ã³ããããããŠããªãã®ã§ãã³ãŒããtsãã¡ã€ã«ã«å ¥ããçç±ãèšã£ãŠããã¹ãã§ããã ãšã«ãããç§ã¯ããªããèšåããã«ãŒãã«è¡ãããããã®jsãã¡ã€ã«ã匷å¶çã«ã³ãããããããšããŸãã
.jsãã¡ã€ã«ãã³ãããããå¿
èŠã¯ãããŸããã äŸåé¢ä¿ã䜿çšããŠãããšããŸãããã éåžžããªããžããªã§react-0.12.0.js
ãã³ãããããããšã¯ãããŸããããããã䜿çšããããšèããŠããŸãã éåžžããããCDNã®sccriptã¿ã°ã«å«ããããšãã§ããŸãã ãŸãã @types/react
ãååšããªãããŸãã¯äœ¿çšããããªããšããŸãããã ãããã£ãŠããããžã§ã¯ãã«æ°ãã宣èšãã¡ã€ã«ãè¿œå ãããããdeclarations.d.ts
ãšåŒã³ã次ãè¿œå ããŸãã
declare module "react"; // just saying the module is of type any
ããã¯ããreactããšåŒã°ããã¢ãžã¥ãŒã«ããããããã䜿çšããã ãã§ã.jsãã¡ã€ã«ãå«ããå¿ èŠããªãããšãã³ã³ãã€ã©ãŒã«éç¥ããŸãã
ãããã£ãŠãJavaScriptã®å°ããªãã£ã³ã¯ïŒnpm / CDNã§ã¯å©çšã§ããªãïŒã䜿çšãããå Žåããããã³ãŒãããŒã¹ã«ã³ãããããããšã«ããå Žåã2ã€ã®ãªãã·ã§ã³ããããŸãã
ãªãã·ã§ã³1 ïŒå
ã®ã³ãŒãã.js
ãã¡ã€ã«ãšããŠä¿æããã¿ã€ããåŠçããããã«.d.ts
ãã¡ã€ã«ãç¶æããŸãã
@ jmlopez-rodã¯ãJavaScriptã³ãŒãããªããžããªã«ã³ãããããããªããããããã¯æ©èœããªããšæããŸããã³ããããããšããŠãããã«ãããã»ã¹ãè€éã«ãªããšåœŒã¯èšããŸããã
ãªãã·ã§ã³2 ïŒjavascriptãtypescriptã§ã©ããããtypescriptã®ãã¹ãŠã®ãšã©ãŒãåŠçããŸãã
ããã¯ãã³ãŒããã¿ã€ãã¹ã¯ãªããã®ããã«æ±ãããããè€éãªãã«ãããã»ã¹ããåé¿ããŸã...ããããã¿ã€ãã¹ã¯ãªãããšã©ãŒãçºçãããã®åé¡ã®ã¹ã¬ããã®å ã®èª¬æã«æ»ããŸããã ããã¯ãtypescriptãšã©ãŒãç¡å¹ã«ã§ããæå¹ãªãŠãŒã¹ã±ãŒã¹ã§ããïŒ
@ jmlopez-rodã¯ãJavaScriptã³ãŒãããªããžããªã«ã³ãããããããªããããããã¯æ©èœããªããšæããŸããã³ããããããšããŠãããã«ãããã»ã¹ãè€éã«ãªããšåœŒã¯èšããŸããã
ãã«ãããã»ã¹ãè€éã«ãªãçç±ãããããŸããã ãã¡ã€ã«"library.js"
ãš"website.js"
ããwebsite.jsãããwebsite.tsãã«ç§»åãã tsc website.ts --outFile website.js
ãåŒã³åºãã ãã§ããã¹ãŠã®å Žæã«æ»ããŸãã 2ã€ã®.jsãã¡ã€ã«ããå§ããŸããã ã ããããªãããã以åãããè€éã«ãªã£ãã®ãããããªã..ããã¯ãã§ãŒã³ã®å
é ã«ããåãªãè¿œå ã®ãã«ãã¹ãããã§ãã
ããã¯ãã³ãŒããã¿ã€ãã¹ã¯ãªããã®ããã«æ±ãããããè€éãªãã«ãããã»ã¹ããåé¿ããŸã...ããããã¿ã€ãã¹ã¯ãªãããšã©ãŒãçºçãããã®åé¡ã®ã¹ã¬ããã®å ã®èª¬æã«æ»ããŸããã ããã¯ãtypescriptãšã©ãŒãç¡å¹ã«ã§ããæå¹ãªãŠãŒã¹ã±ãŒã¹ã§ããïŒ
ãã®ãã¡ã€ã«ãtsã«åãæ¿ããŠãããžã§ã¯ããšçµ±åãããã®ã¿ã€ããä»ã®ã³ã³ããŒãã³ãã«æµã蟌ã¿ãã³ãŒããšäžç·ã«ãã«ãããããã§ãå¥ã®æšæºã«ä¿ã€ããšã«ããçç±ãå®å šã«ç解ã§ããŸããã
äŸãããã§åœ¹ç«ã€ãããããŸããã @RyanCavanaughãææããããã«ããããã®åé¡ã¯ãã¹ãŠããšã©ãŒããŸãšããŠç¡å¹ã«ããŠèµ€ã¡ãããã颚åã«æã蟌ãã®ã§ã¯ãªããã³ã³ãã€ã©ã«åãäŒããŠãšã©ãŒãåé¿ããããã®æ確ãªæ¹æ³ãããããã«æãããŸãã
ãã®ã¢ã³ããšã³ã宣èšãæ©èœããªãçç±ãç解ã§ããŸããã§ããã
ç§ã¯ãã§ã«ãã®ããã«tsconfig.jsonãžã®ãã¹å®çŸ©ãå®çŸ©ããŸãã"paths": {
"js-xlsx": ["./xlsx.d.ts"]
}
ããããããã§ãç§ã¯ãã®ã¢ãžã¥ãŒã«ãèŠã€ãããªããšãããšã©ãŒã«åºããããŸãã
'fs'ã 'fs-extra'ãè¿œå ããããšããŸãããããã® 'js-xlsx'ã©ã€ãã©ãªã¯ãã¹ãŠãã¢ã³ããšã³ã宣èšããã£ã¹ãããŸãã¯ããã«ãããããªåã®è¿œå ã«å¿çããŸããã§ããdeclare var $: any;
@mhegazy
.jsãã¡ã€ã«ãã³ãããããå¿ èŠã¯ãããŸããã äŸåé¢ä¿ã䜿çšããŠãããšããŸãããã éåžžããªããžããªã§react-0.12.0.jsãã³ãããããŸããããããã䜿çšããããšèããŠããŸãã éåžžããããCDNã®sccriptã¿ã°ã«å«ããããšãã§ããŸãã ãŸãã@ types / reactãååšããªãããŸãã¯äœ¿çšããããªããšããŸãããã ãããã£ãŠããããžã§ã¯ãã«æ°ãã宣èšãã¡ã€ã«ãè¿œå ãããããdeclarations.d.tsãšåŒã³ã次ãè¿œå ããŸãã
ã¢ãžã¥ãŒã«ãreactãã宣èšããŸãã //ã¢ãžã¥ãŒã«ãanyåã§ãããšèšãã ã
ããã¯ããreactããšåŒã°ããã¢ãžã¥ãŒã«ããããããã䜿çšããã ãã§ã.jsãã¡ã€ã«ãå«ããå¿
èŠããªãããšãã³ã³ãã€ã©ãŒã«éç¥ããŸãã
ã¡ãªã¿ã«ãfs-extraã©ã€ãã©ãªã«ã¯@ types / fs-extraã®ãããªåå®çŸ©ããããjs-xlsxã«ã¯ts-xlsxã©ã€ãã©ãªããããŸãããããã¯éåžžã«å¥åŠãªã®ã§ããã®ããªãã¯ã¯æ©èœããŸãã:(
ã¡ãªã¿ã«ãfs-extraã©ã€ãã©ãªã«ã¯@ types / fs-extraã®ãããªåå®çŸ©ããããjs-xlsxã«ã¯ts-xlsxã©ã€ãã©ãªããããŸãããããã¯éåžžã«å¥åŠãªã®ã§ããã®ããªãã¯ã¯æ©èœããŸãã:(
ããªãã®ãããžã§ã¯ãã§ã¯ä»ã«ãäœããèµ·ãã£ãŠãããšæããŸãã
c:\test\9448>npm install @types/fs-extra
[email protected] c:\test\9448
`-- @types/[email protected]
`-- @types/[email protected]
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
c:\test\9448>type a.ts
import { rmdir } from "fs-extra";
rmdir("c:/test");
c:\test\9448>type tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5"
}
}
c:\test\9448>tsc --v
Version 2.2.0
c:\test\9448>tsc
c:\test\9448>echo %ERRORLEVEL%
0
ãããå€åãããããç§ãç解ã§ããªãã£ãäž»ãªåé¡ã¯ããªãç§ãäžããããã¡ãœããã§ã³ã³ãã€ã©ã®èŠåãæå¶ã§ããªãã£ãã®ããšããããšã§ãã ã¡ãªã¿ã«ãç§ã¯https://github.com/AngularClass/angular2-webpack-starter ãç§ã®ãããžã§ã¯ãã®ããŒã¹ãæã£ãŠã
ãšã©ãŒãæå¶ããããšã¯ãå¿ ãããã¢ã³ããã¿ãŒã³ãå°å ¥ããããšãæå³ããããã§ã¯ãããŸããã
ééã£ããšã©ãŒãçºçããŸãã
error TS1005: '{' expected.
ãã®å®å šã«çŽ æŽãããJSXã«ã€ããŠïŒ
<motor-node ref = 'menu'
absoluteSize = `0, ${this.MENU_BAR_HEIGHT}, 0`
>
{menu}
</motor-node>,
ãã³ãã¬ãŒãæååã«{
ãå¿
èŠã§ãããšæå¥ãèšããŸãã ããã¯çæ³çã«ã¯ä¿®æ£ãããã¹ãã§ããããããŸã§ã¯ãæ£åœãªçç±ã§ãšã©ãŒãæå¶ã§ããããã«ããããšæããŸãã
@trusktr ããã®ãšã©ãŒã¯è§£æãšã©ãŒã§ãã ãããæå¶ããŠããã³ã³ãã€ã©ããã®æç¹ããã³ãŒããç解ããªããšããäºå®ã¯å€ãããŸããããŸãããã¡ã€ã«ã®æ®ãã®éšåã®åœ¢ç¶ã¯æªå®çŸ©ã®ç¶æ ã«ãªããŸãã ã€ãŸãããã®ãšã©ãŒãããã£ããšããŠããæšæž¬ãããã¿ã€ããããã®ãã¡ã€ã«ãŸãã¯ä»ã®ãã¡ã€ã«ã§çæãããä»ã®ãšã©ãŒã¯æ£ãããããŸããã
ããã¯èšã£ãã JSXä»æ§ã«ãããšïŒ
JSXAttributeValueïŒ
ãJSXDoubleStringCharactersoptã
'JSXSingleStringCharactersopt'
{AssignmentExpression}
JSXElement
ãããã£ãŠããšã©ãŒã¯æ£ãããJSXå±æ§ã«æååãã³ãã¬ãŒããªãã©ã«ãå«ããããšã¯ã§ããŸããã 代ããã«absolteSize = {...}
䜿çšã§ããŸã
ãã®ãšã©ãŒã¯è§£æãšã©ãŒã§ã
ã¯ãããããä¿®æ£ãããã¹ãçç±ã§ãã
åºåã¯absoluteSize: "0, " + this.MENU_BAR_HEIGHT + ", 0"
ãããã¯ã³ã³ãã€ã©ãŒã«åé¡ããªãããšã瀺ããŠããŸãã
ããã ç³ãèš³ãããŸããã ç§ã¯ããªãã®ã³ã¡ã³ããç解ã§ããŸããã§ããã ç§ã¯ããªãããšã©ãŒãæ²é»ãããããšæã£ãã
ç§ã¯ããããŸããããããªãã¯æ£ããã§ããå€åç§ã¯{}
è¿œå ããã ãã§çããã¹ãã§ãã
TS 2.1ïŒVS2017 RCïŒã§ã¯ãTS7027ãªã©ã®ã©ã€ãã©ãªJSãã¡ã€ã«ïŒ/ Scriptsã«ããïŒãã©ã«ããŒããèŠåãå ±åãããŸãã ã©ã€ãã©ãªãã¡ã€ã«ããã®èŠå/ãšã©ãŒãæå¶ã§ããããå°ãªããšãäœããã®ã°ããŒãã«æå¶ãã¡ã€ã«ïŒCïŒGlobalSupressions.csãšåæ§ïŒã§ãããããµããŒãã§ãããšäŸ¿å©ã§ãã
TS 2.1ïŒVS2017 RCïŒã§ã¯ãTS7027ãªã©ã®ã©ã€ãã©ãªJSãã¡ã€ã«ïŒ/ Scriptsã«ããïŒãã©ã«ããŒããèŠåãå ±åãããŸãã
å°éäžèœã³ãŒãïŒTS 7027ïŒã®å Žåã¯ã --allowUnreachableCode
èšå®ãããã tsconfig.json
èšå®ããŸãã
ãããããããã©ã€ãã©ãªãã¡ã€ã«ã«ã®ã¿é©çšããããšã¯å¯èœã§ããã ãç§ã®ã³ãŒããã®ããã«ç§ã¯ãããå¿ èŠã ããã§ãïŒ
--alowJs
ãããšãã³ãŒãã«ãªããŸãã ã³ã³ãã€ã©ã¯ãããåžã蟌ã¿ãææ¡ãããã¿ãŒã²ããã«ãã©ã³ã¹ãã€ã«ãã --outFile
ã䜿çšããå Žåã¯é£çµããŸã..ããã¯.jsæ¡åŒµåãæã£ãŠããã ãã§ãã ãã©ã€ãã©ãªãã³ãŒãã®å Žåã¯ã.d.tsãäœæãã代ããã«ãããå«ããããšããå§ãããŸãã
VS2015ã§--allowJs--ããªã³ã«ããããšã«æ°ã¥ããŠããŸãããããŸã£ããåããããžã§ã¯ããã¹ã¯ãªããå ã«ããjquery.jsãreact.jsãã¡ã€ã«ãæ³¢æã€ããšã¯ãããŸããïŒå®éã«ã¯ãã«ãã£ãŠhtmlããŒãžããã®ã¿åç §ãããŸãïŒ
let { value } = browser.waitForPromise(() => {
return browser.executeAsync(function (method, name, resolve) {
require(['patron.Locator/patron.Locator.Manager'], function (locator) {
resolve(result);
});
}, method, name);
});
ç§ã®å ŽåãTypeScriptã§æžããã1è¡ç®ãJavaScriptã§æžããã2è¡ç®ã§ãã ãããã¯ç°ãªãã³ã³ããã¹ãã§å®è¡ãããJavaScriptã³ãŒããå€æŽããããããŸããã
ãããã£ãŠã /* ts-disable */
/* ts-enable */
ïŒeslintã®ãããªïŒã®ãããªæ°ãããªãã·ã§ã³ãå¿
èŠã§ã
ç§ã®å ŽåãTypeScriptã§æžããã1è¡ç®ãJavaScriptã§æžããã2è¡ç®ã§ãã ãããã¯ç°ãªãã³ã³ããã¹ãã§å®è¡ãããJavaScriptã³ãŒããå€æŽããããããŸããã
ãJavaScriptã§æžããã2è¡ç®ãã®æå³ãããããŸãããïŒ ã¹ããŒãã¡ã³ãå šäœãã³ã³ãã€ã©ãŒã«æž¡ããŸããïŒ
ãJavaScriptã§æžããã2è¡ç®ãã®æå³ãããããŸãããïŒ ã¹ããŒãã¡ã³ãå šäœãã³ã³ãã€ã©ãŒã«æž¡ããŸããïŒ
ããã¯SeleniumãµãŒããŒã«æž¡ãããå¿ èŠãããã®ã§ãç§ã¯ãã®ã³ãŒããå€æŽããå¿ èŠã¯ãããŸããã§ããšã
ãã®ã³ãŒãã¯ãã®ãŸãŸSeleniumãµãŒããŒã«æž¡ãããå¿ èŠããããããå€æŽããããããŸããã
ããã.tsãã¡ã€ã«ã«ããå Žåã¯ãã³ã³ãã€ã©ã«ãã£ãŠå€æãããŸãã ã³ã³ãã€ã©ã¯å泚éãåé€ããŸãã
ãšã«ããããã®ãµã³ãã«ã§ã¯ãââå¿
èŠãªã®ã¯declare var browser: any;
ã ãã§ããããšã©ãŒã¯çºçããªãã¯ãã§ãã ãµã³ãã«ã«ã€ããŠã¯ã Playgroundãåç
§ããŠãã ããã
ããã.tsãã¡ã€ã«ã«ããå Žåã¯ãã³ã³ãã€ã©ã«ãã£ãŠå€æãããŸãã ã³ã³ãã€ã©ã¯å泚éãåé€ããŸãã
ç¹å®ã®ã³ãŒããIE6ããã®ä»ã®å€ããã©ãŠã¶ãŒã§æ¹ãããããŠããªãç¶æ
ã§å®è¡ãããŠããããšãä¿èšŒããå¿
èŠããããŸãã
ããšãã°ãNode.jsã¯CommonJSã¢ãžã¥ãŒã«ã·ã¹ãã ã«åŸããŸãããç§ã®require
ã¯ãä»ã®éçºè
ããã®ããŒãžã§å®çŸ©ããã«ã¹ã¿ã é¢æ°ã§ãã ãã®ãããå€æŽåŸããã³å€æŽãªãã§ãã®ã³ãŒããå«ããããšæããŸãã ããã¯ç§ãšç§ã®ããŒã ã«ãšã£ãŠéèŠã§ãã
ãšã«ããããã®ãµã³ãã«ã§ã¯ãââå¿ èŠãªã®ã¯varbrowserã宣èšããããšã ãã§ãã ãšã©ãŒã¯çºçããªãã¯ãã§ãã ãµã³ãã«ã«ã€ããŠã¯ãPlaygroundãåç §ããŠãã ããã
å®éããã©ãŠã¶ãªããžã§ã¯ãã¯ç§ã®ãããžã§ã¯ãã§æã人æ°ã®ãããªããžã§ã¯ãã§ããããããç¡èŠããçç±ã¯ãããŸããã browser.execute
ã¡ãœããã«ãç¬èªã®å宣èšããããŸãã
ä»ãç§ã¯åé¡ãäœã§ããããç解ããŠãããã©ããããããŸããã ããªããåŸãŠãããšã©ãŒã¯äœã§ããïŒ
ç§ã®ã³ãŒãã¯ãããŒããšãã©ãŠã¶ãŒãšããããŸããŸãªã³ã³ããã¹ãã§å®è¡ãããŸãã 2çªç®ã®ã³ã³ããã¹ãã®çŸåšã®åé¡ã¯ãå泚éãšã³ãŒãå€æŽã§ãã
let { value } = browser.waitForPromise(() => { // node
return browser.executeAsync( // node
function (method, name, resolve) { // browser
require(['patron.Locator/patron.Locator.Manager'], function (locator) { // browser
resolve(result); // browser
}); // browser
}, method, name);
});
browser.executeAsync
ã¡ãœããã®ç°¡åãªå®è£
ã次ã«ç€ºããŸãã
browser.executeAsync = (...args) => {
let script = args.shift();
RPC.Selenium('/session/:sessionId/execute', {
script: `return (${script}).apply(null, arguments)`,
args
});
}
ã芧ã®ãšãããçµ±åãã¹ãã«ã¯TypeScriptã䜿çšããŠããŸãã
ãšã©ãŒã¡ãã»ãŒãžã¯äœã§ããïŒ
æšæºãšã©ãŒïŒ
TS2345: Argument of type 'string[]' is not assignable to parameter string
TS7006: Parameter 'error' implicitly has an 'any' type
TS7006: Parameter 'attach' implicitly has an 'any' type
TS7006: Parameter 'message' implicitly has an 'any' type
TS7006: Parameter 'model' implicitly has an 'any' type
çã ...
require
æ£ããå®çŸ©ããŸãã
declare function require(v: string[]): any;
requireãæ£ããå®çŸ©ããŸãã
ã§ããŸããã ç§ã®å Žåã executeAsync
ã¡ãœããã«ã¯ãµãŒãããŒãã£ãããžã§ã¯ãã®ã³ãŒããå«ãŸããŠããããã®ãããªrequire
ã«ã¯ããŸããŸãªããªãšãŒã·ã§ã³ããããŸãã äžèšã®ã³ãŒãã¯ãæ°çŸã®é¢æ°ã®1ã€ã«ãããŸããã
ç§ã®æã¿ã¯éåžžã«åçŽã§ãâå¿
èŠãªãšãã«ããã€ãã®ã³ãŒããé€å€ãããŠãã ãã:)
declare function require(v: string[]): any;
ããŒã«ã«ã«çœ®ãããšãã§ããŸãã äŸãã°ïŒ
// module a.ts
export var ...
declare function require(v: string[], callback: Function);
let { value } = browser.waitForPromise(() => {
return browser.executeAsync(
function (method, name, resolve) { // browser
require(['patron.Locator/patron.Locator.Manager'], function (locator) { // OK
resolve(result);
});
}, method, name);
});
å¿
èŠã«å¿ããŠany
ã«ãã£ã¹ãããããšãã§ããŸãã
let { value } = browser.waitForPromise(() => { // node
return browser.executeAsync( // node
function (method, name, resolve) { // browser
(<any>require)(['patron.Locator/patron.Locator.Manager'], function (locator) { // browser
resolve(result); // browser
}); // browser
}, method, name);
});
ããã«ãããåãã³ãŒããçæãããŸãã
ç§ã®å Žåã2ã€ã®ã¯ã©ã¹ã«ãã£ãŠã®ã¿æ¡åŒµãããããšãæå³ãããã©ã€ããŒãïŒãšã¯ã¹ããŒããããŠããªãïŒæœè±¡ã¯ã©ã¹ããããŸãã
abstract class IParent {
static fromConfig(config: ParentConfig): IParent {
// actual code is 20 lines long, not this simple
// this throws "Cannot create an instance of the abstract class 'Parent'"
return new this().applyConfiguration(config);
 }
abstract method1(): void;
...
}
export class FirstChild extends IParent {
specificMethodForFirstChild() {Â ... }
method1() { ... }
...
}
export class SecondChild extends IParent {
specificMethodForSecondChild();
method1() { ... }
...
}
䜿çšæ³ïŒ
let first = FirstChild.fromConfig({ ... });
let second = SecondChild.fromConfig({ ... });
// this runs successfully:
(first as FirstChild).specificMethodForFirstChild();
(second as SecondChild).specificMethodForSecondChild();
ããããã¡ãœããfromConfig()
ã§ããæœè±¡ã¯ã©ã¹ 'Parent'ã®ã€ã³ã¹ã¿ã³ã¹ãäœæã§ããŸããïŒããšããã¡ãã»ãŒãžã衚瀺ãããŸãã
ã³ã³ãã€ã©ãŒã¯ã掟çã¯ã©ã¹ã³ã³ã¹ãã©ã¯ã¿ãŒãããŒã¹ãšåã眲åãæã€ããšã匷å¶ããŸããã èšãæãããšã掟çã¯ã©ã¹ã³ã³ã¹ãã©ã¯ã¿ãŒã¯ãããŒã¹ãããå€ãã®å¿
é åŒæ°ãæã€ããšãã§ããŸãã new this()
ã䜿çšãããšããã¹ãŠã®æŽŸçã³ã³ã¹ãã©ã¯ã¿ãŒã«å¿
èŠãªãã©ã¡ãŒã¿ãŒããªãããšãåæã«
ãããæ£ãããšç¢ºä¿¡ã§ããå Žåã¯ã new (<any>this)(x, y);
ãšããŠãã£ã¹ãããããšãæ€èšããŠãã ãã
è¯ãç¹ç§ã¯ãããèŠãŸããã§ããã ããªãã®ææ¡ã¯å®éã«æ©èœããŸããç§ã¯å±éºãèæ ®ããŸããããããšãã
Module ... was resolved to ..., but '--allowJs' is not set
ãæ²é»ãããæ¹æ³ã¯ãããŸããïŒ ç§ã®ãŠãŒã¹ã±ãŒã¹ã§ã¯ããããåŠçãããã«ãã·ã¹ãã ãããããã¹ãŠã®ã³ãŒããTSCã«æž¡ãå¿
èŠããªãã®ã§ããããã®ãšã©ãŒãé»ãããããšæããŸãã
'ã¢ãžã¥ãŒã« "someModule"ã宣èšããŸã;' .d.tsãã¡ã€ã«ã®1ã€ã«ãããŸãã
ãŸãã¯ãäžèŽãã@typesããã±ãŒãžãååšããå Žåã¯ããããã€ã³ã¹ããŒã«ããŸãã
ããã圹ç«ã€å Žåã®å¥ã®äŸããããŸãã
const Button = (
content: contentTypes,
action: React.EventHandler<React.MouseEvent<HTMLDivElement>>,
disabled: boolean
): JSX.Element => (
<div className={`Button disabled-${disabled}`} onTouchStart='' onClick={ !disabled ? action : undefined } >
{ content }
<div className='background'></div>
</div>
);
onTouchStartã¯ãtrueã®ãã©ã¡ãŒã¿ãŒãšããŠæååãåãå
¥ããªããããããã¯ãšã©ãŒãã¹ããŒããŸãã ãã ãã onTouchStart=''
ãç¹å®ã®cssã«ãŒã«ã«é¢é£ããã¿ããããã€ã¹ã§ã®å£ããcssåäœãä¿®æ£ããŸãã ãã®ãšã©ãŒãã°ããŒãã«ã«ç¡å¹ã«ããããäžéšã®JSXã¿ã€ããåå®çŸ©ãããããããããŸããã ãã®è¡ã ãã§ãã®ãšã©ãŒãåé€ããããšæããŸãã
onTouchStart={<any>''}
ããã¯å®éã«ã¯ãããä¿®æ£ããŸããã
ãã®ãšã©ãŒãçºçããŸãïŒ
tsxæ§æã§å£ããŠããŸã
ãããonTouchStart={'' as any}
ïŒJSXã代æ¿ã¢ãµãŒã·ã§ã³æ§æã䜿çšããããšãå¿ããïŒ
@RyanCavanaughã¯ãçæãããã³ãŒãããã®æ©èœã®æ£åœãªãŠãŒã¹ã±ãŒã¹ãšswagger codegenã䜿çšããŠãããŒããµãŒãã¹çšã®APIã¯ã©ã€ã¢ã³ããäœæããŠããŸãã ãŸãããµãŒããŒã§çæãããã¯ã©ã€ã¢ã³ãã®åã䜿çšããŠããŸããããã¯ãSwaggerå®çŸ©ãTypeScriptã€ã³ã¿ãŒãã§ã€ã¹ã«å€æãããããèªåã®Swaggerå¥çŽãå°éããããã®æãç°¡åãªæ¹æ³ã§ãã
ãã ããçæãããã³ãŒãã¯å°ãå¥åŠã§ã次ã®ãããªãããã¯ããããŸãã
let contentTypeHeader: Dictionary<string>;
if (contentTypeHeader) {
fetchOptions.headers = contentTypeHeader;
}
strictNullChecks
ããªã³ã®å Žåãããã«ãããšã©ãŒãçºçããããããããžã§ã¯ãå
šäœã§ãã©ã°ããªãã«ããŸããã ãªããŠãã£ãã çæãããã¿ã€ãã¹ã¯ãªããã解æããŠå€æŽããããããŸãããããã¡ã€ã«ã®å
é ã«<tsc strictNullChecks=false />
ãããªãã®ãæ¿å
¥ããæºåãã§ããŠããŸãïŒ @alexanderbirdã®ææ¡ãšåæ§ïŒã
ããã¯ãstrictNullChecksæºæ ã®ã³ãŒããçæããããã®Swaggerã³ãŒããžã§ãã¬ãŒã¿ãŒãžã®å€æŽèŠæ±ã§ã¯ãªãã§ããããã
@mhegazy確ãã«-ããããããã¯ãã®ãããªãã®ã®äžäŸã«ãããŸããã TypeScriptã§ã³ãŒãçæã圹ç«ã€æ¹æ³ã¯ãããããããŸãïŒJavaScriptãããïŒã ãããã£ãŠãçæ³çã«ã¯ãçæãããã³ãŒãã®æšæºã«èªåã®ãããžã§ã¯ãããã©ãã°ããããã«äººã ã«åŒ·å¶ããªãæ¹æ³ããããŸãã
ãããããããã¯:)èªåçæããŒã«ããååŸããã³ãŒãã¯ãã³ã³ãã€ã«ã«æµããåã«ãªããŸãã ã³ãŒãçæããŒã«ã--strictNullChecks
ç¡èŠããå Žåãã³ãŒãã¯èª€è§£ãæããªãã¿ã€ããç£èŠããŠããŸãã
ãã§ãã¯ãç¡å¹ã«ããããšã¯ãç«çœèŠå ±åšãæ¶é³ããã ãã§ãã åé¡ã¯èŠå ±ã§ã¯ãªããããããç«çœã®åå ã§ãã
@mhegazyéåžžã«ãããã¹ããããããŒã«ã«ãã£ãŠçæãããã³ãŒãã§ç«çœèŠå ±åšãæ¶é³ããŠã倧äžå€«ã§ãã ã³ãŒãã¯åªããŠãããæå 端ã®èšèªæ©èœã䜿çšããŠããªãã ããªã®ã§ã䜿çšããå¿ èŠã¯ãããŸããã
ããŸãè°è«ã®äœå°ã®ãªãäŸã¯ã©ãã§ããïŒçæãããã³ãŒãã«æªäœ¿çšã®ããŒã«ã«ãããå Žåã¯ã©ããªããŸããïŒ tsconfigã§noUnusedLocals
ããªãã«ããå¿
èŠãããå Žåãé€ããŠãã³ãŒãã«å®³ã¯ãããŸããããããçŸåšè¡ã£ãŠããããšã§ãã
ããŸãè°è«ã®äœå°ã®ãªãäŸã¯ã©ãã§ããïŒçæãããã³ãŒãã«æªäœ¿çšã®ããŒã«ã«ãããå Žåã¯ã©ããªããŸããïŒ ããã¯ç§ã®ã³ãŒãã«å®³ãåãŒãããšã¯ãããŸãã-tsconfigã§noUnusedLocalsããªãã«ããå¿ èŠãããå Žåãé€ããŠ-ããã¯ç§ãä»ããŠããããšã§ãã
çæãããã³ãŒããæ°ã«ããªãå Žåã¯ãã³ã³ãããªã³.d.tsãšãšãã«.jsã«å«ããå¿ èŠããããŸãã ãã®ããã«ããŠãããããã§ãã¯ã§ããŸãããã³ã³ãã€ã«ããå¿ èŠã¯ãããŸããã
typescriptã³ã³ãã€ã©ã¯ãchainã§äœ¿çšãããunderscore.jsããã¯ã¹ã€ã³ã奜ãŸãªãããã§ãã
_.mixinïŒïŒ{sortFuncitonïŒsortFuncïŒïŒãotherChainFuncïŒotherFunctionïŒïŒ}
...ã
someVal = _.chainïŒsomeArrayïŒ
.sortFunctionïŒïŒ
.otherChainFuncïŒïŒ
ã䟡å€ïŒïŒ;
..ã
éåžžã«ç°¡åãªäŸã¯ãã¯ãªãã¯çšã®ãªã¹ããŒãäœæããå Žåã§ããããšãã°ãAngularã®å Žåã¯@HostListener()
ã䜿çšããŠã次ã®ããã«ããŸãã
@HostListener('click', ['$event'])
onClick(event: MouseEvent) {
// Code here...
}
noUnusedLocals
ãæå¹ã«ãããšã次ã®ãšã©ãŒãçºçããŸãã
ERROR in ./src (20,13): 'onClick' is declared but never used.
ã³ã³ãã€ã©ã«ãããç¡èŠãããæ¹æ³ã¯ãããŸããïŒ
@JeremyCarlsten
_.mixin(){sortFunciton: sortFunc(), otherChainFunc: otherFunction()}
ç¡å¹ãªã³ãŒãã®ããã§ãã
@leocaseiroãªããã©ã€ããŒãã«ããå¿
èŠãããã®ã§ããïŒ ãã®å Žåã onClick
ã¯angularãæçµçã«äœ¿çšããã¡ãœããã§ãã ãã³ãã¬ãŒãã§äœ¿çšãããã©ã€ããŒãå€æ°ã宣èšãããšãåæ§ã®åé¡ãåžžã«çºçããŸãã ãã³ãã¬ãŒãã§ãããã䜿çšããå Žåã¯ãå€æ°ãå
¬éããã ãã§ãã Angularã«äœ¿çšãããŠããã®ã§ãããã¯çã«ããªã£ãŠããŸãã
ããã«ã¡ã¯@ jmlopez-rodãããªãã¯æ£ããã§ãã
èå³æ·±ãããšã«ããããªãã¯ãšããŠãããã¯ä»éãå»ã£ãŠããŸãïŒ ç§ã¯æ¬åœã«ããªãã®å©ãã«æè¬ããŸãã
@leocaseiro publicã¯ããã©ã«ãã®å¯èŠæ§ã¬ãã«ã§ãããããæå®ããå¿ èŠã¯ãããŸããã
ãã¬ãã£ãã«èãããå Žåã¯äºåã«ãè©«ã³ããŸãâäœããèŠéããå¯èœæ§ããããŸãïŒTSã®æ°æ©èœïŒã
å¥ã®äŸïŒç§ã¯ES5ãçæããããã«TSã®ã¿ã䜿çšããŠããŸã-ãã£ã¹ãã宣èšãã€ã³ã¿ãŒãã§ãŒã¹ã¯ãããŸããïŒ
// do-as-i-tell-you-start
const factory = () => {
const _this = [];
let _value;
Object.defineProperties(_this, {
// Error: Property 'getset' does not exist on type 'any[]'.
// true at at creation but not when used â don't MOM me!
'method1': { value(){ return _this.getset; } },
// Works with property strings â I don't want this
'method2': { value(){ return _this['getset']; } },
'getset': { get(){ return _value; }, set(value){ _value = value } },
});
return _this;
}
äœææã«ã¯çå®ã§ããã䜿çšæã«ã¯ããã§ã¯ãããŸããâç§ãMOMããªãã§ãã ããïŒ
ããã¯ç¹ã«TypeScriptãè¡ãããã«èšèšãããŠããããšã§ãã ã¿ã€ããšãã£ã¹ãã䜿çšããããªãå ŽåããªãTypeScriptã䜿çšããŠããã®ã§ããïŒ ãã®ã¹ã¬ããã§äœåºŠãææãããŠããããã«ãããã§ãã³ãŒããåºåãããããããã§ã«å±éºã«ãããããŠãããšã©ãŒã¯ç¡èŠããŠãã ããã ãªãTypeScriptããã©ã®ãããªç®çã§åç¶ãšãããããšããã®ã§ããïŒ
ãªãTypeScriptããã©ã®ãããªç®çã§åç¶ãšãããããšããã®ã§ããïŒ
ããã¯ãããŒã ãES5 => ES6ïŒBabelãŸãã¯TSïŒ=> TSããããã¹ãŠã®æ å ã®äžã§ãèµ€ã¡ããã®ã¹ãããã§ç§»åããããšã§ãã
ç§ã®å°è±¡ã§ã¯ãTSã¯JSã«è¿œå ããããã®ã§ãããèªåãã©ã®ã¬ãã«ã«ããã®ããç¥ãããšãã§ããŸãã
ç§ã®äžæºã®çç±ã¯ãæäŸããããããŒã®äŸããšã©ãŒãã¹ããŒãããããã£ãŠ_doesã§ããããã§ã
ES5_ãçæããŸããã IMOãã¹ãªã³ãã£ã³ã°ã¯ãã©ã³ã¹ãã€ã«ã«å¿
é ã§ã¯ãããŸããã
ãšã©ãŒæã«æŸåºããªãéããæŸåºãããŸãã ãããã£ãŠãES5ãçæããŸãã
ããã¯ããŸããã§ããâããã«ã«åãæ¿ããŸããâããã¯æ©èœããŸãã
tsc
ã¯ãã¿ã€ããšã©ãŒã«é¢ä¿ãªãåºåãåºåããããã«æ§æã§ããŸãã noEmitOnError
ãªãã·ã§ã³ã確èªããŠãã ããã
ts-loaderã䜿çšããŠããå Žåã¯ãæ°ããtranspileOnly
ãªãã·ã§ã³ããããåçŽã«ãã©ã³ã¹ãã€ã«ãããšã©ãŒã¯è¡šç€ºãããŸããã
@trusktrããããšã-è©ŠããŠã¿ãŸã:-)
ãšã©ãŒã¯åºåã®çæãããŒã«ããããã¯ã
ããã¯çå®ã§ã¯ãªãã webpackã«ïŒããªãäžè¬çã§ã-ã¹ã¿ãŒã¿ãŒããæ¥ãŠããŸãïŒã»ããã¢ããããããŸãããæ¬çªãã«ãã§ã¯ã¯ã©ãã·ã¥ããäœãåºåããŸããã ãããŠããã¯ãã®ããã§ãªããã°ãªããŸãã-ã³ã³ãã€ã©ã¯ãšã©ãŒãå ±åããããã°ã©ãã¯æ»ã£ãŠããããä¿®æ£ããŸãã ãã«ãããæ©èœããŠãããããã«ããŒã å šäœãã¿ã€ããç¡èŠããã®ã«ããªãã¿ã€ãã䜿çšããã®ã§ããïŒ åæ§ã«ãtscãã³ã³ãã€ã«ã«å€±æããå ŽåãèªåæŽæ°ã¯æ©èœããŸããïŒãã©ã°ã€ã³ã¯æå³çã«ãã®ããã«èšè¿°ãããŠããŸããã³ãŒããééã£ãŠããå ŽåïŒãŸãã¯ã³ã³ãã€ã©ãŒã«ãã£ãŠééã£ãŠãããšèŠãªãããå ŽåïŒã¯æŽæ°ãããŸããïŒã
tscã«ãã°ãããå Žåããšã©ãŒã®æå¶ã圹ç«ã¡ãŸãã ããšãã°ãããã¯ã³ã³ãã€ã«ããå¿ èŠããããŸãïŒ
interface A {
isEmpty(x: any[] | string | object): boolean;
}
const a: A = <A>{};
a.isEmpty({a: 1});
ããããçŸåšã®TSãªãªãŒã¹ã§ã¯å€±æããŸãã
ç·šéïŒé¢æ°åŒã³åºããä¿®æ£ããŸããïŒééã£ãè¡ãã³ããŒããŸããïŒ
ã«
a.isEmptyObjectïŒ{aïŒ1}ïŒ;
ãããããŠ
a.isEmptyïŒ{aïŒ1}ïŒ;
ïŒ
ããããã ééã£ãè¡ãã³ããŒããŸããïŒ/ã
tscã«ãã°ãããå Žåããšã©ãŒã®æå¶ã圹ç«ã¡ãŸãã
æŸåºãé²ããã°ãä¿®æ£ããå¿ èŠããããŸãã ãšã©ãŒãç¡èŠããæ©èœã«ãã£ãŠãtscãã¯ã©ãã·ã¥ãããã°ãããå Žåã«ãçªç¶äœããçºçããå¯èœæ§ã¯ã»ãšãã©ãããŸããã
ç§ã¯æ¬¡ã®ãããªã€ã³ããŒããæã£ãŠããŸãïŒ
import * as reducers from "./**/reducer.ts"
ç§ã¯æåã«TypeScriptã䜿çšãã次ã«Babelã䜿çšããŸãã ã€ã³ããŒãã®*
ãã°ãããã¿ãŒã³ãšããŠæ±ãbabelãã©ã°ã€ã³ããããŸãã TypeScriptã¯.ts
ã«ã€ããŠæå¥ãèšããšã©ãŒãã¹ããŒãã .ts
ãåé€ããããšãã¢ãžã¥ãŒã«ãèŠã€ãããŸããã
ããã解決ããæ¹æ³ã¯ããããããŸããããæåã«èããã®ã¯ããã®è¡ã«é¢é£ãããšã©ãŒãæå¶ããããšã§ããã æ§æã§ã¢ãžã¥ãŒã«ãããã³ã°ãå®è¡ããããšããŸãããã *
ãã¯ã€ã«ãã«ãŒããšããŠæ±ããããšã¹ã±ãŒãã§ããŸããã
ã³ã³ãã€ã©ã®ç¯å²å .d.tsã§@lukescottïŒ
declare module './**/reducer' {
export = {
[reducer: string]: () => void; /* or whatever */
};
}
ãããã©ã®ããã«åœ¹ç«ã€ãã«ã€ããŠã®å¥ã®äŸïŒ
const req = https.request({
host: 'www.google.com',
method:'GET',
path:'/',
port: 443,
}, (res) => {
console.log(res.connection.getPeerCertificate());
});
getPeerCertificate
ã¯ãããŒãhttpsïŒãããïŒã®å®çŸ©ã«
ããã§ãã³ã³ãã€ã«ããã倧ããªèµ€ãäžç·ã§åäœããŸãããããã¯éåžžã«çŽ æŽãããããšã§ã
console.log(res.connection.getPeerCertificate()); //ts:disable-line
@trusktr
ãã£ãšãprodã³ãŒãããå€æããæ§æãå°ç¡ãã«ããããã§ãã ããã§ç§ã説æããããšããŠããäœã®JS plunkã§ãã ãããããã¢ã³ããŒã¹ã³ã¢ã®å®çŸ©ã«é¢ããåé¡ã®ã»ããå€ãã§ãããã ãããããµãŒãããŒãã£ã®ã©ã€ãã©ãªãtsã³ã³ãã€ã©ã§åé¡ãåŒãèµ·ãããŠããå Žåããã®ã³ãŒãè¡ãç¡èŠããããšã¯ã§ããŸãããïŒ
+1ã ããã¯ãäºæããªããã®ã«æž¡ããããšãã«ã³ãŒãããšã©ãŒãã¹ããŒããããšã確èªããå¿ èŠãããããããã¹ãã«åœ¹ç«ã¡ãŸãã
ãã®äŸ¿å©ãªæ©èœã¯ãnullã®å¯èœæ§ã®ãããªããžã§ã¯ãã«å¯Ÿãã!
ã®äžè¬åã§ãã
ã©ã€ãã©ãªãã¡ã€ã«ããããžã§ã¯ãïŒChartjsãªã©ïŒã«åã蟌ã¿ããå Žåã¯ãTSãã¡ã€ã«ãšããŠä¿åãïŒãã¹ãŠã®ãœãŒã¹ãã¡ã€ã«ãTSãšããŠä¿æããJSãšããŠã³ã³ãã€ã«ããã®ã奜ãã§ãïŒãããªãã«ã¹ã©ãã·ã¥åç §ã䜿çšããŠTSã«ã€ã³ããŒãããŸãããããå¿ èŠãšãããã¡ã€ã«ã ãã ããTypeScriptã¯ããã®ãã¡ã€ã«ã®ãšã©ãŒã«ã€ããŠééãªãæå¥ãèšããŸãïŒåœç¶ãTSãšããŠä¿åãããæšæºã®JSãã¡ã€ã«ã«ãããªãããïŒã
ãã ãã以äžãè¿œå ããæ©èœïŒ
ã©ã€ãã©ãªãã¡ã€ã«ã®å
é ã«/*ts-errors-disable*/
ããæåŸã«/*ts-errors-enable*/
ãæå®ãããšãé¢é£æ§ã®ãªããšã©ãŒã®åºåãæžå°ããŸãããéçºè
ã¯ãã¹ãŠã®ãœãŒã¹ãã¡ã€ã«ãTSãšããŠä¿æã§ããŸãã
ãããšãç§ã¯ç©äºãæ ¹æ¬çã«éãããæ¹ã§ããã¹ãã§ããïŒ
@benfrainãŸãã察å¿ããTypeScriptå®çŸ©ãã¡ã€ã«ãååšããå Žåã¯ãããã€ã³ã¹ããŒã«ãããïŒ npm install --save-dev @types/mylibrary
ïŒãã©ã€ãã©ãªã®åå空éã«any
ã¿ã€ãã®ç¬èªã®_.d.ts_ãã¡ã€ã«ãäœæããããšããå§ãããŸãã /ã¡ã€ã³ã¯ã©ã¹ãã¡ãŒã¹ãïŒ
// mylibrary.d.ts
declare module "mylibrary" {
let mylibrary: any;
export = mylibrary;
}
// main.ts
import mylibrary = require("mylibrary");
...
質åããããŸãã æåã«ã³ãŒãããããŠTypeScriptã匷調ããŠãããšã©ãŒïŒ
import {Directive, ElementRef, Input, OnChanges, SimpleChange} from '@angular/core'
@Directive({
selector: '[blankAttr]',
})
export class BlankAttr implements OnChanges {
@Input('blankAttr') private attrName: string // <--- TS Error: unused variable
constructor(private el: ElementRef) {}
public ngOnChanges(changes: {[key: string]: SimpleChange}): void {
const change: any = changes.attrName
const prevValue: any = change.previousValue
if (prevValue) {
this.el.nativeElement.removeAttribute(prevValue)
}
this.el.nativeElement.setAttribute(change.currentValue, '')
}
}
ç§ãæ±ããŠããåé¡ã¯ãå±æ§ã«æååãæž¡ãããšãã§ããããã«ã @Input
ãã³ã¬ãŒã¿ã宣èšããå¿
èŠãããããšã§ãã ããããç§ã¯ãã®æååãå€æŽããããšãã®å€ã ããæ°ã«ããŸãã ãŸããå€æŽã€ãã³ããåŠçãããšãã«ã以åã®å€ãšçŸåšã®å€ãååŸã§ããŸãã
ä»// ts-ignore
ãããããŸããïŒ ãŸãã¯ããããããŸã解決ããå¥ã®æ¹æ³ã¯ãããŸããïŒ
@uglowãªãattrName
ãã©ã€ããŒããªã®ã§ããïŒ ããã¯ãAngularãå€ãååŸã§ããããã«å€æŽããå€æ°ã§ãã ãããã£ãŠãå
¬éããå¿
èŠããããŸãã
@ jmlopez-rodå ¬éã«å€æŽããŸããããåé¡ã¯å€ãããŸããã TSã¯ãããæªäœ¿çšã®å€æ°ã§ãããšèšã£ãŠããŸãã
TS 2.4.1ã䜿çšããŠããŸãããå ¬éããåŸãtypescriptããšã©ãŒã®çºè¡ãåæ¢ããŸãã
åïŒ
åŸïŒ
2.3.3ã䜿çšããŠããŸãã 2.4.1ãè©ŠããŠã¿ãŸãã ããããšãð
ãããå«ããå¿ èŠããããŸãã ç§ã¯ãåäžã®.jsãã¡ã€ã«ãå€ãè¿ãããšãå¯èœã«ããã«ã¹ã¿ã jsãšã³ãžã³ã䜿çšããŠããŸãã äŸã«ã€ããŠã¯ãç§ã®èŠç¹ãåç §ããŠãã ããã ç§ã¯TSã䜿çšããŠ.jsãã¡ã€ã«ãçæããŸããããã¡ããTSã¯ãããèªèããã次ã®ããã«ã¹ããŒããŸãã
A 'return' statement can only be used within a function body.
noUnusedLocals
ãšã©ãŒãæå¶ããå¿
èŠãããæ°ããSO質åïŒ
https://stackoverflow.com/questions/45519476/is-it-a-typescript-antipattern-to-dynamically-call-a-member-function-stored-in-a
@mhegazyç§ã¯ãã®çš®ã®åé¡ã«ããŸããŸãªæ¹æ³ã§ã¶ã€ãããŸããã
ç§ã®çŸåšã®ç¶æ³ïŒãããŒå šäœã宣èšã¢ãŒããæ³å®ããŠããŸãïŒïŒ
Return type of public method from exported class has or is using private name
åºæ¬çã«ãããã§ã®æ ¹æ¬çãªåå ã¯ãåŒãè£
食ã§ããªãããšã§ããããã®æ©èœãå®è£
ããããã«ãã¹ãŠãåé€ããã®ã¯ç¡çã§ãã ãããŸã§ã®éããã®ãšã©ãŒãåçŽã«æå¶ããããšã¯è³¢æã§ãã ãšã©ãŒãæå¶ããããã«ãé¢é£ããTypeScriptã®åé¡ãèŠã€ããŠã // TS-LIMITATION:#9448
ãããªããšãèšãå¿
èŠãããå Žåã¯åé¡ãããŸããããããã¯ããªãã®èŠ³ç¹ããã¯æ°ããç¡æå³ãªåé¡ã倧éã«ãããããšæããŸãã
ãŸã åãäžããæºåãã§ããŠããªãæ¢ç¥ã®åé¡ã«å¯ŸããŠç¹å®ã®ã¿ãŒã²ããæå¶ãè¿œå ããå Žåã§ãåé¡ãããŸãããããããè¿ éã«è¡ãããããŸãå€ãã®èšèšäœæ¥ãè¡ãããªãã£ãå Žåã«éããŸãïŒã¡ã«ããºã ãç¡æå³ã«ãªããŸãïŒwink :)
次ã®ãããªããšããããšãã«ãå°éäžèœã³ãŒããšã©ãŒïŒãå°éäžèœã³ãŒããšã©ãŒãããã§é»ã£ãŠããšæ³šéãä»ããŠåãã§ããŸãïŒãååŸããããããŸããã
if (false){ ...complicated debug code that I dont want to delete/forget... }
ãã®ãããTypeScriptã³ã³ãã€ã©ã«ã¯ããã·ã£ããããŠã³ããŠä»ã®ããŒã«ãå°ç¡ãã«ããªãããšãããªãã·ã§ã³ããŸã ãããŸããã ã³ã¡ã³ããç¹å®ã®ãã¡ã€ã«ãglobã®ã³ã³ãã€ã©ã¹ã€ãããä»ããŠãã®ãªãã·ã§ã³ã䜿çšãããšãéåžžã«äŸ¿å©ã§ãã èªåãªããŒãã倱ããããªãã®ã§ãå€ãããŒãžã§ã³ã®ããŒã«ã䜿çšããããšã«åºå·ããŠããŸãïŒãšã©ãŒãååšããå Žåãæ°ããããŒãžã§ã³ã¯èªåãªããŒãããŸããïŒã ãããã£ãŠããã°ã®ãããªãã·ã§ã³noImplicitAnyããªãã«ãããïŒç§ã¯æ¬åœã«æãã§ããŸãããã¿ã€ããã§ãã¯ã®ããã«TypeScriptã䜿çšããŠãããæé»çã«èš±å¯ãããŠãããšãTypeScriptã¯ããŒãã«ã«ããã»ã©å€ãããããããŸããïŒãå€ãããŒãžã§ã³ã®ããã±ãŒãžã䜿çšããŸãã ã¯ãã WebPackãšAwesomeTypeScriptããŒããŒã®äž¡æ¹ã§ãã°ãå ±åããŸãããã誰ãæ°ã«ããŸããã ãã®åé¡ã¯äœã¶æãã®éç¡èŠãããŠããŸãã TypeScriptããã±ãŒãžãšãŸã£ããåãã ãšæããŸã:-(ã
@polyglotinc if (!!false) {
@RyanCavanaughãããšããã®ããšã«ã€ããŠã¯ã (!true)
æ©èœããŸã...ç§ã¯_ïŒå
ã³ã³ãã€ã©ãŒã©ã€ã¿ãŒãšããŠïŒ_ãå®æ°/ãªãã©ã«ââã«é¢ããŠã³ã³ãã€ã©ãŒã«ãã£ãšä¿¡çšãäžããã®ã§ãããããå¯èœæ§ãšããŠèãããããŸããif (false)
ã«ã€ããŠå¿ãã人ã«ãªããã©ããã¯ããã£ããšæããŸããã if (!true)
ãåãã§ããããšãããããŸãã
@unional SOã®è³ªåã¯ããå°ãæ確ã«æžãããšãã§ããŸããããããããããèµ·ãããããšã©ãŒã«ã€ããŠã³ã³ãã€ã©ãŒã«éç¥ããå¿ èŠãããçç±ã§ãã ãŠãŒã¶ãŒãæå¶ããããšã©ãŒã瀺ããã®ã¹ã¯ãªãŒã³ã·ã§ãããåç §ããŠãã ãã
ã¹ã¯ãªãŒã³ã·ã§ããã§ã¯ããšã©ãŒã1ã€ãããªãããšã«æ³šæããŠãã ããã ããã¯ãã³ã³ãã€ã©ãŒã«ãã£ãŠæ€åºããã1ã€ã®åé¡ããã§ã«ä¿®æ£ããããã§ãã
private keyHandlers = {
'ArrowDown': function ($event: any) {
this.handleArrowDown($event);
},
'ArrowUp': ($event: any) => {
this.handleArrowUp($event);
},
};
ãŠãŒã¶ãŒã¯handleArrow*
ã䜿çšãããŠãããšäž»åŒµããŠããŸãããtypescriptã¯ããã䜿çšãããŠããããšãèªèããŠããŸããã éãtypescriptã§ããæžå¿µãããããã«this
ã§this.handleArrowDown($event);
æ¹æ³æããä»»æã®ç©äœãšããããšãã§ããhandleArrowDown
ã ç¢å°é¢æ°ã䜿çšãããšã this
ãã¯ã©ã¹ã®ã€ã³ã¹ã¿ã³ã¹ã§ããããšããããã handleArrowUp
ã䜿çšãããŠããããšãããããŸãã
å¥ã®ãªãã·ã§ã³ïŒåœã®æåã®ãã©ã¡ãŒã¿ãŒthis
ãŸãã
private keyHandlers = {
'ArrowDown': function (this: SomeComponent, $event: any) {
this.handleArrowDown($event);
},
'ArrowUp': ($event: any) => {
this.handleArrowUp($event);
},
};
@ jmlopez-rodããããšãã ãããã¯è¯ãéžæè¢ã§ãã ç§ã¯ç¹ã«function(this: SomeComponent, ...) {...}
ãœãªã¥ãŒã·ã§ã³ãæãæè»ãªã®ã§ãããã奜ãã§ãã
keyHandlers
ãã¯ã©ã¹ã®äžéšã§ãªãå Žåãç¢å°é¢æ°ã¯æ©èœããŸããã
const keyHandlers = {
'ArrowDown': function (this: SomeComponent, $event) {
this.handleArrowDown($event); // error on accessing private method, filing an issue for it.
},
'ArrowUp': ($event) => { // doesn't work, duh
this.handleArrowUp($event);
}
}
export class SomeComponent {
onKeyDown($event) {
if (typeof keyHandlers[$event.code] === 'function') {
keyHandlers[$event.code]($event);
}
}
private handleArrowDown(_event) {
// ...
}
private handleArrowUp(_event) {
// ...
}
}
äžæ¹ãç¢å°é¢æ°ã¯ãã®ã³ã³ããã¹ãã§æãç°¡åã§ãã
console.log
䜿çšã«é¢ãããšã©ãŒãé²ãããã«ãIE9ã«window.console
ãæåã§èšå®ããããšããŠããŸãã
if (!window.console)
window.console = {};
ããããç§ã¯error TS2540: Cannot assign to 'console' because it is a constant or a read-only property.
ãåãåããŸããããã®ãŠãŒã¹ã±ãŒã¹ã®åé¿çã¯ãããŸããïŒ
@amiraliakbari window
ãany
åãšããŠã¢ãµãŒãã§ããŸããããã«ãããåãã§ãã¯ãå¹æçã«ãªããã¢ãŠãã§ããŸãã
(window as any).console = {};
ããã¯ã console.log
ã°ããŒãã«ã«ãªãŒããŒã©ã€ã/ç¡å¹ã«ããããã«æ©èœããŸãã- Project.logging
ããã®åã«å®çŸ©ãããŠããããšã«æ³šæããŠãã ãã
(window.console as any).___real_log = window.console.log;
window.console.log = function(args) {
if (Project.logging) return (window.console as any).___real_log(args);
return;
};
ããã¯ãéåžžã©ããconsole.log
ã䜿çšã§ãããããã³ãŒãå
šäœã«if
ã¹ããŒãã¡ã³ããé
眮ãããããã¯ããã«ã¯ãªãŒã³console.log
ïŒ19109ã§è¿°ã¹ãããã«ãç¹å®ã®ãšã©ãŒãæå¶ããæ©èœã¯ãŸã ãããŸããã
ïŒ19109ã§è¿°ã¹ãããã«ãç¹å®ã®ãšã©ãŒãæå¶ããæ©èœã¯ãŸã ãããŸããã
ãã®å·ã§æŠèª¬ããåºæ¬çãªã·ããªãªã¯è§£æ±ºããããšæããŸãã ãšã©ãŒçªå·ã䜿çšããŠã°ããŒãã«ãšã©ãŒæå¶ã远跡ããæ°ããåé¡ãäœæã§ããŸãã ãšã©ãŒã³ãŒãã¯è¡šçŸåã«æ¬ ããããããã®ãããªæ¹æ³ã§ã®äœ¿çšã«ã¯æ¶æ¥µçã§ãã
ïŒ19139ãäœæããŸããã
ãã®åœä»€ã¯ãã¡ã€ã«ããšã«ã®ã¿æ©èœããŸãããïŒ ãã©ã«ãäžã§åäœãããããšã¯å¯èœã§ããïŒ
åœä»€ã¯ãäžåºŠã«1è¡ã§æ©èœããããšã«ãªã£ãŠããŸãã ãããžã§ã¯ãã§å€ãã®ã³ã³ãã€ã©ãšã©ãŒãçºçããŠããå Žåã¯ã noImplicitAny
ãªãã®ãŸãŸã«ãããªã©ãããå³å¯ã§ãªãã³ã³ãã€ã©ãªãã·ã§ã³ã䜿çšããå¿
èŠãããããšã確èªã§ããŸãïŒã€ãŸããå€æ°ã¯æé»çã«any
ãŸãã泚éä»ãïŒã äžéšã®ãã¡ã€ã«ãJSã®ãŸãŸã«ããŠã allowJs
ãªã³ã«èšå®ãã checkJs
ãªãã«èšå®ããããšãã§ããŸãã
ãªããã®åé¡ã解決ããã®ã§ããïŒ è§£æ±ºçã¯ãŸã ãããŸããïŒ é©åãªãšã©ãŒæå¶ã®å¯èœæ§ãçµ±åãã代ããã«ããªã2幎éç¡æå³ãªè°è«ãããã®ã§ããïŒ
@ webia1ãŸã éããŠããïŒ19139ã«èå³ããããããããŸããã
ïŒç§ãããããã«ããã®åé¡ã«ééãã人ã«ãšã£ãŠåœ¹ç«ã€ãããããªãã®ã§ãããã«ãã®ã³ã¡ã³ããè¿œå ããŸãïŒ
https://github.com/Microsoft/TypeScript/pull/21602ã«åºããããŸããããããã解決çãããããŸããã
ã³ãŒãã«// @ts-ignore
ãè¿œå ããã ãã§ãïŒãŸãã¯ãæå®ããããšã©ãŒã®ã¿ãç¡èŠããå Žåã¯è¿œå ã// @ts-ignore <some code error>
ã
ããã§TypeScript2.7.2ã䜿çšããŠãã¹ãããŸããããæ©èœããŸãã
ïŒãŸãã¯// @ ts-ç¡èŠãã
æå®ããããšã©ãŒã®ã¿ãç¡èŠããŸãïŒã
@RyanCavanaughããªãã¯æ£ããã§ãïŒ ã³ã¡ã³ããæŽæ°ããŸããã ããããšãïŒ
ãšã©ãŒTS2339ãæå¶ããããã«ããã«å°çããŸããã
document.getElementById('theme-admin').disabled = false; /* tslint:disable */
document.getElementById('theme-member').disabled = true; /* tslint:disable */
æãåèã«ãªãã³ã¡ã³ã
ãã£ã¹ãããã ãã§ãïŒãã£ã¹ãã¯æ£åŒãªçšèªã§ã¯ãããŸããããåãæŠå¿µã§ãïŒ
ããã¯ããªããæ¢ããŠãããã®ã§ããïŒ