Getting Started With TypeScript
Written by Mike James   
Thursday, 12 April 2018
Article Index
Getting Started With TypeScript
The Type System
Interface Inheritance

Interface Inheritance

It is well known that you can arrange for inheritance using classes. You can do the same thing with interfaces:

For example

interface myDerivedInterface
                extends myInterface {
    j: number;
}

Now myDerivedInterface is a type that includes all of the methods and properties of myInterface. Objects of type myDerivedInterface can be used in place of objects of type myInterface.

For example:

var test: myDerivedInterface = {
        i: 0,
        myFunction:
        function (x: number) {
           do something},
        j: 1
    };

and you can assign test to a variable of type myInterface

var test2:myInterface = test;

Following this you can't access test2.j as this is not a member of myInterface.

If you are familiar with the ideas of base and derived type is is all very obvious. However notice that type in this case is defined as the collection of methods and properties that an object actually has at any given point in the program.

For example

var test: myInterface = {
        i: 0,
        myFunction: function (x: number) {
           do something },
        j:0
      };

defines an object that has more than is needed to be a myInterface type. However as test is of type myInterface you can't access j which isn't part of the interface. You can't even assign test to test2 as in:

var test2:myDerivedInterface = test;

because the assignment takes account of the declared types. However, you can use a type assertion, which works very much like a cast in C++ and C#, to force the assignment:

var test2:myDerivedInterface =
             <myDerivedInterface> test;

and now you can get at property j.

Type Libraries

At this point you are probably thinking that types are great, but you have to put in a lot of work if you want to use types with HTML elements and the DOM. The good news is that there are a lot of predefined types included in with the system. There are types for all of the DOM elements and a great many for CSS and other objects. This makes the whole typing system much more useful than it would be if you really did have to start from scratch.

Conclusion

After using TypeScript I quite like some of its type features, but mainly because of how it improves the intellisense prompting. What I find confusing is the closeness to JavaScript. It is too close to get me away from thinking about what is going on behind the scenes.

The type system does catch errors at compile time but they are mostly trivial errors that are easy to find. The overhead of having to jump though hoops to be able to do something doesn't really seem worth it. Better spend the time on writing tests.

My verdict is that the type system doesn't quite give me enough of an advantage over native JavaScript - but perhaps this is because I have learned to work without a type system and a type hierarchy and I like this more flexible approach.  

A Programmers Guide To Languages

languagecover

Contents

  1. Octave
  2. Scratch 3 *revised
  3. Node.js *revised
  4. App Inventor 2 *revised
  5. Getting Started With .NET IL
  6. NetLogo *revised
  7. Small Basic  *revised
  8. TypeScript *revised
  9. Google Apps Script
  10. Guide to F#
  11. Python
  12. Google's Go
    1. A Programmer's Guide To Go With Visual Studio Code *revised
    2. A Programmer's Guide To Go Part 2 - Objects And Interfaces *revised
    3. A Programmer's Guide To Go Part 3 - Goroutines And Concurrency *revised
  13. Guide to F#
  14. The Prolog Way ***NEW!
  15. Ruby
    1. Object-Oriented Approach
    2.    A Functional Language

Useful Links

https://www.typescriptlang.org/index.html

If you want to try out an in-browser version visit: Playground

Related Articles

TypeScript Adds Conditional Types

TypeScript 2.7 Improves Type Inference

TypeScript 2.5 Adds Optional Catch Binding

TypeScript 2.4 Adds Dynamic Import Expressions  

TypeScript 2.3 Released

TypeScript 2.2 Adds More Code Actions

TypeScript - Microsoft's Replacement For JavaScript

 typescriptlogo

 

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

espbook

 

Comments




or email your comment to: comments@i-programmer.info

 

 



Last Updated ( Thursday, 12 April 2018 )