typeScript-01安装及类型

安装及编译

• npm i typescript -g

  • 全局安装ts
  • 若是出错可前加sudo尝试

• npm i -g ts-node

  • 全局安装ts-node
  • 目的是帮助我们在不需要编译成js的前提下就可以直接执行ts代码

• tsc --init 生成tsconfig.js配置文件

• 在项目下新建index.ts文件

  const a: string = "hello world";
  console.log(a);
  

• 终端输入tsc index.ts

  • 会自动生成一个inex.js文件

    var a = 'hello world';
    console.log(a);
    

• 终端输入ts-node index.ts

  • 输出结果hello

• tsc --watch index.ts

  自动编译成js

TS 类型

布尔类型

const flag:boolean=false

Number类型

const num:number=1

String类型

const name:string='tudou'

Enum类型

• 枚举，一一列举出来，例如周一到周末，春夏秋冬，错误码等

  enum Color {
      RED,
      GREEN,
      BLUE
    }
    const green:Color=Color.GREEN;
    console.log(green); //1
  
    enum Color {
      RED=10,
      GREEN,
      BLUE
    }
    const green:Color=Color.GREEN;
    console.log(green);  //11
    
    enum Week {
        Mon = '周一' ,
        Tus = '周二' ,
        Wed = '周三'
    }
  
    const wed:Week =Week.Wed
    console.log(wed); //周三
    
    
  const enum  Seasons {
      Spring,
      Summer,
      Autumn,
      Winter
  }
  const seasons:Seasons[]=[Seasons.Spring,Seasons.Summer,Seasons.Autumn,Seasons.Winter]
  
  var seasons = [0 /* Spring */, 1 /* Summer */, 2 /* Autumn */, 3 /* Winter */]; //编译后结果
  
  
  

数组类型

const flag1:nmmber[]=[1,2,3]
const flag2:Array<number> = [1,2,3]

元组类型

• 元组表示一个已知数量和类型的数组,前后类型要对应

  const flag : [steing,number] =[ 'hello' , 1]
  

Symbol类型

• 唯一类型

• 在使用Symbol时必须添加编译辅助库，需要在tsconfig.json的libs上加上ES2015 Symbol的值是唯一不变的

  const sym1 = Symbol("hello");
  const sym2 = Symbol("hello");
  console.log(Symbol("hello") === Symbol("hello")); //false 
  

任意类型 （any)

• 任何类型
• 不推荐使用，太多使用失去了ts的意义
• 一般使用场景
  • 第三方库没有提供类型文件
  • 数据结构太复杂难以定义

const flag:any =document.getElementById('root')

null和undefined

let u:undefind = undefind
let n:null = null

Unkown类型

• Unkown和any的主要区别是Unkown类型会更加严格

• 在对Unkown类型的值执行大多数操作之前，我们必须进行某种形式的检查

• 对any类型的值进行操作之前不必进行任何检查

• 所有类型都可以被视为Unkown

• Unkown类型只能被赋值给any类型和unkown类型本身，any什么都可以分配和被分配

  let value: unknown;
  
  value = true; // OK
  value = 42; // OK
  value = "Hello World"; // OK
  value = []; // OK
  value = {}; // OK
  
  let value1: unknown = value; // OK
  let value2: any = value; // OK
  let value3: boolean = value; // Error
  let value4: number = value; // Error
  let value5: string = value; // Error
  let value6: object = value; // Error
  

void类型

• 无返回值类型

  function hello(name:string):void{}
  

never类型

• 用于总会操出异常

• 或不会有返回值的函数表达式

• 或箭头函数表达式的返回值类型

  function neverReach():never {
      throw new Error('an error')
  }
  

• never 和 void 的区别 void 可以被赋值为 null 和 undefined 的类型。never 则是一个不包含值的类型。拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。

BigInt 大数类型

• 使用 BigInt 可以安全地存储和操作大整数

• 需要 tsconfig.json配置。ES2020

    "target": "es2020",  
  

