TypeScript 基本数据类型+基本数据结构
2018-03-19 本文已影响453人
神秘者007
概要
image.png
需要注意的是：
- 下面的源码都是以 .ts 结尾的 typescript 文件，需要执行的话需要进行编译
- 这里我使用的是 npm 安装的 typescript 然后进行编译的
//安装
npm install -g typescript
//编译命令示例 之后会自动的在同级目录下生成 BooleanDemo.js 文件
tsc BooleanDemo.ts
基本数据类型
Boolean
// let isDone:boolean = false;//false
// let isDone:boolean = true;//true
let isDone:boolean;//undefined 所以在初始化的时候一定要给一个初始化的值 true || false
function tell() {
alert(isDone);
}
tell();
Number
let num:number = 5;//5
function tell() {
num++;//6
alert(num);
}
tell();
String
let str:string = 'xiaochuan';//xiaochuan
function tell() {
str+='sun';//xiaochuansun
alert(str);
}
tell();
Any
// 有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：
let notSure:any = 10;
notSure = "hello";
notSure = false;
//再定义一个数组
let list:any[] = [1,'xiao',false];
function tell() {
// alert(notSure);//最后输出的是 false
alert(list[1]);//xiao
}
tell();
Viod
// 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void
//当函数需要返回一个 string 类型的值时需要写 string
function tell():string {
return 'xiaochuan';
}
//当函数需要返回一个 number 类型的值时需要写 number
function say():number{
return 10;
}
//当函数不需要返回任何一个值时需要写 void
function tell1():void{
alert();
}
- 上面相应测试所用的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript基础数据类型 Boolean Number String Any</title>
<!-- <script type="text/javascript" src="BooleanDemo.js"></script> -->
<!-- <script type="text/javascript" src="NumberDemo.js"></script> -->
<!-- <script type="text/javascript" src="StringDemo.js"></script> -->
<script type="text/javascript" src="AnyDemo.js"></script>
</head>
<body>
</body>
</html>
基本数据结构
Array
//第一种声明方法
let list1:number[] = [1,2,3];
//第二种声明方法
let list2:Array<string> = ['sun','xiao','chuan'];
function tell() {
alert(list1[0]);//1
alert(list1[1]);//2
alert(list1[2]);//3
}
// tell();
function say(){
alert(list2[0]);//sun
alert(list2[1]);//xiao
alert(list2[2]);//chuan
}
say();
Enum
//枚举
//第一种未设置下标默认从 0 开始
// enum Color{Red,Green,Blue};
// let colorName:string = Color[1];//Green
//第二种 设置第一个元素的下标为 1 则从 1 开始
// enum Color{Red = 1,Green,Blue};
// let colorName:string = Color[1];//Red
//第三种 设置多个元素的下标进行获取
// enum Color{Red = 5,Green = 10,Blue = 15};
// let colorName:string = Color[10];//Green
//如何获取元素的下标
enum Color{Red,Green,Blue};
let c:Color = Color.Green;//1
function tell() {
//获取元素的名称
// alert(colorName);
//获取下标
alert(c);
}
tell();
- 上面相应测试所用的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript基础数据结构 Array Enum(枚举)</title>
<!-- <script type="text/javascript" src="ArrayDemo.js"></script> -->
<script type="text/javascript" src="EnumDemo.js"></script>
</head>
<body>
</body>
</html>
总结
- Boolean 布尔类型
- Number 数字类型
- String 字符串类型
- Array 数组
- Enum 枚举
- Any 任意类型
- Viod 函数不需要返回值时使用
