• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript入门和简单案例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

转自:https://blog.csdn.net/weixin_40326107/article/details/81626873

简单介绍
       TypeScript,和C#一样是微软搞出来的,是一个微软开发的自由的、开源的编程语言,而且都是大牛Anders Hejlsberg领导开发的。它是JavaScript的一个超集,本质上是向js语言添加了可选的静态类型和基于类的面向对象编程,并不是vue或者某个前端框架特有的工具。

       我们知道,js是弱类型语言,没有命名空间,在开发大型的前端项目的时候,一度成为制约其模块化编程的一个重要因素。

1.1 简单的案例说明

1.安装TypeScript

      一般安装TS的方式有两种,分别是:npm的包管理方式和安装TS的Visual Studio插件两种方式

      这里使用的是npm的方式:

npm install -g typescript

2.创建一个html文件运行生成的js文件

      这里我们可以看到,我们使用greeter.js来实现显示

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

3.创建一个ts(TypeScript)文件

在文件中写入如下代码

function greeter(person) {
    return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.innerHTML = greeter(user)

4.编译代码:

      这里使用的是.ts扩展名,但是其中的代码是纯粹的js代码,这个代码可以被替换为你正在使用的任何其他js代码

      在命令行中,运行TypeScript编辑器:

tsc greeter.ts

编译完成后会在当前目录下生成一个相应的js文件:

5.执行

编译结果将是一个greeter.ts包涵你所输入的相同的js文件,我们在javaScript应用程序中使用TS启动并执行。

6.以typescript语法写.ts文件

      6.1

现在,我们使用TypeScript提供的新工具,:String 在person函数参数中添加一个类型的注解,如下所示:

function greeter(person: string) {
    return "Hello, " + person;
}
 
let user = "Jane User";
 
document.body.innerHTML = greeter(user);

查看html页面我们会看到,与之前的测试结果并没有变化。

输入与类型注解不符的实参

      TypeScript中的类型注释是记录函数或者变量的预期契约的轻量级方法,在这种情况下,我们使用单子字符串参数调用greeter函数,我们可以尝试更改call greeter来传递一个数组:

function greeter(person: string) {
    return "Hello, " + person;
}
 
let user = [0, 1, 2];
 
document.body.innerHTML = greeter(user);

在终端中重新编译时,可以看到如下的告警:

很明显。这里的参数的类型有了String的验证,只允许传入string类型的数据

       同样,尝试删除greeter调用的所有参数,TypeScript会通知您已使用意外数量的参数调用此函数,在这两种情况下,ts都可以根据代码结构和你提供的类型注释提供静态的分析。

       请注意,虽然存在错误,但是greeter.js文件还是会被创建,即使代码中存在错误,也可以使用TypeScript。但是这种情况下会报警代码可能无法按期运行。

       如上面的的错误已经发生,但是我们运行html文件,发现还是会被正常使用:

6.2接口

      我们可以使用接口来描述有firstName和lastName字段对象,在TypeScript中如果两种类型的内部结构兼容,则他们是兼容的,这允许我们仅通过具有接口所需的形状来实现接口,而没有显式的implements子句;

interface Person {
    firstName: string;
    lastName: string;
}
 
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = { firstName: "Jane", lastName: "User" };
 
document.body.innerHTML = greeter(user);

运行结果与之前上面的没有变化。

      6.3.类

       最后,让我们使用最后一次用类扩展实例,TypeScript支持javaScript中的新功能,例如支持基于类的对象编程。

       这里,我们创建一个Student带有构造函数和一些公共字段的类,请注意,类和接口可以很好的协同工作,让程序员决定正确的抽象级别

       指的注意的是,使用public构造函数on参数是一种简写,允许我们自动创建具有该名称的简写

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
 
interface Person {
    firstName: string;
    lastName: string;
}
 
function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
 
let user = new Student("Jane", "M.", "User");
 
document.body.innerHTML = greeter(user);

重新运行tsc greeter.ts,TypeScript中的类只是JavaScript中经常使用的基于原型的OO的简写。

运行TypeScript Web应用程序

       运行后得到的结果如下:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript获取类名发布时间:2022-07-18
下一篇:
ReactHooksTypescript开发的一款H5移动端组件库发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap