Difference between revisions of "Typescript"

From MgmtWiki
Jump to: navigation, search
(Add to ASP.NET project)
(Third-party Library)
 
(10 intermediate revisions by the same user not shown)
Line 13: Line 13:
  
  
==Add to ASP.NET project==
+
==Add to ASP.NET Core project==
 
# Add>New Item>TypeScript JSON Configuration File (Do Not change its name)
 
# Add>New Item>TypeScript JSON Configuration File (Do Not change its name)
 
## in tsconfig.json change target library to a current version, like  "target": "es2015"
 
## in tsconfig.json change target library to a current version, like  "target": "es2015"
 
## and add this line      "outDir": "wwwroot/js"  which will force the output from the ts compilation to that dir
 
## and add this line      "outDir": "wwwroot/js"  which will force the output from the ts compilation to that dir
# Add>New Item> TypeScript File (Name it anything - say add.ts, we assume you are starting with no JS, so call it site.js)
+
# Add>New Item> TypeScript File (Any name will work, say add.ts, we assume you are starting with no existing JS, so we call it site.js)
## Since we used an existing file this is already in the _Layout.cshtml      <script src="~/js/site.js" asp-append-version="true"></script>
+
## Since we used an existing file, this line is already in the _Layout.cshtml      <script src="~/js/site.js" asp-append-version="true"></script>
 +
===Third-party Library===
 +
* [https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019 Create an ASP.NET Core app with TypeScript in Visual Studio] 2021-10-06
 +
* Since Typescript is an object oriented language, it needs to know how to import the library objects as a part of the IDE in VS.
 +
* You can use [https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/ Library Manager] or yarn as well as npm to install client-side JavaScript and CSS files.
 +
* Assuming the choice is npm, then node needs to be installed on the device even though it is not needed for the final package for the browser.
 +
** Add > New Item, Choose the npm Configuration File (this will create package.json.
 +
** Include any needed npm packages in the dependencies or devDependencies section of package.json.
 +
** IntelliSense in package.json helps you select a particular version of an npm package.
 +
* It seems most JavaScript libraries relie on package managers like request, which can be loaded on a web page, but only with major changes to the page.
  
 
==References==
 
==References==

Latest revision as of 14:17, 7 November 2021

Full Title or Meme

A superscript of JavaScript that adds strong typing and other aids for good programming practice.

Context

JavaScript was becoming more than just a scripting language in 2019 with object-oriented features like asynchronous calls but without strong typing or other features of monder programming languages. since it seemed unlikely that strong typing would ever be included in javascript, typescript was created to add other features that supported good programming practices.


Examples


Add to ASP.NET Core project

  1. Add>New Item>TypeScript JSON Configuration File (Do Not change its name)
    1. in tsconfig.json change target library to a current version, like "target": "es2015"
    2. and add this line "outDir": "wwwroot/js" which will force the output from the ts compilation to that dir
  2. Add>New Item> TypeScript File (Any name will work, say add.ts, we assume you are starting with no existing JS, so we call it site.js)
    1. Since we used an existing file, this line is already in the _Layout.cshtml <script src="~/js/site.js" asp-append-version="true"></script>

Third-party Library

  • Create an ASP.NET Core app with TypeScript in Visual Studio 2021-10-06
  • Since Typescript is an object oriented language, it needs to know how to import the library objects as a part of the IDE in VS.
  • You can use Library Manager or yarn as well as npm to install client-side JavaScript and CSS files.
  • Assuming the choice is npm, then node needs to be installed on the device even though it is not needed for the final package for the browser.
    • Add > New Item, Choose the npm Configuration File (this will create package.json.
    • Include any needed npm packages in the dependencies or devDependencies section of package.json.
    • IntelliSense in package.json helps you select a particular version of an npm package.
  • It seems most JavaScript libraries relie on package managers like request, which can be loaded on a web page, but only with major changes to the page.

References