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
() {
function
Student(firstName, middleInitial, lastName) {
this
.firstName = firstName;
this
.middleInitial = middleInitial;
this
.lastName = lastName;
this
.fullName = firstName +
" "
+ middleInitial +
" "
+ lastName;
}
return
Student;
}());
var
Color;
(
function
(Color) {
Color[Color[
"Red"
] = 0] =
"Red"
;
Color[Color[
"Green"
] = 1] =
"Green"
;
Color[Color[
"Blue"
] = 2] =
"Blue"
;
})(Color || (Color = {}));
function
greeter(person) {
var
name =
"snow"
;
var
age = 27;
var
call =
"hello , my name is "
+ name +
" , i will be "
+ (age + 1) +
" years old next month"
;
console.log(call);
//
var
list = [1, 2, 3];
var
list_vector = [1, 2, 3];
console.log(list[0]);
//
//
var
tuple;
tuple = [
"Ainy"
, 1, 2];
console.log(tuple[0]);
//(Ainy)
console.log(tuple[3]);
//(κ)
tuple[3] =
"Kayer"
;
//縳(-string , tuple[0])
tuple[3] = 3;
//2number,,number = 3
console.log(tuple[0]);
//(′0)
var
c = Color.Blue;
//alert( c );//2
alert(Color[2]);
//Blue
//(any)
var
notSure = 1;
notSure =
"Kayer"
;
return
"Hello,"
+ person.firstName +
"."
+ person.lastName;
}
var
user =
new
Student(
"Aonaufly"
,
"H."
,
"User"
);
document.body.innerHTML = greeter(user);
|
html :
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>TypeScript Greeter</
title
>
</
head
>
<
body
>
<
script
src
=
"../com/greeter.js"
></
script
>
</
body
>
</
html
>
|
本文转自Aonaufly51CTO博客,原文链接: http://blog.51cto.com/aonaufly/1954296,如需转载请自行联系原作者