TypeScript学习笔记(1)数据类型,类型声明,函数

目录

数据类型

任意类型 any

未知类型unknown

空值类型void

没有值类型never

对象类型object

数组类型array

TS特有类型

元组类型tuple

枚举类型enum

类型的别名

类型声明

基本格式

使用字面量来进行类型声明

函数----function

可选参数,默认参数

剩余参数

函数重载


数据类型

  1. 基本数据类型: number , string , boolean , null , undefined , symbol JS已有

  2. 引用数据类型: object , (数组array,函数function, 对象等) JS已有

  3. 自定义类型(类型别名),联合类型,接口,元组,自变量类型,枚举,void,any等 【新增TS类型】

类型一览

类型例子描述
number1,-3,2.5任意数字
string"hello"任意字符串
booleantrue,false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值
object(name:"饼干")任意的JS对象
array[1,2,4]任意JS数组
tuple[4,5]元素,TS新增类型,固定长度数组
enumenum(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);
​
  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值