• number 和 BigInt 类型不一样 不兼容

  const max1 = Number.MAX_SAFE_INTEGER; // 2**53-1
  console.log(max1 + 1 === max1 + 2); //true
  
  const max2 = BigInt(Number.MAX_SAFE_INTEGER);
  console.log(max2 + 1n === max2 + 2n); //false
  
  let foo: number;
  let bar: bigint;
  foo = bar; //error
  bar = foo; //error
  

object, Object 和 {} 类型

• 用于表示非原始类型

  let objectCase: object;
  objectCase = 1; // error
  objectCase = "a"; // error
  objectCase = true; // error
  objectCase = null; // error
  objectCase = undefined; // error
  objectCase = {}; // ok
  

• Object 表示永远toString、hasOwnProperty方法的类型都可付给 Object（严格模式下 null 和 undefined 不可以）

• 空对象 和Object一样，表示原始类型和非原始类型

  let ObjectCase: Object; 
  //let ObjectCase:{}
  
  ObjectCase = 1; // ok
  ObjectCase = "a"; // ok
  ObjectCase = true; // ok
  ObjectCase = null; // error
  ObjectCase = undefined; // error
  ObjectCase = {}; // ok
  

类型推论

• 定义时没有赋值就会推论出any类型

• 如果定义的时候就赋值就能利用到类型推论

  let flag; //推断为any
  let count = 123; //为number类型
  let hello = "hello"; //为string类型
  

联合类型

• 取值可以为多种类型中的一种

• 未赋值时联合类型上只能访问两个类型共有的属性和方法

  let name: string | number;
  name = 1;
  console.log(name.toFixed(2)); //1.00
  name = "hello";
  console.log(name.length); //hello
  

类型断言

• 可以用来手动指定一个值的类型。
• 语法
  • 值 as 类型
  • <类型>值
  • 以上两种方式虽然没有任何区别，但是尖括号格式会与 react 中 JSX 产生语法冲突，因此我们更推荐使用 as 语法

非空断言

• 在上下文中当类型检查器无法判断类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非null 和undefined类型

  let flag:null|undefined|string;
  flag!.toString() //ok
  flag.toString() //error
  

字面量类型

• ts支持三种字面量类型：字符串、数字、布尔

  let flag1: "hello" = "hello";
  let flag2: 1 = 1;
  let flag3: true = true;
  

类型别名

• 给类型起名字

  type flag = string|number
  function hell(value :flag){}
  

交叉类型

• 多个类型合并为一个类型，通过&运算符将现有的多种类型叠加到一起成为一种类型

  type Flag1 = { x: number };
  type Flag2 = Flag1 & { y: string };
  
  let flag3: Flag2 = {
    x: 1,
    y: "hello",
  };
  

类型保护

• 类型保护就是一些表达式，他们在编译的时候就能通过类型信息确保某个作用域内变量的类型 其主要思想是尝试检测属性、方法或原型，以确定如何处理值

typeof保护类型

function double(input: string | number | boolean) {
  if (typeof input === "string") {
    return input + input;
  } else {
    if (typeof input === "number") {
      return input * 2;
    } else {
      return !input;
    }
  }
}

in关键字

interface Bird {
  fly: number;
}

interface Dog {
  leg: number;
}

function getNumber(value: Bird | Dog) {
  if ("fly" in value) {
    return value.fly;
  }
  return value.leg;
}

instabceof类型保护

class Animal {
  name!: string;
}
class Bird extends Animal {
  fly!: number;
}
function getName(animal: Animal) {
  if (animal instanceof Bird) {
    console.log(animal.fly);
  } else {
    console.log(animal.name);
  }
}

自定义类型保护

• 通过type is xxx这样的类型谓词来进行类型保护

  function isObject(value: unknown): value is object {
    return typeof value === "object" && value !== null;
  }
  
  function fn(x: string | object) {
    if (isObject(x)) {
      // ....
    } else {
      // .....
    }
  }
  

• value is object就会认为如果函数返回 true 那么定义的 value 就是 object 类型