TS—数据类型大礼包

517 阅读6分钟

TypeScriptJavaScript的超集,为大型应用而生。有两个特点:一是强类型;二是基于类的面向对象编程

1. boolean

let isTrue : boolean = true
let isVisible : boolean ;
isVisible = false
console.log(isTrue)  //true
console.log(isVisible) //false

2. number

let num1:number = 6
let num2; //具有隐式的any类型, 根据赋值判断
num2 = 2
num2 = '123'
console.log(num1) //6
console.log(num2) //123

3. string

let str1string ;
str1 = 'abc0'
let name1string = 'Iric'
let str2 = `我是${name1},你是谁`
console.log(str1) //abc0
console.log(str2)  //我是Iric,你是谁

4.数组

「TS像JS一样可以操作数据元素, 有2中方式可以定义数组:」

  • 可以在元素后面加上[], 表示次类型组成一个数组
  • 使用数组泛型, 「Array<元素类型>」
let arr1number[];
arr1 = [1,2,3,4]
let arr2Array<string> = ['a','c','b']

console.log(arr1)  //[1, 2, 3, 4]
console.log(arr2)  //['a', 'c', 'b']

5. 元组

元组类型允许表示一个已知元素数量和类型的数组, 各元素类型不必相同. 当添加的元组越界的时候, 越界的类型会被限制为元组类型中每个类型的联合类型

const m: [string, number ] = ['Iric'20]
console.log(m)  //['Iric'20]
console.log(m[0].startsWith('I')) //true
m[0] = 'LIsa'
console.log(m)  //['LIsa'20]
// m[1] = true //不能将类型“boolean”分配给类型“number”
m.push('male')
// m.push(true)  //类型“boolean”的参数不能赋给类型“string | number”的参数
console.log(m)  //['LIsa'20'male']

6. 枚举类型enum

enum类型是JS标准数据类型的一个补充, 使用枚举类型可以为数组赋予友好的名字。

  • 「默认情况下从0开始为元素的编号」
enum Color { RedGreenBlue}
let a:Color = Color.Red
let b:Color = Color.Green
let cColor = Color.Blue
console.log(a)  //0 
console.log(b)   //1
console.log(c)  //2
  • 「可以手动指定成员」
enum Person{ name='Lisa', age= 20, gender='male'}
let userName:Person = Person.name
let userAge:Person = Person.age
let userGanderPerson = Person.gender
console.log(userName)  //Lisa  
console.log(userAge) //20
console.log(userGander)  //male

enum Gender{
    male = 0,
    famale = 1
}
let Iperson:{namestringagenumber,genderGender}
Iperson= {
    name:'Lisa',
    age:20,
    genderGender.famale
}
console.log(Iperson)  //{name: 'Lisa', age: 20, gender: 1}
  • 「&表示同时满足」
let Person1:{name: string} &{age: number}
Person1 = {name:'孙悟空', age:500}
console.log(Person1)  //{name: '孙悟空', age: 500}

7. any类型

「any」表示的是「任意类型」, 一个变量设置any类型后, 相当于关闭了TS的类型检测。 声明变量如果不知道类型, 则TS解析器会自动判断变量的未履行为any(隐式any), 没有类型检测就没有立刻意义, 跟写JS一样, 很不安全。

let any1:any = 4
any1 = 'abc'
console.log(any1)
any1 = false
console.log(any1)

「当你只知道一部分数据类型时, any类型也是比较有用的, 比如你定义个一个数组, 她包含不同类型数据, 你就可以使用any」

let arr3any[] = [1'abc'false]
console.log(arr3)
let arr4Array<any> = [ true'123'false100]
console.log(arr4)

8. void 【空值】

从某种程度上来说, void类型像是与any类型相反, 它表示没有任何类型。当一个函数没有返回值时, 其返回值类型时void:

function getData():void{
    console.log('我是void类型')
}
console.log(getData())

function getData22():void{
    console.log('我是void类型')
    return '123' //提示报错  不能将类型“string”分配给类型“void”
}

