TypeScript Basic Tutorial (2)


typeScript中的数据类型

typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型:

  • 布尔类型(boolean)
  • 数字类型(number)
  • 字符串类型(string)
  • 数组类型(array)
  • 元组类型(tuple)
  • 枚举类型(enum)
  • 任意类型(any)
  • null 和 undefined
  • void类型
  • never类型

布尔类型(boolean)

es5的写法 (正确写法) ts中(错误写法)

var flag=true;
flag=456;

typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验
写ts代码必须指定类型

var flag:boolean=true;
// flag=123;  //错误
flag=false;  //正确
console.log(flag);

数字类型(number)

var num:number=123;
num=456;
console.log(num);  //正确
num='str';    //错误

字符串类型(string)

var str:string='this is ts';
str='haha';  //正确
str=true;  //错误

数组类型(array)

ts中定义数组有两种方式:

var arr=['1','2'];  //es5定义数组

1.第一种定义数组的方式

var arr:number[]=[11,22,33];
console.log(arr);

2.第二种定义数组的方式

var arr:Array<number>=[11,22,33];
console.log(arr)

3.第三种定义数组的方式

var arr3:any[]=['131214',22,true];
console.log(arr3);

元组类型(tuple)

var arr:Array<number>=[11,22,33];
console.log(arr)
//元祖类型
let arr:[number,string]=[123,'this is ts'];
console.log(arr);

枚举类型(enum)

随着计算机的不断普及,程序不仅只用于数值计算,还更广泛地用于处理非数值的数据。
例如:性别、月份、星期几、颜色、单位名、学历、职业等,都不是数值数据。
在其它程序设计语言中,一般用一个数值来代表某一状态,这种处理方法不直观,易读性差。
如果能在程序中用自然语言中有相应含义的单词来代表某一状态,则程序就很容易阅读和理解。
也就是说,事先考虑到某一变量可能取的值,尽量用自然语言中含义清楚的单词来表示它的每一个值。
这种方法称为枚举方法,用这种方法定义的类型称枚举类型。
enum 枚举名{
标识符[=整型常数],
标识符[=整型常数],

标识符[=整型常数],
} ;

enum Flag {success=1,error=2};
let s:Flag=Flag.success;
console.log(s);
enum Flag {success=1,error=2};
let f:Flag=Flag.error;
console.log(f);
enum Color {blue,red,'orange'}; 可以用引号加起来
var c:Color=Color.red;
console.log(c);   //1  从0开始 如果标识符没有赋值 它的值就是下标

enum Color {blue,red=3,'orange'}; 也可以赋值
var c:Color=Color.red;
console.log(c);   //3
var c:Color=Color.orange;
console.log(c);   //4
enum Err {'undefined'=-1,'null'=-2,'success'=1};
var e:Err=Err.success;
console.log(e); //-2

任意类型(any)

var num:any=123;
num='str';
num=true;
onsole.log(num)

任意类型的用处:

var oBox:any=document.getElementById('box');
oBox.style.color='red';

在网页上可以这么用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        box
    </div>
</body>
</html>
<script src="js/index.js"></script>

null 和 undefined 其他(never类型)数据类型的子类型

var num:number;
console.log(num)  //输出:undefined   报错 变量定义了没有赋值
var num:undefined;
console.log(num)  //输出:undefined  //正确
var num:number | undefined;
num=123;
console.log(num);
//定义没有赋值就是undefined
var num:number | undefined;
console.log(num);
var num:null;
num=null;
//一个元素可能是 number类型 可能是null 可能是undefined
var num:number | null | undefined;
num=1234;
console.log(num)

void类型

typescript中的void表示没有任何类型,一般用于定义方法的时候方法没有返回值。
es5的定义方法

function run(){
  console.log('run')
}

run();

表示方法没有返回任何类型:

//正确写法
function run():void{
    console.log('run')
  }
run();

//错误写法
function run():undefined{
    console.log('run')
  }
run();

//正确写法
function run():number{
  return 123;
}
run();

never类型

是其他类型 (包括 null 和 undefined)的子类型,代表从不会出现的值。
这意味着声明never的变量只能被never类型所赋值。

var a:undefined;
a=undefined;
var b:null;
b=null;

var a:never;
a=123; //错误的写法

a=(()=>{
  throw new Error('错误');
})()

文章作者: Chaoqiang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Chaoqiang !
评论
  目录