目录
数据类型
-
基本数据类型: number , string , boolean , null , undefined , symbol JS已有
-
引用数据类型: object , (数组array,函数function, 对象等) JS已有
-
自定义类型(类型别名),联合类型,接口,元组,自变量类型,枚举,void,any等 【新增TS类型】
类型一览
类型 | 例子 | 描述 |
---|---|---|
number | 1,-3,2.5 | 任意数字 |
string | "hello" | 任意字符串 |
boolean | true,false | 布尔值true或false |
字面量 | 其本身 | 限制变量的值就是该字面量的值 |
any | * | 任意类型 |
unknown | * | 类型安全的any |
void | 空值(undefined) | 没有值(或undefined) |
never | 没有值 | 不能是任何值 |
object | (name:"饼干") | 任意的JS对象 |
array | [1,2,4] | 任意JS数组 |
tuple | [4,5] | 元素,TS新增类型,固定长度数组 |
enum | enum(A,B) | 枚举,TS中新增类型 |
任意类型 any
//any表示的是任意类型,一个变量设置类型为any后相当于对该变量关闭了TS的类型检测 //使用TS时,不建议使用any类型 let d: any; d = 10; d = 'hello'; d = true; let d; //也是any类型 //声明变量如果不指定类型,则TS解析会自动判断变量的类型为any(隐式的any) ↑上为显式的any let s : string; s = d; //any类型可以赋值给任意变量,赋值给的变量也变成any格式
未知类型unknown
unknown实际上就是一个类型安全的any
unknown类型的变量,不能直接赋值给其他变量
let e : unknown; e = 10; e = "hello"; e = true; let s : string; s=e; //会报错,unknoen类型无法赋值给其他变量 if(typeof e === "string") //进行e类型的判断 { s = e; }
类型断言
类型断言可以用来告诉解析器变量的实际类型
语法
变量 as 类型
<类型>变量
s = e as string;
空值类型void
void用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void{ } // 有返回值就会报错 return null可以
没有值类型never
never表示永远不会返回结果
function fn(): never{ throw new Error('报错了!'); } //用的比较少
对象类型object
object表示一个js对象,使用{}来定义
{}语法: {属性名:属性值,属性名:属性值}
let a : object; a = {}; a = function(){}; //{}用来指定对象中可以包含哪些属性 let b : {name: string}; b = {name: '饼干'}; //上下两者结构需相同
在属性名后边加上?,表示属性是可选的
let c:{name:string,age?:number}; c= {name:'饼干',age:18}; let d:{name:string,[propName: string]:any};//[任意属性名(自己写):规定属性值]:(属性值) d= {name:'饼干',age:18}; //表示名字必须要有,其他属性任意添加都可以 *注意与属性名?格式区分
数组类型array
数组的类型声明:类型[]
Array<类型>
let a: string[]; //string[]表示字符串数组 e = ['a','b','c']; let b: number[]; //number[]表示数值数组 let c: Array<number>; g = [1,2,3];
TS特有类型
元组类型tuple
元组就是固定长度的数组
let h:[string,string]; h = ['hello','hi'];
枚举类型enum
enum Gender{ Male = 0, Female = 1 } let i:{name:string.gender:Gender}; i = {name:'饼干',gender:Gender.Male} let i:{name:string.gender:string}; i = {name:'饼干',gender:'女'} let i:{name:string.gender:0|1}; i = {name:'饼干',gender:0}
类型的别名
type myType = string; let m : myType; //m为string类型变量 type MyType = 1|2|3|4|5; let k : MyType; //k为1|2|3|4|5 k = 1 ; // 对的 k = 6 ; //报错
类型声明
let a: number;
//声明变量a,同时指定它的类型为number
a = 10;8
a = 33;
a = 'hello' //会报错,因为不是number类型 【a的值只能是数字】
let a : number = 10; //声明变量后直接赋值
基本格式
变量 :数据类型 =类型值
如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测
let c = false //编译器自动将c类型定义为boolean c = true //只能进行布尔定义
使用字面量来进行类型声明
let a : 10; a = 10 //限制值只能为10 //可以使用 | 来链接多个类型(联合类型) let b: "male"|"female"; let c: boolean | string; c = true; c = "hello"; //&表示同时 let j: {name:string} & {age:number}; j = {name:'饼干', age:'18'}; //两个都要写
函数----function
函数是一组一起执行一个任务的语句,函数声明要告诉编译器函数的名称、返回类型和参数,TypeScript可以创建有名字的函数和匿名函数
//有名函数 function add(x,y) { return x+y; } //匿名函数 let myAdd = function(x,y) { return x+y; }; //箭头函数 let c = (x:number,y:number) => { return x+y }
//JS的场合 function sum(a,b) { return a+b; } sum(123,456); //579 正常调用 function sum(a,b) { return a+b; } sum(123,"456"); //123456 数字拼接 //另一种定义方式 语法:(形参:类型,形参:类型) let d: (a: number,b: number)=>number; d = function(n1,n2):number{ return n1+n2; }
JS写函数不用考虑类型,也不用考虑数量
//TS的场合 function sum(a:number,b:number) //需要声明类型 【vscode中不声明会报错】 { return a+b; } sum(123,456); //579 正常调用 function sum(a:number,b:number) { return a+b; } sum(123,"456"); //报错 function sum(a:number,b;number) { return a+b; } sum(123); //少了报错 function sum(a:number,b;number) { return a+b; } sum(123,456,789); //多了报错
TS写函数需要定义类型,数量也要严格管控(如果少了多了会报错)
函数返回值的类型定义
function sum(a:number,b;number):number { return a+b; } sum(123,456);
可选参数,默认参数
TS在声明函数时,可以通过?号来定义可选参数
注意,可选参数要放在普通参数的后面,不然会导致编译错误
function fun(name: string = '默认参数', age?: number, hok?: boolean) { return name + age + hok; } // 要可选参数 console.log(fun('我是参数!', 15, true))//我是参数!15true // 不要可选参数 console.log(fun('我是参数!'))//我是参数!undefined undefined
剩余参数
当不知道会有多少参数传递进来时,就需要用剩余参数 (3个.)
function fun(name:string, ...items:number[]) //剩余参数(接收要累加的数值,是一个数组) { .... }
函数重载
函数/方法重载,是使用相同名称和不同参数数量或类型创建多个方法的一种能力,也就是说通过为同一个函数提供多个函数类型定义来实现多种功能的目的。
function double(x:number | string):number | string{ if(typeof x === 'number') { return x*2; } else { return x+','+x; } } //期望输入number输出number,输入string输出string. function double(x: number): number; // 输入是 number 类型,输出也是 number 类型 function double(x: string): string; function double(x: number | string): number | string { if (typeof x === 'number') { return x * 2; } else { return x + ', ' + x; } } let d = double(1);