TypeScript的基本类型-Toy模板网

这篇具有很好参考价值的文章主要介绍了TypeScript的基本类型。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

typescript的定义

以JavaScript为基础构建的语言
是js的超集
可以在任何支持js的平台执行
ts 拓展了js并增加了类型
Ts不能被js解析器直接执行。

TS=> 编译为js 执行的还是js.
js 不易于维护，而ts易于维护。
可提高项目的可维护性。

类似less、sass 完善的语法写样式，最终转为css . 所有浏览器都能渲染
ts 都需要转为js ，编译ts ，比js 多一道工序
可以完全按照js来写。

TS增加了什么？

类型（有js的类型number、string 、boolean等，也有新增：给变量设置类型、元祖枚举、抽象类）
支持ES的新特性
添加ES不具备的新特性（抽象类接口工具装饰器等）
丰富的配置选项（严格松散 ts可编译为任意版本解决浏览器兼容性问题，比如ie老版本的浏览器也可兼容，将ts编译为ES3）
强大的开发工具（编辑器的提示）

基本类型

类型声明: let 变量：类型=值 ; let fn(参数:类型,参数:类型):类型{}
自动类型判断当对变量的声明和赋值是同时进行时，ts编译器会自动判断变量的类型，所以可以省略掉类型声明
类型：number、string、boolean、使用字面量进行类型声明、any、unknown、void、never、object、array、tuple元祖、enum枚举

// 数字类型 number
//声明一个变量a，同时指定类型为number
let a :number;
// a 的类型设置为number，在以后的使用过程中a的值只能是数字
a = 10;
let a1:number = 10 // 十进制
let a2:number = 0b1010 //二进制
let a3:number = 0o12 // 八进制
let a4:number = 0xa // 十六进制
a1 = 11;
//a='hi' // 是会报错的,因为变量a的类型是number，不能赋值字符串
// 在写上述代码过程中，虽然有错误，但通过tsc 1.ts 还是会继续编译
//不会阻止编译，后续可以通过编辑器的配置，设置为书写错误就不编译ts
let b:string;
b = 'hello';
//声明完变量就直接赋值
//let c:boolean = true;
//如果变量的声明和赋值是同时进行时，ts编译器会自动判断变量的类型
let c = false
c=true

//JS中的函数是不考虑参数的类型和个数的
//function sum(a,b){
//	return a+b
//}
//console.log(sum(a:123,b:456)) // 579
console.log(sum(a:123,b:'456')) // '123456'

//TS 写法 可以给参数 和返回值指定类型 都是小写
function sum(a:number,b:number):number{
	return a+b
}
sum(123,456) // 579
//sum(123,'456') // 会报错

// 使用字面量声明变量
let a1:10;
a1 = 10;
//a1 = 11 // 会报错 ，指定了a1为10
// 可以使用|连接多个类型(联合类型)
let b1 : 'male' | 'female';
b1 = 'male'
b1 = 'female'
//b1 = 'hello' // 这里会报错
let c1 : boolean|string;
c1 = true;
c1 = 'hi'

// 联合类型 表示取值可以为多种类型中的一种
// flag true/1  false/0
let f :boolean| string | number =true;
//只能访问此联合类型的所有类型里共有的属性和方法
f=123; // 再次赋值，走类型推断，给变量定义一个类型
f= '234' 
f=true
//console.log(f.split('')) // 因为split 是字符串、数组的方法，布尔值是没有的，所以会报错；
console.log(f.toString()); // 这个是都有的方法，可用

//undefined 和null 使用不多
let u: undefined = undefined;
let n: null = null;
// u = 123; //不能将类型“123”分配给类型“undefined”。ts(2322)
// undefined 和null 还可以作为其他类型的子类型
// 可以把undefined和null赋值给其他类型的变量
let b1: number = undefined; //"strict":true 下会报错
let str1: string = null; // "strict":true 时会报错


// any 表示任意类型 ,一个变量设置类型为any后，相当于对该变量关闭了TS的类型检测
// 使用TS时不建议使用any类型
//let d:any;
// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any(隐式的any)
let d;
d=true;
d = 'zifuchuan'
d=21
//unknown 表示未知类型的值 只霍霍自己，不会改变其他的变量
let e: unknown;
e = 12
e = true
e = 'hello'

let s :string;
//d的类型是any，他可以赋值给任意变量；(不止是自己修改了，还会改其他的变量)
//s = d;
//unknown 是一个类型安全的any
//unknown类型的变量，不能直接赋值给其他变量
e = 'hello2'
//s = e // 会报错 不能把unknown类型的值赋值给其他类型的值
//可使用以下方式
if(typeof e === 'string'){
	s = e
}

// 可使用类型断言 ，用来告诉解析器变量的实际类型 
/*
*  语法：
* 	变量 as 类型
* 	<类型>变量
*/
//尽管解析器不知道是什么类型，确定是string类型
s = e as string;
s = <string>e;

// void 表示空，以函数为例，表示没有返回值的函数，单纯的console。alert
function fn1():void{}

// never 表示永远不会返回结果
function fn2():never{
	throw new Error('报错啦')
}

// object 表示非原始类型，除了number、string、boolean之外的类型（null和undefined也包含在其中）
let obj: object = {};
// 通过字面量定义的变量
// obj = 123; //报错
// obj = '' // 报错
obj = null;
obj = undefined;
obj = [];
obj = new String();
obj = String

let o :object;
o = {};
o = function (){}
// {} 用来指定对象中可以包含哪些属性
//语法：{属性名:属性值,属性名:属性值}
// 在属性名后加?表示属性是可选的
let o1:{name:string,age?:number};
o1 = {name:'七公主',age:23};

// [propName:string]:any 表示任意类型的属性 定义对象的属性
// 例子 ：o2对象里有一个name属性，其他属性不管
let o2 :{name:string,[propName:string]:any}
o2 = {name:'七公主',age:23,set:'2'}

// 对象中，要同时满足两个类型 &表示同时
let o3:{name:string} &{age:number}
o3 = {name:'八戒',age:23}

/*
*  设置函数结构的类型声明
* 	语法：(形参:类型,形参:类型,形参:类型...)=> 返回值
*/
let func:(a:number,b:number)=> number
func = function(n1:number,n2:number):number{
	return n1+n2
}

// array 数组
/*
*   数组的类型声明：
* 		方式一：类型[]
* 		方式二：Array<类型>  称为泛型
*/
// string[] 表示字符串数组
let stringArr:string[];
stringArr=['aa','b','cc']
// number[] 表示数值的数组
let numArr:number[];
numArr=[1,2,3]
// number[] 等同于Array<number>  
let numArr2:Array<number>;
numArr2 = [2,3,4];

// 元祖：固定长度的数组 语法：[类型,类型]
let h:[string,number];
h = ['hello',21];

//enum 枚举
/*
*	enum 枚举
*/
enum Gender{
	Male=0,
	FeMale=1
}
let i:{name:string,gender:Gender};
i = {
	name:'孙悟空',
	gender:Gender.Male  // 'male'
};
console.log(i.gender===Gender.Male) // true

//类型的别名  可以简化类型的使用
type Mytype = 1|2|3|4|5;
let k:Mytype;
let m:Mytype;
let n:Mytype;
k = 2