JavaScript Libraries In A TypeScript Application, Revisited

If you haven’t already gotten involved with it, you’ll probably know that TypeScript is becoming increasingly popular. Being able to use a superset of javascript in a typed language that compiles down to JavaScript is a great thing. However,if you’ve ever played around with TypeScript and tried to use JavaScript libraries, you’ll probably know that sometimes it can be a real pain. Often JavaScript libraries do not ship with type definitions which are critical when it comes to playing nice with TypeScript.

If you’ve been keeping up with The Polyglot Developer you’ll probably remember two posts that were created. Previously I had written about including external JavaScript libraries in an Angular application as well as adding type definitions to external JavaScript libraries in TypeScript .

We’re going to revisit these two articles and explore all the ways to include JavaScript libraries in TypeScript applications. These include applications built with NativeScript , Ionic , and Angular .

We’re going to use a particular JavaScript library for the examples used throughout this particular article. This library is called base-64 and will handle base64 encoding and decoding without having to worry about atob and btoa . You have to remember that this library is a JavaScript library and was not built with TypeScript in mind.

Several different project examples will be created in an effort to keep things easy to understand.

Create a New Vanilla TypeScript Project

Thefirst project we create will use vanilla TypeScript and will be ran through Node.js. This means we won’t be using Angular, HTML, or anything else. We will create a TypeScript file, compile it, and run it via Node.js.

Create a new project directory and execute the following commands:

npminit --y tsc --init

The above two commands should leave us with a package.json file as well as a tsconfig.json file. The next step is to add the libraries we wish to use via the Node Package Manager (NPM):

npminstallbase-64 utf8 --save

The above command will add the base-64 library and its utf8 dependency. As of right now we have a few JavaScript dependencies and our project, but no source code to our application.

Create and open an app.ts file and add the following TypeScript code:

import * as base64from "base-64"; import * as utf8from "utf8"; var str = "nicraboy"; var bytes = utf8.encode(str); var encodedStr = base64.encode(bytes); console.log(encodedStr);

The above code was taken from the library documentation. However, if you try to compile this file by executing tsc , you’ll end up with errors that look like the following:

app.ts(1,25): error TS2307: Cannot find module ‘base-64‘. app.ts(2,23): error TS2307: Cannot find module ‘utf8‘.

The above is not something we want to see. So what if we altered the library imports to look like the following instead?:

var base64 = require("base-64"); var utf8 = require("utf8");

The above lines are what you’d typically see in a JavaScript application, not necessarily a TypeScript application. When we try to compile our application with the require statements, we end up with the following messages:

app.ts(1,14): error TS2304: Cannot find name ‘require‘. app.ts(2,12): error TS2304: Cannot find name ‘require‘.

The above lines are different errors, but still errors nonetheless. This is because the require function is a JavaScript thing, not a TypeScript thing.

So what do we do if we want to resolve these errors and use our library?

One solution would be to download type definitions for each of our libraries if they exist. An example of this would look like the following:

npminstall @types/base-64 @types/utf8 --save

If we download the type definitions we can continue to use the import statements that we saw previously. Execute the tsc command and it should compile without issues. You can test the project by executing the following:

nodeapp.js

However, what happens if the type definitions don’t exist or what if we’d like to use the require commands instead? We can actually obtain the type definitions for the require command so it becomes TypeScript compatible.

Install the following type definitions to use the require command:

npminstall @types/node --save

With the node type definitions we can use any JavaScript library in our TypeScript project without needing to find the relevant type definition files.

Using a Browser JavaScript Library in a TypeScript Project

If you’re developing web applications, you might run into a situation where you include a JavaScript library via a <script> tag that doesn’t play nice in your TypeScript code.

Let’s create a new project somewhere on our computer. We’re not going to create a Node.js project, but we will need to handle TypeScript. Execute the following:

tsc --init

We’ll also need an app.ts and an index.html file in our project. Finally, since this a browser based project, we need to download the base-64 library and utf8 library. This should leave you with a base64.js and utf8.js file in your project.

时间: 2024-10-05 05:00:07

JavaScript Libraries In A TypeScript Application, Revisited的相关文章

10+ Useful Javascript Libraries for Your New Proje

JavaScript Library is basically a pre-written scripting language that ease the development of JavaScript based applications such as AJAX and other web-centric technologies.These JavaScript libraries are often called JavaScript frameworks.Popular Java

OWASP(Open Web Application Security Project) Top 10 for JavaScript

Injection Injection flaws, such as SQL, OS, and LDAP injection, occur when untrusted data is sent to an interpreter as part of a command or query. The attacker's hostile data can trick the interpreter into executing unintended commands or accessing u

TypeScript入门指南(JavaScript的超集)

TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口.TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的. 为什么会有 TypeScript? JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeSc

使用TypeScript如何提升JavaScript编程效果?

TypeScript是个什么鬼?和JavaScript有什么关系? TypeScript是由微软开发的一种可快速入门的开源的编程语言,是JavaScript的一个超集,且向这个语言添加了可选的静态类型和基于类的面向对象编程.能够帮助web前端开发人员编出更出色的JavaScript代码.搞定规模可观的JavaScript项目并为ECMAScript 6的来临做好准备. JavaScript是一款通用脚本语言,植根于开发工具的核心深处,同时在Node.js等服务器端实现方案中也有所体现.除此之外,

TypeScript VS JavaScript 深度对比

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开发语言时,又该如何抉择呢? 本文将会深入对比这两种语言,讨论两种语言之间的关联和差异,并概述两种语言各自的优势. JavaScript 和 TypeScript 的概要介绍 JavaScript JavaScript 是一种轻量级的解释性脚本语言,可嵌

Typescript 和 Javascript之间的区别

TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集,但是 TypeScript 与 JavaScript 之间又有什么样的区别呢?在选择开发语言时,又该如何抉择呢? 本文将会深入对比这两种语言,讨论两种语言之间的关联和差异,并概述两种语言各自的优势. JavaScript 和 TypeScript 的概要介绍 JavaScript JavaScript 是一种轻量级的解释性脚本语言,可嵌

Typescript 和 Javascript之间OA信用盘平台出租的区别

JavaScript 和 TypeScript 的概要介绍JavaScript 是一种轻量级的解释性脚本语言OA信用盘平台出租QQ2952777280[话仙源码论坛]hxforum.com[木瓜源码论坛]papayabbs.com,可嵌入到 HTML 页面中,在浏览器端执行,能够实现浏览器端丰富的交互功能,为用户带来流畅多样的用户体验. JavaScript 是基于对象和事件驱动的,无需特定的语言环境,只需在支持的浏览器上就能运行. JavaScript 语言具有以下特点: JavaScript

TypeScript -- JavaScript的救赎

TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. 那先来看看TypeScript是如何解决这两个问题的. 一. 编译时的强类型 TypeScript设计了一套类型机制来保证编译时的强类型判断. 最简单的,你可以申明变量的类型,那么任何其他类型的赋值将会引起编译错误. 例如 var foo: string; foo = true; //error

简单理解JavaScript,TypeScript和JSX

JavaScript: 基本概念: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于浏览器客户端的脚本语言. 组成部分 ECMAScript,描述了该语言的语法和基本对象.文档对象模型(DOM),描述处理网页内容的方法和接口. 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口.基本特点JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添