添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
激动的充值卡  ·  laravel ...·  1 年前    · 

2. object

在JavaScript中,object是引用类型,它存储的是值的引用。在TypeScript中,当想让一个变量或者函数的参数的类型是一个对象的形式时,可以使用这个类型:

let obj: object
obj = { name: 'TypeScript' }
obj = 123             // error 不能将类型“123”分配给类型“object”
console.log(obj.name) // error 类型“object”上不存在属性“name”
复制代码


可以看到,当给一个对象类型的变量赋值一个对象时,就会报错。对象类型更适合以下场景:

function getKeys (obj: object) {
  return Object.keys(obj) // 会以列表的形式返回obj中的值
getKeys({ a: 'a' }) // ['a']
getKeys(123)        // error 类型“123”的参数不能赋给类型“object”的参数
复制代码


3. 元组


在 JavaScript 中并没有元组的概念,作为一门动态类型语言,它的优势是支持多类型元素数组。但是出于较好的扩展性、可读性和稳定性考虑,我们通常会把不同类型的值通过键值对的形式塞到一个对象中,再返回这个对象,而不是使用没有任何限制的数组。TypeScript 的元组类型正好弥补了这个不足,使得定义包含固定个数元素、每个元素类型未必相同的数组成为可能。


元组可以看做是数组的扩展,它表示已知元素数量和类型的数组,它特别适合用来实现多值返回。确切的说,就是已知数组中每一个位置上的元素的类型,可以通过元组的索引为元素赋值::

let arr: [string, number, boolean];
arr = ["a", 2, false]; // success
arr = [2, "a", false]; // error 不能将类型“number”分配给类型“string”。 不能将类型“string”分配给类型“number”。
arr = ["a", 2];        // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'
arr[1] = 996                    
复制代码


可以看到,定义的arr元组中,元素个数和元素类型都是确定的,当为arr赋值时,各个位置上的元素类型都要对应,元素个数也要一致。


当访问元组元素时,TypeScript也会对元素做类型检查,如果元素是一个字符串,那么它只能使用字符串方法,如果使用别的类型的方法,就会报错。


在TypeScript 新的版本中,TypeScript会对元组做越界判断。超出规定个数的元素称作越界元素,元素赋值必须类型和个数都对应,不能超出定义的元素个数。


在新的版本中,[string, number]元组类型的声明效果上可以看做等同于下面的声明:

interface Tuple extends Array<number | string> { 
   0: string; 
   1: number;
   length: 2; 
复制代码


这里定义了接口 Tuple ,它继承数组类型,并且数组元素的类型是 number 和 string 构成的联合类型,这样接口 Tuple 就拥有了数组类型所有的特性。并且指定索引为0的值为 string 类型,索引为1的值为 number 类型,同时指定 length 属性的类型字面量为 2,这样在指定一个类型为这个接口 Tuple 时,这个值必须是数组,而且如果元素个数超过2个时,它的length就不是2是大于2的数了,就不满足这个接口定义了,所以就会报错;当然,如果元素个数不够2个也会报错,因为索引为0或1的值缺失。


4. 枚举


TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好。枚举类型使用enum来定义:

enum Roles {
  SUPER_ADMIN,
  ADMIN,
复制代码


上面定义的枚举类型的Roles,它有三个值,TypeScript会为它们每个值分配编号,默认从0开始,在使用时,就可以使用名字而不需要记数字和名称的对应关系了:

enum Roles {
  SUPER_ADMIN = 0,
  ADMIN = 1,
  USER = 2 
const superAdmin = Roles.SUPER_ADMIN;
console.log(superAdmin); // 0
console.log(Roles[1])    // ADMIN
复制代码


除此之外,还可以修改这个数值,让SUPER_ADMIN = 1,这样后面的值就分别是2和3。当然还可以给每个值赋予不同的、不按顺序排列的值:

enum Roles {
   SUPER_ADMIN = 1,
   ADMIN = 3,
   USER = 7 
复制代码


5. any

在编写代码时,有时并不清楚一个值是什么类型,这时就需要用到any类型,它是一个任意类型,定义为any类型的变量就会绕过TypeScript的静态类型检测。对于声明为any类型的值,可以对其进行任何操作,包括获取事实上并不存在的属性、方法,并且 TypeScript 无法检测其属性是否存在、类型是否正确。


我们可以将一个值定义为any类型,也可以在定义数组类型时使用any来指定数组中的元素类型为任意类型:

let value: any;
value = 123;
value = "abc";
value = false;
const array: any[] = [1, "a", true];
复制代码


any 类型会在对象的调用链中进行传导,即any 类型对象的任意属性的类型都是 any,如下代码所示:

let obj: any = {};
let z = obj.x.y.z; // z的类型是any,不会报错
z();               // success
复制代码


需要注意:不要滥用any类型,如果代码中充满了any,那TypeScript和JavaScript就毫无区别了,所以除非有充足的理由,否则应该尽量避免使用 any ,并且开启禁用隐式 any 的设置。


6. void

void 和 any 相反,any 是表示任意类型,而 void 是表示没有类型,就是什么类型都不是。这在 定义函数,并且函数没有返回值时会用到

const consoleText = (text: string): void => {
  console.log(text); 
复制代码


需要注意: void 类型的变量只能赋值为 undefined 和 null ,其他类型不能赋值给 void 类型的变量。


7. never

never 类型指永远不存在值的类型,它是那些 总会抛出异常 根本不会有返回值的函数表达式的返回值 类型,当变量被永不为真的类型保护所约束时,该变量也是 never 类型。

下面的函数,总是会抛出异常,所以它的返回值类型是never,用来表明它的返回值是不存在的:

const errorFunc = (message: string): never => {
   throw new Error(message); 
复制代码


never 类型是任何类型的子类型,所以它可以赋值给任何类型;而没有类型是 never 的子类型,所以除了它自身以外,其他类型(包括 any 类型)都不能为 never 类型赋值。

let neverVariable = (() => {
   while (true) {} 
})();
neverVariable = 123; // error 不能将类型"number"分配给类型"never"   
复制代码


上面代码定义了一个立即执行函数,函数体是一个死循环,这个函数调用后的返回值类型为 never,所以赋值之后 neverVariable 的类型是 never 类型,当给neverVariable 赋值 123 时,就会报错,因为除它自身外任何类型都不能赋值给 never 类型。

基于 never 的特性,我们可以把 never 作为接口类型下的属性类型,用来禁止操作接口下特定的属性:

const props: {
  id: number,
  name?: never
} = {
  id: 1
props.name = null;  // error
props.name = 'str'; // error
props.name = 1;     // error
复制代码


可以看到,无论给 props.name 赋什么类型的值,它都会提示类型错误,这就相当于将 name 属性设置为了只读 。


8. unknown

unknown 是TypeScript在3.0版本新增的类型,主要用来描述类型并不确定的变量。它看起来和any很像,但是还是有区别的,unknown相对于any更安全。

对于any,来看一个例子:


let value: any
console.log(value.name)
console.log(value.toFixed())
console.log(value.length)
复制代码


上面这些语句都不会报错,因为value是any类型,所以后面三个操作都有合法的情况,当value是一个对象时,访问name属性是没问题的;当value是数值类型的时候,调用它的toFixed方法没问题;当value是字符串或数组时获取它的length属性是没问题的。

当指定值为unknown类型的时候,如果没有 缩小类型范围 的话,是不能对它进行任何操作的。总之,unknown类型的值不能随便操作。那什么是类型范围缩小呢?下面来看一个例子:

function getValue(value: unknown): string {
  if (value instanceof Date) { 
    return value.toISOString();
  return String(value);
复制代码


这里由于把value的类型缩小为Date实例的范围内,所以进行了value.toISOString(),也就是使用ISO标准将 Date 对象转换为字符串。

使用以下方式也可以缩小类型范围:

let result: unknown;
if (typeof result === 'number') {
  result.toFixed();
复制代码


关于 unknown 类型,在使用时需要注意以下几点:

  • 任何类型的值都可以赋值给 unknown 类型:
let value1: unknown;
value1 = "a";
value1 = 123;
复制代码


  • unknown 不可以赋值给其它类型,只能赋值给 unknown 和 any 类型:
let value2: unknown;
let value3: string = value2; // error 不能将类型“unknown”分配给类型“string”
value1 = value2;
复制代码


  • unknown 类型的值不能进行任何操作:
let value4: unknown;
value4 += 1; // error 对象的类型为 "unknown"
复制代码

  • 只能对 unknown 进行等或不等操作,不能进行其它操作:
value1 === value2;
value1 !== value2;
value1 += value2;  // error
复制代码


  • unknown 类型的值不能访问其属性、作为函数调用和作为类创建实例:
let value5: unknown;
value5.age;   // error
value5();     // error
new value5(); // error
复制代码


在实际使用中,如果有类型无法确定的情况,要尽量避免使用 any,因为 any 会丢失类型信息,一旦一个类型被指定为 any,那么在它上面进行任何操作都是合法的,所以会有意想不到的情况发生。因此如果遇到无法确定类型的情况,要先考虑使用 unknown。

TypeScript(一) —— 进阶(TypeScript 中的类型、编译选项及使用 webpack 打包 ts 代码)
TypeScript(一) —— 进阶(TypeScript 中的类型、编译选项及使用 webpack 打包 ts 代码)
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
「TypeScript」你必须要知道的 TS 高级技能点 —— Utility Types
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
【TypeScript教程】# 16:ts + webpack + less实现贪吃蛇小游戏
ts(typescript)面向对象之静态成员
在js中,构造函数也是函数,只是特殊的地方在于,构造函数相对于普通函数来说。使用new 的方式来创建,并且构造函数里面是有this的。这个this 的指向是当前构造函数的对象。而普通的函数的this的指向是指向全局window的。
ts(typescript)面向对象之类的抽象类
模板模式:有些方法,所有的子类实现的流程完全一致,只是流程中的某个步骤的具体实现不一致,可以将该方法提取到父类,在父类中完成整个流程的实现(上面代码中的attack()),遇到实现不一致的方法时(把该方法做成抽象方法,字类必须去实现),将该方法做成抽象方法。这种设计模式是大名鼎鼎的 模板模式