TypeScript入门语法（上）

我们都知道TypeScript是JavaScript的超集，即将出炉的vue3.0也加强了对TS（以下都简称TS）的支持。但是我好像还不太了解TS呢。你是否和我一样呢？一起学起来吧~

一、TS与JS的区别

TS与JS的区别

二、基础类型：

1、Boolean

let isDone:boolean=false;

2、Number

let count:number=10;

3、String

let name:string=‘some’;

4、Array

let list:Array<number>=[1,2,3];

5、Enum枚举

可以定义一些带名字的常量，TS支持数字的或基于字符串的枚举

（1）数字枚举

enum Direction{
    NORTH,
    SOUTH,
    EAST,
    WEST,
}

默认NORTH初始值为0，其余成员从1开始自动增长。也可以设置NORTH初始值为3，NORTH=3等。

（2）字符串枚举

enum Direction {
NORTH=“NORTH”,
SOUTH=“SOUTH”,
EAST=“EAST”,
WEST=“WEST”,
}

（3）异构枚举——数字和字符串混合

enum Enum{
    A,
    B,
    C = “C”,
    D = 8
}

6、Any类型

任何类型都能被归为Any类型，Any类型是全局超级类型。

let notSure: any=55;
notSure=“Some”;
notSure=false;

7、Unkown类型

所有类型都可以赋值给Any/Unkown类型。
unKown类型只能被赋值给Any类型或Unkown类型

8、Tuple类型

元组：单个变量中存储不同类型的值，元组是TS的特有类型，工作方式类似数组，可以通过下标访问元素。

let tupleType:[string, boolean];
tupleType=[“some”, true];

9、void类型

与any类型相反，表示没有任何类型，比如一个函数没有返回值时，会返回类型为void
它的值只能是undefined或null

10、Null和undefined类型

11、never类型

type Foo = string | number;
function aaa(foo: Foo){
    if(typeof foo===“string”){
    }else if(typeof foo===“number”){
    }else{
        const check:never=foo;
    }
}

如果Foo增加了一个boolean类型，有没有修改aaa方法的流程，如果使用了never类型，编译时不会报错。所以，never类型可以避免出现新增了联合类型没有对应的实现，可以写出类型绝对安全的代码。

三、断言：

类似类型转换，但不进行数据检查和解构。

1、尖括号语法

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

2、as语法

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

四、类型守卫

in、typeof、instanceof、自定义类型保护的类型谓词

五、联合类型和类型别名

1、联合类型

const sayHello = (name: string | undefined)=>{….}

2、可辨识联合

（1）可辨识：每个元素都有一个单例类型属性。比如三个接口中都包含一个vType属性，

（2）联合类型

（3）类型守卫

3、类型别名

六、交叉类型

七、函数

1、箭头函数

2、参数类型和返回类型

function createUserId(name: string, id: number): string {
  return name + id;
}

3、函数类型

4、可选参数及默认参数

用?定义可选参数

5、剩余参数

6、函数重载

使用相同名称和不同参数数量或类型创建多个方法。

function add(a: number, b: number): number;
function add(a: string, b: number): string;
function add(a: Combinable, b: Combinable) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

成员方法重载如下：

class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: number): string;
  add(a: Combinable, b: Combinable) {
    if (typeof a === "string" || typeof b === "string") {
      return a.toString() + b.toString();
    }
    return a + b;
  }
}

const calculator = new Calculator();
const result = calculator.add("Semlinker", " Kakuqo");

重载时，一定要把最精确的定义放在最前面，因为编译时会查找重载列表，尝试使用第一个重载定义。
（待续...）

喜欢作者，请关注公众号【CC前端手记】哦~