1 element interfaces
2 tag
3 ast
4 category
5 item
6 title Simple interface
7 expected
8 + interface LabelledValue {
9 + label: string;
10 + }
11 ittf
12 :interface LabelledValue
13 :p label
14 :string
15 item
16 title Reference to interface
17 expected
18 + function printLabel(labelledObj: LabelledValue) {
19 + console.log(labelledObj.label);
20 + }
21 + let myObj = { size: 10, label: "Size 10 Object" };
22 + printLabel(myObj);
23 ittf
24 +
25 function printLabel
26 param labelledObj
27 :ref LabelledValue
28 _ console.log(labelledObj.label)
29 let myObj
30 {
31 @ size 10
32 @ label "Size 10 Object"
33 _ printLabel(myObj)
34 item
35 title Optional properties
36 expected
37 + interface SquareConfig {
38 + color?: string;
39 + width?: number;
40 + }
41 ittf
42 :interface SquareConfig
43 :p color
44 :optional
45 :string
46 :p width
47 :optional
48 :number
49 item
50 title Optional properties 2
51 expected
52 + interface SquareConfig {
53 + color?: string;
54 + width?: number;
55 + }
56 + function createSquare(config: SquareConfig): { color: string; area: number } {
57 + let newSquare = { color: "white", area: 100 };
58 + if (config.clor) {
59 + // Error: Property 'clor' does not exist on type 'SquareConfig'
60 + newSquare.color = config.clor;
61 + }
62 + if (config.width) {
63 + newSquare.area = config.width * config.width;
64 + }
65 + return newSquare;
66 + }
67 + let mySquare = createSquare({ color: "black" });
68 ittf
69 +
70 :interface SquareConfig
71 :p color
72 :optional
73 :string
74 :p width
75 :optional
76 :number
77 function createSquare
78 param config
79 :ref SquareConfig
80 :return
81 :{
82 :p color
83 :string
84 :p area
85 :number
86 let newSquare
87 {
88 @ color "white"
89 @ area 100
90 if config.clor
91 # Error: Property 'clor' does not exist on type 'SquareConfig'
92 set newSquare.color = config.clor
93 if config.width
94 set newSquare.area = config.width * config.width
95 return newSquare
96 let mySquare
97 _ createSquare
98 {
99 @ color "black"
100 item
101 title Readonly properties
102 expected
103 + interface Point {
104 + readonly x: number;
105 + readonly y: number;
106 + }
107 + // You can construct a Point by assigning an object literal.After the assignment, x and y can’t be changed.
108 + let p1: Point = { x: 10, y: 20 };
109 + p1.x = 5; // error!
110 ittf
111 +
112 :interface Point
113 :p x
114 :number
115 :p y
116 :number
117 # You can construct a Point by assigning an object literal.After the assignment, x and y can’t be changed.
118 let p1
119 :ref Point
120 {
121 @ x 10
122 @ y 20
123 # error!
124 set p1.x = 5
125 item
126 title Readonly vs const
127 expected
128 + interface SquareConfig {
129 + color?: string;
130 + width?: number;
131 + }
132 + function createSquare(config: SquareConfig): { color: string; area: number } {
133 + // ...
134 + }
135 + let mySquare = createSquare({ colour: "red", width: 100 });
136 ittf
137 +
138 :interface SquareConfig
139 :p color
140 :optional
141 :string
142 :p width
143 :optional
144 :number
145 function createSquare
146 param config
147 :ref SquareConfig
148 :return
149 :{
150 :p color
151 :string
152 :p area
153 :number
154 let mySquare
155 _ createSquare
156 {
157 @ colour "red"
158 @ width 100
159 item
160 title Call signature
161 expected
162 + interface SearchFunc {
163 + (source: string, subString: string): boolean;
164 + }
165 + let mySearch: SearchFunc;
166 + mySearch = function (source: string, subString: string) {
167 + let result = source.search(subString);
168 + return result > -1;
169 + }
170 ittf
171 +
172 :interface SearchFunc
173 :call
174 :boolean
175 param source
176 :string
177 param subString
178 :string
179 let mySearch
180 :ref SearchFunc
181 set mySearch =
182 function
183 param source
184 :string
185 param subString
186 :string
187 let result = source.search(subString)
188 return result > -1
189 item
190 title Index signature
191 expected
192 + interface StringArray {
193 + [index: number]: string;
194 + }
195 + let myArray: StringArray;
196 + myArray = ["Bob", "Fred"];
197 + let myStr: string = myArray[0];
198 ittf
199 +
200 :interface StringArray
201 :index
202 :string
203 param index
204 :number
205 let myArray
206 :ref StringArray
207 set myArray =
208 [
209 @ "Bob"
210 @ "Fred"
211 let myStr
212 :string
213 := myArray[0]
214 item
215 title Index signature 2
216 expected
217 + class Animal {
218 + name: string;
219 + }
220 + class Dog extends Animal {
221 + breed: string;
222 + }
223 + // Error: indexing with a numeric string might get you a completely separate type of Animal!
224 + interface NotOkay {
225 + [x: number]: Animal;
226 + [x: string]: Dog;
227 + }
228 ittf
229 +
230 class Animal
231 p name
232 :string
233 class Dog
234 super Animal
235 p breed
236 :string
237 :interface NotOkay
238 :index
239 :ref Animal
240 param x
241 :number
242 :index
243 :ref Dog
244 param x
245 :string
246 item
247 title Index signature 3
248 expected
249 + interface NumberDictionary {
250 + [index: string]: number;
251 + length: number; // ok, length is a number
252 + name: string; // error, the type of 'name' is not a subtype of the indexer
253 + }
254 ittf
255 :interface NumberDictionary
256 :index
257 :number
258 param index
259 :string
260 :p length
261 :number
262 :p name
263 :string
264 item
265 title Readonly index signature 3
266 expected
267 + interface ReadonlyStringArray {
268 + readonly [index: number]: string;
269 + }
270 + let myArray: ReadonlyStringArray = ["Alice", "Bob"];
271 + myArray[2] = "Mallory"; // error!
272 ittf
273 +
274 :interface ReadonlyStringArray
275 :index
276 :string
277 :readonly
278 param index
279 :number
280 let myArray
281 :ref ReadonlyStringArray
282 [
283 @ "Alice"
284 @ "Bob"
285 set myArray[2] = "Mallory"
286 item
287 title Class Types
288 expected
289 + interface ClockInterface {
290 + currentTime: Date;
291 + }
292 + class Clock implements ClockInterface {
293 + currentTime: Date;
294 + constructor(h: number, m: number) { }
295 + }
296 + interface ClockInterface {
297 + currentTime: Date;
298 + setTime(d: Date);
299 + }
300 + class Clock implements ClockInterface {
301 + currentTime: Date;
302 + setTime(d: Date) {
303 + this.currentTime = d;
304 + }
305 + constructor(h: number, m: number) {}
306 + }
307 ittf
308 +
309 :interface ClockInterface
310 :p currentTime
311 :ref Date
312 class Clock
313 :implements ClockInterface
314 p currentTime
315 :ref Date
316 ctor
317 param h
318 :number
319 param m
320 :number
321 :interface ClockInterface
322 :p currentTime
323 :ref Date
324 :m setTime
325 param d
326 :ref Date
327 class Clock
328 :extends ClockInterface
329 p currentTime
330 :ref Date
331 m setTime
332 param d
333 :ref Date
334 set this.currentTime = d
335 ctor
336 param h
337 :number
338 param m
339 :number
340 item
341 title static and instance sides of classes - fails
342 expected
343 + interface ClockConstructor {
344 + new (hour: number, minute: number);
345 + }
346 + // Error. Since the constructor sits in the static side, it is not included in this check.
347 + class Clock implements ClockConstructor {
348 + currentTime: Date;
349 + constructor(h: number, m: number) { }
350 + }
351 ittf
352 +
353 :interface ClockConstructor
354 :new
355 param hour
356 :number
357 param minute
358 :number
359 class Clock
360 :implements ClockConstructor
361 p currentTime
362 :ref Date
363 ctor
364 param h
365 :number
366 param m
367 :number
368 item
369 title static and instance sides of classes - succeds
370 expected
371 + interface ClockConstructor {
372 + new (hour: number, minute: number): ClockInterface;
373 + }
374 + interface ClockInterface {
375 + tick();
376 + }
377 + // Because createClock’s first parameter is of type ClockConstructor, in createClock(AnalogClock, 7, 32),
378 + // it checks that AnalogClock has the correct constructor signature.
379 + function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
380 + return new ctor(hour, minute);
381 + }
382 + class DigitalClock implements ClockInterface {
383 + constructor(h: number, m: number) {}
384 + tick() {
385 + console.log("beep beep");
386 + }
387 + }
388 + class AnalogClock implements ClockInterface {
389 + constructor(h: number, m: number) { }
390 + tick() {
391 + console.log("tick tock");
392 + }
393 + }
394 + let digital = createClock(DigitalClock, 12, 17);
395 + let analog = createClock(AnalogClock, 7, 32);
396 ittf
397 +
398 :interface ClockConstructor
399 :new
400 :ref ClockInterface
401 param hour
402 :number
403 param minute
404 :number
405 :interface ClockInterface
406 :m tick
407 function createClock
408 param ctor
409 :ref ClockConstructor
410 param hour
411 :number
412 param minute
413 :number
414 :return
415 :ref ClockInterface
416 return new ctor(hour, minute)
417 class DigitalClock
418 :implements ClockInterface
419 ctor
420 param h
421 :number
422 param m
423 :number
424 m tick
425 _ console.log("beep beep")
426 class AnalogClock
427 :implements ClockInterface
428 ctor
429 param h
430 :number
431 param m
432 :number
433 m tick
434 _ console.log("tick tock")
435 let digital = createClock(DigitalClock, 12, 17)
436 let analog = createClock(AnalogClock, 7, 32)
437 item
438 title Extending Interfaces 1
439 expected
440 + interface Shape {
441 + color: string;
442 + }
443 + interface Square extends Shape {
444 + sideLength: number;
445 + }
446 + let square = {} as Square;
447 + square.color = "blue";
448 + square.sideLength = 10;
449 ittf
450 +
451 :interface Shape
452 :p color
453 :string
454 :interface Square
455 :extends Shape
456 :p sideLength
457 :number
458 let square
459 {
460 :as
461 :ref Square
462 set square.color = "blue"
463 set square.sideLength = 10
464 item
465 title Extending Interfaces 2
466 expected
467 + interface Shape {
468 + color: string;
469 + }
470 + interface PenStroke {
471 + penWidth: number;
472 + }
473 + interface Square extends Shape, PenStroke {
474 + sideLength: number;
475 + }
476 + let square = {} as Square;
477 + square.color = "blue";
478 + square.sideLength = 10;
479 + square.penWidth = 5.0;
480 ittf
481 +
482 :interface Shape
483 :p color
484 :string
485 :interface PenStroke
486 :p penWidth
487 :number
488 :interface Square
489 :extends Shape
490 :extends PenStroke
491 :p sideLength
492 :number
493 let square
494 {
495 :as
496 :ref Square
497 set square.color = "blue"
498 set square.sideLength = 10
499 set square.penWidth = 5
500 item
501 title Hybrid Types
502 expected
503 + interface Counter {
504 + (start: number): string;
505 + interval: number;
506 + reset(): void;
507 + }
508 + function getCounter(): Counter {
509 + let counter = function (start: number) { } as Counter;
510 + counter.interval = 123;
511 + counter.reset = function () { };
512 + return counter;
513 + }
514 ittf
515 +
516 :interface Counter
517 :call
518 :string
519 param start
520 :number
521 :p interval
522 :number
523 :m reset
524 :void
525 function getCounter
526 :return
527 :ref Counter
528 let counter
529 :as
530 :ref Counter
531 function
532 param start
533 :number
534 set counter.interval = 123
535 set counter.reset =
536 function
537 return counter
538 let c = getCounter()
539 _ c(10)
540 _ c.reset
541 set c.interval = 5
542 item
543 title Class with private property
544 expected
545 + class Control {
546 + private state: any;
547 + }
548 ittf
549 class Control
550 p state
551 :private
552 :any
553 item
554 title Interface extending class
555 expected
556 + interface SelectableControl extends Control {
557 + select(): void;
558 + }
559 ittf
560 :interface SelectableControl
561 :extends Control
562 :m select
563 :void
564 item
565 title Derived class extending interface
566 expected
567 + class Button extends Control implements SelectableControl {
568 + select() {}
569 + }
570 ittf
571 class Button
572 super Control
573 :implements SelectableControl
574 m select
575 item
576 title Derived class
577 expected
578 + class TextBox extends Control {
579 + select() {}
580 + }
581 ittf
582 class TextBox
583 super Control
584 m select
585 item
586 title Class extending interface
587 expected
588 + // Error: Property 'state' is missing in type 'Image'.
589 + class Image implements SelectableControl {
590 + select() {}
591 + }
592 ittf
593 class Image
594 :implements SelectableControl
595 m select