TS的数据类型和接口与对象类型

一、TS的数据类型


  • TS是JS的超集,所以JS基础的类型都包含在内
  • 基础类型:Boolean、Number、String、null、undefined 以ES6的Symbol 和BigInt
	npm install typescript -g
	tsc -w
	tsc --init
	npm i ts-node --g
	npm i @types/node -D
	ts-node ‘文件名’

1. 字符串类型

  • 符串是使用string定义的
// 普通声明
let a:string = '123';
console.log(a);

// ES6的字符串模板
let str:string = `ddd${
      
      a}`
console.log(str);

2. 数字类型:

  • 支持十六进制、十进制、八进制和二进制
let notANumber: number = NaN;           //Nan
let num: number = 123;                  //普通数字
let infinityNumber: number = Infinity;  //无穷大
let decimal: number = 6;                //十进制
let hex: number = 0xf00d;               //十六进制
let binary: number = 0b1010;            //二进制
let octal: number = 0o744;              //八进制s
console.log(notANumber,num,infinityNumber,decimal,hex,binary,octal);

3. 布尔类型

let boolean: boolean = new Boolean(1)   // 报错,事实上new Boolean() 返回的是一个 Boolean 对象
  
let boolean1: Boolean = new Boolean(1)
let boolean2: boolean = true          //可以直接使用布尔值
let boolean3: boolean = Boolean(1)    //也可以通过函数返回布尔值
console.log(boolean1,boolean2,boolean3);

4. 空值类型

  • JavaScript没有空值(Void)的概念,在TypeScript中,可以用void表示没有任何返回值的函数
  • void类型的用法,主要是用在我们不希望调用者关心函数返回值的情况下,比如通常的异步回调函数
function voidFn(): void {
    
    
  console.log('test void')
}
voidFn()
  • void也可以定义undefined和null类型
// void也可以定义undefined和null类型 
let u: void = undefined
let n: void = null; // 严格模式下,null不能赋予void类型 
console.log(u);

5. Null和undefined类型

let u: undefined = undefined; //定义undefined
let n: null = null;           //定义null
console.log(u, n);

6. null、undefined、void、never

  • null、undefined
    • undefined类型只有undefined一个值,null类型只有null一个值。
    • undefined的意思是未定义,而null表示缺少值
  • void、never
    • 在typescript中void、never两个类型有明确的特殊作用。
    • void是函数没有显式返回任何值(例如consloe.log)时的返回类型
    • never是函数根本不返回(例如函数抛出异常,或者永远运行下去)时使用的类型。

在这里插入图片描述

二、任意类型


1. 类型的顺序

1. any和unknown是顶级类型
2. Number、String、Boolean
3. number、string、boolean
4. 1 、‘小青’、false
5. never

2. any(任意类型)

let any:any = 123
any = '123'
any = true
console.log(any);
  • 声明变量的时候没有指定任意类型默认为any
let any;
any = '123'
any = true
console.log(any);
  • 弊端如果使用any就失去了TS类型检测的作用

3. unknown

 1. S中引入的unknown类型也被认为是顶级类型,但它更安全。 
 2. 与any一样,所有类型都可以分配给unknown
 3. unknow类型比any更加严格,当你要使用any 的时候,可以尝试使用unknow
  • unknown 可以定义任何类型的值
let value: unknown;
value = true;             // OK
value = 42;               // OK
value = "Hello World";    // OK
value = [];               // OK
value = {
    
    };               // OK
value = null;             // OK
value = undefined;        // OK
value = Symbol("type");   // OK
  • 注意:
    • unknown类型只能赋值给自身或者any
let a: any = 1
let b: number = 5
a=b
b=a
let a: unknown = 1
let b: number = 5   //正确写法let b: any = 5 / let b: unknown = 5
a=b
b=a  //报错
  • unknown没有办法读取任何属性 方法也不可以代用
  • unknown比any更安全
let obj: any = {
    
    
  name: '张三',
  open: () => {
    
    
    console.log(obj.open());
  }
}

在这里插入图片描述

三、Object、object 以及{}


1. Object

  • Object类型是所有Object类的实例的类型。
    • Object接口定义了Object.prototype 原型对象上的属性
    • ObjectConstructor接口定义了 Object 类的属性, 如上面提到的 Object.create()。
  • 这个类型是跟原型链有关,原型链顶层就是Object,所以值类型和引用类型最终都指向Object,所以他包含所有类型。
let a1: Object = 123
let a2: Object = '123'
let a3: Object = []
let a4: Object = {
    
    }
let a5: Object = () => 123

2. object

  • object 代表所有非值类型的类型,例如数组、对象、函数等,常用于泛型约束
let a1: object = 123         // 错误 原始类型
let a2: object = '123'       // 错误 原始类型
let a6: object = false       // 错误 原始类型
let a3: object = []          // 正确
let a4: object = {
    
    }          // 正确
let a5: object = () => 123   // 正确

3.{}

  • 理解成new Object,包含所有类型
  • 字面量模式是不能修改值的
let a1: {
    
    } = 123             //正确
let a2: {
    
    } = '123'           //正确
let a3: {
    
    } = {
    
    name:'张三'}    //正确
let a4: {
    
    } =  () => 123       //正确

a3.age = 18 //报错 不能修改

四、接口和对象类型

1. 接口

作用:在面向对象的变成中,接口是一种规范的定义,他定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用。行为和动作的规范,对批量方法进行约束

  • interface不能多属性, 也不能少属性
interface Obj {
    
    
  name: string,
  age: number
}

let obj1: Obj = {
    
    
  name: '张三',
  age: 18
}
  • interface重名就合并
interface Obj {
    
    
  name: string,
  age: number
}
interface Obj {
    
    
  sex: string
}
let obj1: Obj = {
    
    
  name: '张三',
  age: 18,
  sex: '男'
}
  • interface 任意key
interface Obj {
    
    
  name: string,
  age: number
  [propName: string]:any
}

let obj1: Obj = {
    
    
  name: '张三',
  age: 18,
  a:1,
  b:2,
  c:3
}
  • interface ?和readonly
interface Obj {
    
    
  name: string,
  age?: number
}

let obj1: Obj = {
    
    
  name: '张三',
  age: 18
}
interface Obj {
    
    
  name: string,
  age?: number,
  readonly id: number,
  readonly cb: () => boolean
}

let obj1: Obj = {
    
    
  name: '张三',
  age: 18,
  id: 1,
  cb: () => {
    
    
    return false
  }
}
  • interface 接口继承
interface Obj extends OBj2 {
    
    
  name: string,
  age?: number,
  readonly id: number,
  readonly cb: () => boolean
}
interface OBj2 {
    
    
  sex: string
}
let obj1: Obj = {
    
    
  name: '张三',
  age: 18,
  sex: '男',
  id: 1,
  cb: () => {
    
    
    return false
  }
}
  • interface 定义函数类型
interface Fn{
    
    
  (name:string): number[]
}
const Fn:Fn = function(name:string){
    
    
  return [1]
}

猜你喜欢

转载自blog.csdn.net/m0_58190023/article/details/129451878