当前位置：首页 > news >正文

TypeScript的基本类型

news 2025/6/24 16:45:36

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枚举

//声明一个变量a，同时指定类型为number
let a :number;
// a 的类型设置为number，在以后的使用过程中a的值只能是数字
a = 10;
//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'
// 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 表示js的对象
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