学习TS(1)数据类型声明

285 阅读4分钟

「这是我参与2022首次更文挑战的第30天,活动详情查看:2022首次更文挑战」。

boolean number string 基础数据类型

let bool:boolean = true;
let num:number = 18;
let str:string = "你好帅哥靓女!";

数组

let arr1:number[] = [1,2,3,4];
let arr2:string[] = ["1","2,"3","4"];
let arr3:(string|number)[] = [1,2,'3',4];
let arr4:Array<number|string> =  [1,2,'3',4]; // 泛型方式声明

Tuple 元组类型

数组一般由同种类型的值组成,但有时我们需要在单个变量中存储不同类型的值,这时候我们就可以使用元组

let tuple:[string,number,boolean] = ["大飞",18,true];
// 元组中增加数据,只能增加元组中存放的类型
tuple.push("老韭菜了") // ['大飞', 18, true, '老韭菜了']

枚举类型

使用枚举我们可以定义一些带名字的常量,使用枚举可以清晰的表达意图或创建一组有区别的用例.TypeScript 支持数字的和基于字符串的枚举.

通过观察我们可以发现枚举除了支持 从成员名称到成员值的普通映射之外,它还支持 从成员值到成员名称的反向映射

enum USER_ROLE {
    USER,
    ADMIN,
    MANAGER
};
console.log(USER_ROLE); // {0: 'USER', 1: 'ADMIN', 2: 'MANAGER', USER: 0, ADMIN: 1, MANAGER: 2}
console.log(USER_ROLE[0]); // USER
console.log(USER_ROLE['USER']); // 0
console.log(USER_ROLE.USER); // 0

  • 异构枚举

异构枚举的成员值是数字和字符串的混合

    enum USER_ROLE {
      USER = 'user',
      ADMIN = 1,
      MANAGER,
    };
    console.log(USER_ROLE); // {1: 'ADMIN', 2: 'MANAGER', USER: 'user', ADMIN: 1, MANAGER: 2}

  • 常量枚举
const enum USER_ROLE {
    USER,
    ADMIN,
    MANAGER,
};
console.log(USER_ROLE.USER); // 0


null 和 undefined

任何类型的子类型,如果 strictNullChecke 的值为true,则不能把null和undefined 赋值给其他类型

let name:number|boolean;
name = null;

any 类型

在TypeScript中,任何类型都可以被归为 any 类型,这让any 成为了类型系统的停机类型(也被称为全局超级类型) 并且不能进行TS的类型检测你可以任意为之

let arr1:(number|string)[] = [true,{age:18}]; 
// Type '{ age: number; }' is not assignable to type 'string | number'.
// Type '{ age: number; }' is not assignable to type 'number'
let arr2:any = ['大飞',true,{age:18}];
console.log(typeof arr2); // object
let an:any;
an(); // ok
an.trim(); // ok
new an(); // ok

许多场景下 any 太宽松了,可以很容易的编写各种类型正确单子啊运行时有问题的内容,大量使用 any 也就失去了 TS 的使用初衷 为了解决这个问题 TypeScript 3.0 引入了 unknown 类型

Unknown 类型

就像所有类型都可以赋值给 any 一样,所有类型也都可以赋值给 unknown. 这让 unknown 成为了 TypeScript 类型系统的另一种顶级类型(另一种any的存在);

let a:unknown;
a = 1; // ok
a = '1'; // ok
a = true; // ok
a = null; // ok
a = undefined; // ok
a = []; // ok
a = {}; // ok

就像 any 一样把任何类型都可以赋值且不会有类型检测, 所以我可以尝试一下把 unknown 赋值给其他类型看看如何

let a:any;
let b:string = a;
let c:unknown;
c.push(); // on ok
// 'd' is declared but its value is never read
Type 'unknown' is not assignable to type 'number'
let d:number = c; // no ok
// let d: number
'd' is declared but its value is never read.Vetur(6133)
Type 'unknown' is not assignable to type 'number'

将 c 的变量类型设置为 unknown 后,这些操作都不在被认为是类型正确的.从 any 衍生的 unknown 类型, TS 已将允许所有修改的默认设置,更改为禁止任何修改

Void 类型

与 any 正好相反 void 他代表没有任何类型, 当一个函数没有返回值时,通常用 void 来表示

function a():void{
    console.log("恭喜发财")
}

object Object {} 类型

object 类型是: TS 2.2 引入的新类型,它用来表示非原始类型
    interface ObjectConstructor {
      create(e: object | null): any;
    }
    let a = {};
    let b:ObjectConstructor;
    b.create(a); // 语法不行
    Object.create(a);
    Object.create(x); // on ok
    Object.create(1); // on ok
    Object.create(true); // on ok
    Object.create(null);


Object类型

它是所有 Object 类的实例的类型,它由以下两个接口来定义:

  • Object 接口定义了 Object.prototype 原型对象上的属性;
interface Object {
      constructor: Function;
      toString(): string;
      toLocaleString(): string;
      valueOf(): Object;
      hasOwnProperty(v: PropertyKey): boolean;
      isPrototypeOf(v: Object): boolean;
      propertyIsEnumerable(v: PropertyKey): boolean;
    }

  • ObjectConstructor 接口定义了 Object 类的属性
    interface ObjectConstructor {
      new (value?: any): Object;
      readonly prototype: Object;
      getPrototypeOf(o: any): any;
    }
    
    declare let Object: ObjectConstructor;


Object 类的所有实例都继承了 Object 接口中的所有属性

{} 类型
  • {} 类型描述了一个没有成员的对象,当你试图访问这个对象的任意属性时,TS 会产生一个编译时的报错
    let obj: {} = {};
    obj.age = 18; // Property 'age' does not exist on type '{}'
    // 但是,你仍然可以使用在 Object 类型上定义的所有属性和方法,这些属性和方法可通过 JavaScript 的原型链隐式地使用
    obj.toString(); // ok

Never 类型

  • never 类型表示永不存在值的类型,用在那些总是抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型
function error(message:string):never{
    throw new Error(message)
}


Symbol 类型

  • 表示独一无二
const s1 = Symbol('key');
const s2 = Symbol('key');
console.log(s1 == s2); // false