TypeScript

TypeScript

TypeScript is a language, similar to JavaScript, but with data type declarations. When you compile this code, the resultant product is JavaScript.

Introduction**

After reading around it seems like getting TypeScript integrated into your existing project is rather tricky. But it also appears that this was fixed in visual studio 2015 (sp 3 and higher) ‘as long as you use Add > TypeScript to add the file to your project.

For me I have a process. (2015)

  1. Use Add > TypeScript file to create a typescript file. I have this the same name as my .aspx filename. (for example if my file is app_add.aspx then I will have created a file named app_add.ts)
  2. I move the javascript currently embedded in my .aspx file into the TypeScript file created in step 1.
  3. In the .aspx file add an include statement to hook the resultant file into my page. (for example )

When I run the code, it automatically builds the .js file

For me I have a process. (2023)

These days, I use a framework tied to TypeScript itself. In my case my UI is coded in TypeScript using Angular. In hindsight I feel like the code is less monolithic.

JQuery (2015)

Some of my code had JQuery in it, this code produced a lot of compile errors. Apparently this is common, using other libraries does this a lot. I found a file out there called jquery.d.ts - apparently this is a definition file that the compiler uses to confirm the query syntax. I downloaded this file and put it into my Scripts folder. Then I placed a command similar to the following on the top of the .ts file

1
/// <reference path ="./Scripts/jquery.d.ts"/>

JQuery (2023)

These days, I do not code in JQuery when I’m using TypeScript. Basically because the instructor brought in to train my team discurraged this. Angular includes much of the same services provided by JQuery

Variable Declaration

When you start declaring variable types, it will sometimes start you on a path that you don’t expect. For example the following line:

1
var path = $('#TextBox_Path').val();

It would seem an obvious thing to do with this line would be to turn it into a string.

1
var path: string = $('#TextBox_Path').val();

But this gives you a message something like: Argument of type ‘string | number | string[]’ is not assignable to parameter of type ‘string’. The reason is because val returns
an array of characters. to fix that you could cast this as a string

1
var path: string = ($('#TextBox_Path').val() as string);

Typescript Language

  • [[AndAlso]] - A VB command which does not execute the next condition unless the first one is active. What are typescript equivalents?
  • [[InLineExpressions]] - an inline expression is an if statement in the middle of another statement.
  • [[Undefined]] data type

Issues

  • [[JQuery]] - TypeScript allows you to assemble TypeDef files. This had to be done to get JQuery code to compile in TypeScript.
  • [[Textbox]] notes
  • [[Updates]] - Updating your project to run later versions of TypeScript.
  • [[Variables]]

Code Samples

  • [[Capitalize]] - a function to capitalize your strings

#References

  • TypeScript - https://www.typescriptlang.org/ - this is the home page for typescript. It has pretty good documentation.

  • Caleb Williams, Aug 8, 2020, https://css-tricks.com/typescript-minus-typescript/ - This is an interesting article. The scenario is you like the typechecking offered by TypeScript but for one reason or another you cant use it, Rather you still code in JavaScript. This article gives you a way of adding syntax checking to Javascript. You still install typescript, and you install JSDoc, then you use JSDoc to provide code validation.