声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined

let mm:void = undefined
console.log(mm) //undefined

但是void可以返回undefined值,比如:

function fn2():void{
     return undefined;
}

9.Never

表示永远不会返回值,连undefined都不会返回

function fn():never{
    throw new Error('报错了')
}

10.Null和Undefined

TypeScript里,undefinednull两者各自有自己的类型分别叫做undefinednull。 和void相似,它们的本身的类型用处不是很大:

// Not much else we can assign to these variables!
let uundefined = undefined;
let nnull = null;

默认情况下nullundefined是所有类型的子类型。 就是说你可以把nullundefined赋值给number类型的变量。

11. 字面量申明类型

TS支持将一个字面量当成一个类型使用。

比如: let name: "Lisa";

name变量的类型是"Lisa",它只能兼容字面量值为"Lisa"的变量, 也只能接受"Lisa"作为赋值数据。

let name1:'Lisa'
name1 = 'Lisa'
name1 = "iric"  //不能将类型“"iric"”分配给类型“"Lisa"

「TS提供3中字面量类型:」

  • 字符串字面量类型:使用字符串字面量作为类型。
let sex : 'male' | 'female';
sex = 'male'
sex'female'
  • 布尔字面量类型:使用布尔字字面量作为类型
let state = false || true
state = false
state  = true
state = 12  //不能将类型“number”分配给类型“boolean”
  • 数字字面量类型: 使用数字字面量作为类型
let num = 1 | 2 | 3 | 4 | 5

12. unknow

表示**「未知类型的值」**【一个安全的any】

类型不知道时可以使用unknow

let num: number = 10
let m:any = 12
m = 'ok'
let n: unknown;
n = true
n = 50
num = m //m的值是any类型, 它可以赋值给任意变量
num = n //unknow不能给别的类型的变量赋值

「unknown和any的主要区别:」

unknown类型会更加严格, 不像any那样不做类型检查,反而unknow因为未知性不允许访问属性, 不允许赋值给其他明确类型的变量。 你可以把任何值赋值给unknown, 但是不能调用属性和方法

let value: unknown
value = true
value = 'lisa'
console.log(value.length) //错误写法9
  • 如果需要使用属性和方法, 那么你可能需要使用类型断言
let valueunknown
value = true
value = 'lisa'
console.log((value as string).length//错误写法
  • 如果联合类型中有unknown,那么最终得到的都是unknown类型:
type U1 = unknown | null
type U2 = unknown | string
type U3 = unknown | number
//类型别名U1、U2、U3都是unknown类型

13. 类型断言

有些情况下, 变量的类型对于我们来说时很明确的, 但是TS编译器却并不清楚, 此时,可以通过类型断言来告诉编译器变量的类型.

「断言有2中形式:」

  1. 变量 as 类型
  2. <类型>变量
let s = e as number; //把s当为number类型
let s1 = <number>e;
let someValue1:unknown = 'this is a string'
let strLength1number = (someValue1 as string).length;
console.log(strLength1)   //16

let someValue2:unknown = 'this is a string'
const strLength2unknown = (<string>someValue2).length
console.log(strLength2)  //16

14、联合类型

联合类型表示**「取值」可以为「多种类型中的一种」**

function toString2(x:number | string):string{
    return x.toString()
}

15. object 表示一个js对象

{}用来指定对象中包含哪些属性

let o:object;
 let fn = function(){}

「语法:{属性: 属性值,属性:属性值}」

let obj1: {
    namestring,
    age?: number
}

属性后面加一个**?**,表示的是 可选属性,可以加也可以不加

obj1={
    name:'Iric',
    age: 20
}

「可选属性:」

  • name属性是必选属性
  • age属性和gender属性是可选属性
  • [propName: string]: unknown 表示任意类型的属性
let obj2: {namestring, [propNamestring]: unknown}
obj2 = {
    name'猪八戒',
    age18,
    gender:'男'
}
let fn:(a: number, b: number) => number;
fn = function(m,n):number{
    return m +n
}