基础语法

JS 已有类型

原始类型：number/string/boolean/null/undefined/symbol。对象类型：object （包括，数组、对象、函数等对象）。

TS 新增类型

联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any 等。

TS数据类型

 1  //number
 2  let num:number = 18  
 3  //string
 4  let name:string = "lff" 
 5  //boolean
 6  let isOk:boolean = true
 7  //undefined
 8  let un:undefined = undefined
 9  //symbol
10  let s:symbol  = Symbol()
11  // null
12  let n:null = null

1  //数组  两种写法
2  let arr1:number[] = [2,4,6]  //推荐使用
3  let arr2:Array<number> = [1,5,8]

联合类型 |

| （竖线）在 TS 中叫做联合类型（由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种）

1  let arr3:(number | string)[] = [2,'str',5,]  //注意小括号
2  let arr4:Array<number | string> = [2,'str',5,]

类型别名 关键字type

类型别名（自定义类型）：为任意类型起别名

1  type Name = (number | string)[]
2  let arr5:Name = [2,'str',5,] 
3  let arr6:Name = [2,'str',5,,'fh']

函数类型

 1  //声明式函数
 2  function addNum(num1: number,num2: number): number {
 3      return num1 + num2
 4  }
 5  console.log(add(2,5));
 6  ​
 7  // 函数表达式
 8  const addNum = (num1:number,num2: number): number => {
 9      return num1 + num2
10  }
11  console.log(add(2,5));
12  ​
13   // 函数表达式  只能用于函数表达式
14  const addNum:(num1:number,num2:number)=>number = (num1,num2) => {
15      return num1 + num2
16  }
17  console.log(add(2,5));

如果函数没有返回值,函数返回值类型为：void

1  let getMsg = (msg:string) :void => {
2      console.log(msg);
3  }
4  getMsg("我要学习")

可选参数 ?

可选参数：在可传可不传的参数名称后面添加 ?（问号）注意：可选参数只能出现在参数列表的最后，可选参数后面不能再出现必选参数。

1  function MyFn(item:(string|number)[] ,start? :number,end? :number) {
2      console.log(item,start,end);
3  }
4  MyFn([14,'fk'],2)

对象类型

 1  let obj: {
 2    name: string
 3    age: number
 4    habby(): void
 5    addNum(num1: number,num2: number):number
 6  } = {
 7    name: "lf",
 8    age: 18,
 9    habby() {
10      console.log("学习");
11    },
12    addNum:(num1,num2)=>{
13        return num1+num2
14    }
15  };
16  console.log(obj.habby());  //void 返回undefined
17  console.log(obj.addNum(1,2));  //3
18  ​

接口

关键字: interface

当一个对象类型被多次使用时，一般会使用接口interface 来描述对象的类型，达到复用的目的

 1  interface MyObj {
 2      name:string
 3      age:number
 4      habby(love:string):void
 5  }
 6  ​
 7  let person1: MyObj = {
 8      name: "lf",
 9      age: 18,
10      habby(love){
11          console.log(love);
12      }
13    };
14  let person2: MyObj = {
15      name: "xxx",
16      age: 28,
17      habby(love2){
18          console.log(love2);
19      }
20    };

接口继承

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用。

 1  interface Person1 {
 2      a:number
 3      b:string
 4  }
 5  let P1:Person1 = {
 6      a:8,
 7      b:'学习',
 8  }
 9  interface Person3 {
10      c(msg:string): void
11  }
12  interface Person2 extends Person1, Person3{}
13  let P2:Person2 = {
14      a:66,
15      b:'玩游戏',
16      c:(msg)=>{
17          console.log(msg);
18      }
19  }

interface（接口）和 type（类型别名）异同点

interface（接口）和type （类型别名）的对比：

• 相同点：都可以给对象指定类型。

• 不同点：

  接口，只能为对象指定类型。

  类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。

元组

元组Tuple

元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

1  let xyz : number[] = [1,5,4,6,8]   //不严谨，因为该类型的数组中可以出现任意多个数字
2  ​
3  let xy :[number,number] = [20,30]
4  let info :[number,string] = [18,'age']  //元素对应类型顺序保持一致

类型推论

TS 的类型推论机制会帮助提供类型

1. 声明变量并初始化时
2. 决定函数返回值时

 1  //初始化值可以省略类型
 2  let age = 18  
 3  let arr = [1,5,'str']
 4  ​
 5  //未赋值不能省略
 6  let name1:string
 7  ​
 8  //可以省略add类型 返回值类型
 9  function add(num1:number,num2:number) {
10  •    return num1+num2
11  }

类型断言

• 使用 as 关键字实现类型断言,关键字 as 后面的类型是一个更加具体的类型
• 有使用关键字 as 和标签 <> 两种方式，因后者会与JSX 语法冲突，建议统一使用 as 来进行类型断言。
• 非空断言 ! 如果编译器不能够去除 null 或 undefined，可以使用非空断言 ! 手动去除

 1  //类型断言
 2  interface Pig {
 3      name: string;
 4      run(): void;
 5  }
 6  interface Fish {
 7      name: string;
 8      swim(): void;
 9  }
10   // <Fish>animal    animal as Fish  两种写法
11  function isFish(animal: Pig | Fish) {
12      if (typeof (animal as Fish).swim === 'function') { 
13          return true;
14      }
15      return false;
16  }
17  ​
18  // 非空断言 !
19  function fixed(name: string | null): string {
20        return name!.charAt(0)  // name 被断言为非空
21  }

字面量类型

• 使用模式：字面量类型配合联合类型一起使用
• 使用场景：用来表示一组明确的可选值列表

1  function getName(name: 'timi' | 'tom' | 'mary'){
2      console.log(name);
3  }
4  getName('timi')  //只能是 timi tom mary 中的参数

枚举

• 枚举成员是有值的，默认为从 0 开始自增的数值
• 我们把枚举成员的值为数字的枚举称为数字枚举 , 也可以给枚举中的成员初始化值
• 字符串枚举：枚举成员的值是字符串
• 枚举是 TS 为数不多的非 JavaScript 类型级扩展（不仅仅是类型）的特性之一 , 其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值（枚举成员都是有值的）

 1  //字符串枚举
 2      enum Direction {Timi='Timi' , Tom='Tom' , Mary='Mary'}
 3      function getName(name:Direction) {
 4       console.log(name);
 5      }
 6      getName(Direction.Tom)  //Tom
 7      getName(Direction.Mary)  //Mary
 8      getName(Direction.Timi)  //Timi
 9      ​
10    //数字枚举
11      enum Love {
12        Play = 2,
13        Read,
14        Sleep
15      }
16      console.log(Love.Play, Love.Read, Love.Sleep); // 2 3 4

any 类型

隐式具有 any 类型的情况：

1 声明变量不提供类型也不提供默认值

2 函数参数不加类型。

注意：因为不推荐使用 any，所以，这两种情况下都应该提供类型

 1  let myInfo:any = {
 2  •    name:'lf',
 3  •    age:18,
 4  •    habby(){
 5  •        console.log('睡觉');
 6  •    }
 7  }
 8  myInfo.name = 'zero'
 9  // 当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示
10  myInfo()  //不报错

typeof 操作符

• typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型

• typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文

 1  let myInfo = {
 2      a:'lf',
 3      b:18,
 4  }
 5  ​
 6  function getInfo(info:{a:string,b:number}) {
 7      console.log(info);
 8  }
 9  getInfo(myInfo)
10  ​
11  function getInfo2(info:typeof myInfo){
12      console.log(info);
13  }