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

TypeScript 体验

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

TypeScript是JavaScript的一个超集.是由微软开发的.因为开始H5的需要(使用WebStrom编辑器),所以没有使用VS重量级的IDE.

先建一个HTML来测试TP,步骤如下:

①: File->New Project...

我选择新建一个空项目,我只是想测试TypeScript



先停下 , 我们需要Node.js 的 npm ( 可以在node.js的官网下载并安装 )

好 , 使用DOS测试Node.js是否安装成功 命令:node -v

返回了node.js的版本号,显然是成功的.


通过npm(npm安装node.js会自动安装,所以需要先安装node.js)安装typescript插件(用它来翻译TS成JS)

在CMD中使用命令 npm install -g typescript

我们可以先看看npm的版本号:

好了我的npm的版本为 : 5.3.0

可以安装typescript插件了,需要多等一些时间,大概3~5分钟:

下图状态为安装完毕


好了 , 回到WebStrom.

我写的TS如下(greeter.ts):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * Created by CV-PC153 on 2017/8/7.
 */
 
class  Student{
    fullName:string;
    constructor(public firstName,public middleInitial,public lastName){
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}
 
interface Person{
    firstName : string;
    lastName : string;
}
enum Color{ Red , Green , Blue }
function greeter(person:Person):string{
    let  name : string = "snow";
    let  age : number = 27;
    let  call : string = `hello , my name is ${ name } , i will be ${ age + 1 } years old next month`;
    console.log(call);
    //数组
    let  list:number[] = [1,2,3];
    let  list_vector : Array<number> = [1,2,3];
    console.log( list[0] );//打印第一个元素
    //元组测试
    let tuple : [string , number , number];
    tuple = ["Ainy", 1,2];
    console.log(tuple[0]);//打印第一个元素(Ainy)
    console.log(tuple[3]);//访问越界元素(不打印任何元素)
    tuple[3] = "Kayer";//越界赋值 增加一个元素
    tuple[3] = 3;//重新赋值 string -> number
    console.log(tuple[0]);
    //枚举(默认情况下从0开始为元素编号)
    let  c : Color = Color.Blue;
    //alert( c );//会弹出2
    alert(Color[2]);//弹出Blue
    //任意类型(any)
    let notSure : any = 1;
    notSure = "Kayer";
 
 
    return "Hello," + person.firstName + "." + person.lastName;
}
let user : Student = new Student("Aonaufly" , "H.","User");
document.body.innerHTML = greeter(user);

我们使用 tsc greeter.ts   (不过要注意的是 , DOS的path的要指向TS的路径),如下图:

可以看看 , 编译后的JS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * Created by CV-PC153 on 2017/8/7.
 */
var Student = (function () {
    

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
TypeScript面向对象编程---类和对象发布时间：2022-07-18
下一篇：
typescript运行时应用初探：设计一个基于类型声明的前端请求层框架 ...发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

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

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