TypeScript casting HTMLElement

Question

Does anyone know how to cast in TypeScript   I m trying to do this   var script HTMLScriptElement   document getElementsByName  script   0   alert script type     but it s giving me an error   Cannot convert  Node  to  HTMLScriptElement   Type  Node  is missing property  defer  from type  HTMLScriptElement   elementName  string    gt  NodeList   I can t access the  type  member of the script element unless I cast it to the correct type  but I don t know how to do this  I searched the docs  amp  samples  but I couldn t find anything

User · Answer

var script     lt HTMLScriptElement   gt  lt any gt document getElementsByName id   0

User · Answer

This seems to solve the problem  using the  index  TYPE  array access type  cheers   interface ScriptNodeList extends NodeList        index  number   HTMLScriptElement     var script      lt ScriptNodeList gt document getElementsByName  foo     0

User · Answer

Do not type cast  Never  Use type guards   const e   document getElementsByName  script   0   if    e instanceof HTMLScriptElement      throw new Error  Expected e to be an HTMLScriptElement  was   e  amp  amp  e constructor  amp  amp  e constructor name    e        locally TypeScript now types e as an HTMLScriptElement  same as if you casted it    Let the compiler do the work for you and get errors when your assumptions turn out wrong    It may look overkill in this case  but it will help you a lot if you come back later and change the selector  like adding a class that is missing in the dom  for example

User · Answer

As of TypeScript 0 9 the lib d ts file uses specialized overload signatures that return the correct types for calls to getElementsByTagName   This means you no longer need to use type assertions to change the type      No type assertions needed var script  HTMLScriptElement   document getElementsByTagName  script   0   alert script type

User · Answer

We could type our variable with an explicit return type   const script  HTMLScriptElement   document getElementsByName id  item 0     Or assert as  needed with TSX    const script   document getElementsByName id  item 0  as HTMLScriptElement    Or in simpler cases assert with angle-bracket syntax        A type assertion is like a type cast in other languages  but performs no special checking or restructuring of data  It has no runtime impact  and is used purely by the compiler     Documentation   TypeScript - Basic Types - Type assertions

User · Answer

Just to clarify  this is correct      Cannot convert  NodeList  to  HTMLScriptElement      as a NodeList is not an actual array  e g  it doesn t contain  forEach   slice   push  etc         Thus if it did convert to HTMLScriptElement   in the type system  you d get no type errors if you tried to call Array prototype members on it at compile time  but it would fail at run time

User · Answer

Rather than using a type assertion  type guard  or any to work around the issue  a more elegant solution would be to use generics to indicate the type of element you re selecting  Unfortunately  getElementsByName is not generic  but querySelector and querySelectorAll are   querySelector and querySelectorAll are also far more flexible  and so might be preferable in most cases   If you pass a tag name alone into querySelector or querySelectorAll  it will automatically be typed properly due to the following line in lib dom d ts  querySelector lt K extends keyof HTMLElementTagNameMap gt  selectors  K   HTMLElementTagNameMap K    null   For example  to select the first script tag on the page  as in your question  you can do  const script   document querySelector  script      And that s it - TypeScript can now infer that script is now an HTMLScriptElement  Use querySelector when you need to select a single element  If you need to select multiple elements  use querySelectorAll  For example  document querySelectorAll  script    results in a type of NodeListOf lt HTMLScriptElement gt   If you need a more complicated selector  you can pass a type parameter to indicate the type of the element you re going to select  For example  const ageInput   document querySelector lt HTMLInputElement gt   form input name  quot age quot        results in ageInput being typed as an HTMLInputElement

User · Answer

To end up with    an actual Array object  not a NodeList dressed up as an Array  a list that is guaranteed to only include HTMLElements  not Nodes force-casted to HTMLElements a warm fuzzy feeling to do The Right Thing   Try this   let nodeList   NodeList   document getElementsByTagName  script    let elementList   Array lt HTMLElement gt         if  nodeList        for  let i   0  i  lt  nodeList length  i              let node   Node   nodeList i               Make sure it s really an Element         if  node nodeType    Node ELEMENT NODE                elementList push node as HTMLElement                       Enjoy

User · Answer

Since it s a NodeList  not an Array  you shouldn t really be using brackets or casting to Array  The property way to get the first node is    document getElementsByName id  item 0    You can just cast that    var script    lt HTMLScriptElement gt  document getElementsByName id  item 0    Or  extend NodeList    interface HTMLScriptElementNodeList extends NodeList       item index  number   HTMLScriptElement    var scripts    lt HTMLScriptElementNodeList gt  document getElementsByName  script        script   scripts item 0

User · Answer

TypeScript uses   lt    to surround casts  so the above becomes   var script    lt HTMLScriptElement gt document getElementsByName  script   0     However  unfortunately you cannot do   var script     lt HTMLScriptElement   gt document getElementsByName id   0     You get the error  Cannot convert  NodeList  to  HTMLScriptElement      But you can do       lt HTMLScriptElement   gt  lt any gt document getElementsByName id   0

User · Answer

You always can hack type system using   var script     lt HTMLScriptElement   gt  lt any gt document getElementsByName id   0

User · Answer

I would also recommend the sitepen guides  https   www sitepen com blog 2013 12 31 definitive-guide-to-typescript   see below  and https   www sitepen com blog 2014 08 22 advanced-typescript-concepts-classes-types      TypeScript also allows you to specify different return types when an   exact string is provided as an argument to a function  For example    TypeScript   s ambient declaration for the DOM   s createElement method   looks like this    createElement tagName   a    HTMLAnchorElement  createElement tagName   abbr    HTMLElement  createElement tagName   address    HTMLElement  createElement tagName   area    HTMLAreaElement         etc  createElement tagName  string   HTMLElement       This means  in TypeScript  when you call e g    document createElement  video    TypeScript knows the return value is   an HTMLVideoElement and will be able to ensure you are interacting   correctly with the DOM Video API without any need to type assert

User · Answer

Could be solved in the declaration file  lib d ts  if TypeScript would define HTMLCollection instead of NodeList as a return type    DOM4 also specifies this as the correct return type  but older DOM specifications are less clear    See also http   typescript codeplex com workitem 252

[typescript] TypeScript: casting HTMLElement

Examples related to typescript