TypeScript学习(2)- ts基本类型

16047416:

        类型声明式Ts非常重要的一个特点,通过类型声明可以指定TS中变量(参数,形参)的类型。指定类型后,当为变量赋值时,ts编译器会自动检查值是否符合类型声明,符合则赋值,否则报错。

目录

ts的所有类型 

类型声明

(1)类型声明示例

 (2)字面量类型声明

(3)联合类型 

(4)ts特有类型-any

(5)ts特有类型-unknown

(6)类型断言

(7) ts特有类型-void

(8)object类型

(9)array类型

 (10)ts特有类型-tuple

(11)ts特有类型-enum

(12)类型别名


ts的所有类型 

  • number、 string、boolean、Object、array ...是js都有的类型
  • TS特有的数据类型:tuple(元祖)、enum(枚举)、any(任意类型)、unknow、neve

类型声明

(1)类型声明示例

let a:number
// a的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10

let b:string
b = 'hello' 

let c:boolean
c = true 

let d:object
d = {}

//function 参数确定类型
function sum(a:number,b:number){
    return a+b
}
// sum('1',2) //会报错
sum(1,2)

注意:如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测

// 如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测
let c = false  //此时已经定义变量c 为boolean类型了
// c = 'a'  // 把其他类型的值赋值给c  就会报错
c = true

 (2)字面量类型声明

let a2:10 //在此时就给a2 定义了10这个字面量的类型,之后对a2赋值只能赋10,否则报错
a2 = 10
// a2 =11 //就会报错 

let a3:小美
a3 = 小美
// a3 = 小美 //就会报错 

(3)联合类型 

可以使用 “| 连接多个类型(联合类型)

//字面量联合类型
let b2:'male' | "female"
b2 = 'male'
b2 = "female"
// b2 = 'hello' //error  当赋值是其他 就会报错
console.log("b2",b2)

//声明联合类型
let c2: boolean | string  //c2的赋值就可以是boolean 或者string  类型
c2 = 'hello'
c2 = true
//c2 = 10  //error 报错
console.log(c2)

“&”且

let j:{name:string} & {age:number}
j = {name:'小美',age:18}

(4)ts特有类型-any

        any 表示的任意类型  不建议使用;一个变量设置类型为any后相当于对该变量关闭了TS的类型检测

let d2: any
d2 = 'hello'
d2 = 1
d2 = true
console.log(d2)

(5)ts特有类型-unknown

        unknown 表示未知类型的值

let e2: unknown
e2 = 'hello'
e2 = 1
e2 = true
console.log(e2)

注意:当unknown类型的值 再次赋值给确定类型的变量时,会报错

例如:

 unknown类型的e3 赋值给 string类型的 s  虽然e3赋值了string类型的值,但还是会报错

let e3:unknown
e3 = 'hello'
let s:string; 
s = e3 //报错 unknown类型的变量,不能直接赋值给其他变量

(6)类型断言

        类型断言(判断),可以用来告诉解析器变量的实际类型

可以解决上面的问题(unknown类型的变量,不能直接赋值给其他变量)啦

语法:

(1)变量  as 类型
(2)<类型> 变量

例子:

let e3:unknown
e3 = 'hello'
let s:string; 
s = e3 as string; //当e3类型string
//s = <string> e3;//或者
console.log(s, e3); //hello ,hello

类型断言使用场景
1.消除类型检查错误
        有些情况下,开发者明确知道某个变量的类型,但是TypeScript的类型检查

function f():void{

}

器并不能推断出这个类型。这时可以使用类型断言,将变量的类型强制转换为开发者指定的类型,从而消除类型检查错误。

2. 处理联合类型
        当一个变量的类型是多种类型的联合类型时,如果开发者想要使用其中一个类型的属性或方法,可以使用类型断言将其转换为该类型,以便进行后续操作。

3. 处理any类型和unknown
        有时开发者需要使用any类型的变量,但是any类型会降低代码的类型安全性。如果能够明确知道该变量的类型,可以使用类型断言将其转换为该类型,以提高代码的类型安全性。

(7) ts特有类型-void

js中没有空值的概念,void 用来表示为空

以函数为例,就表示没有返回值的函数

function f():void{}

声明一个 void类型的变量没有什么用,因为只能将其赋值为undefined 

let a6: void = undefined // 正确的

(8)object类型

let a4 : object
a4 = {}
a4 = function (){}

在js中一切皆对象,所以object类型在开发过程中并不实用

在定义对象时,一般限制对象里属性的类型

例子:

let b4 : {name : string}
b4 = {name:'小美'}
//b4 = {name:18} //error
//b4 = {name:'小美',age:18} //error 多了属性 少了属性也不行


//在属性名后边加上 ?表示属性是可选的
let b5 : {name : string age ?:number};
b5 = {name:'小帅'} //可
b5 = {name:'小帅',age:88} // 可

//当不确定属性类型有多少时
//[propName : string]:any 表示任意类型的属性
let c4 : {name : string ,[propName : string]:any};
c4 = {name:'小草',age:88,gender:'男'}


当定义函数时,一般控制传参的类型和返回值的类型

设置函数结构声明语法:

语法 : (形参:类型,形参:类型,...) => 返回值

例子:

//d4 是一个函数,有两个number类型的参数,返回值也是number类型
let d4 :(a:number,b:number)=>number
d4 = function(n1,n2):number{
    return 3
}

(9)array类型

数组的声明方式:

类型[]
Array<类型>

例子:

let e:string[]
e = ['a','b','c']
// e = ['a','b',1] //error

let f4: Array<number>
f4 = [1,2,3]

 (10)ts特有类型-tuple

元组,元组就是固定长度的数组

语法:

[类型,类型]
let h: [string,string ]
h = ['1','2']
// h = ['1','2','3']//error

(11)ts特有类型-enum

枚举

enum Gender{
    Male,
    Female
}
let i :{name:string,gender:Gender}
i ={name:'小刚',gender:Gender.Male}

(12)类型别名

        起别名不会新建一个类型 - 它创建了一个新名字来引用那个类型。给基本类型起别名通常没什么用。类型别名常用于联合类型。

例子:

type  mytype = string  //mytype等价于string
let j:mytype  
j = '哈哈哈'


type mytype  = string | number | boolean
let j :mytype  
j = '哈哈哈'
j = 18
j = true

猜你喜欢

转载自blog.csdn.net/weixin_42307283/article/details/131194236