TypeScript 的基础语法

我们来接着看TypeScript 的基础语法

TypeScript 语法

1. 类型注解

类型注解是变量后面约定类型的语法，用来约定类型，明确提示

typescript 复制代码

// 约定变量 age 的类型为 number 类型
let age: number = 18;
age = 19;

TS数据类型

TS 常用类型：

JS 已有类型
- 简单类型，number string boolean null undefined
- 复杂类型，对象数组函数
TS 新增类型
- 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型等

简单类型

完全按照 JS 的类型来书写即可

typescript 复制代码

let age: number = 18;
let myName: string = '王小明';
let isEating: boolean = false;
let nullValue: null = null;
let undefinedValue: undefined = undefined;

复杂类型

数组类型

typescript 复制代码

// 写法一：（推荐）
let numbers: number[] = [1, 3, 5];
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'];

对象类型

typescript 复制代码

let obj : {name:string,age:number} = {name:'jack',age:18}

let person: {
  name: string;
  sayHi(): void;
} = {
  name: 'jack',
  sayHi() {},
};

额外内容：

对象中的函数是箭头函数时

typescript 复制代码

let person: {
  name: string
  sayHi: () => void
} = {
  name: 'jack',
  sayHi() {},
};

对象中的属性是可选时,关键字是 ? ，例如axios中的get请求method就是可以省略

typescript 复制代码

// axios({url,method}) 如果是 get 请求 method 可以省略
const axios = (config: { url: string; method?: string }) => {};

函数类型

typescript 复制代码

// 普通函数
function add1(a: number, b: number): number {
  return 1
}
// 函数表达式
const arr5 = function (a: number, b: number): number {
  return a + b
}

const add = (a: number, b: number): number => {
  return 1
}
// 箭头函数
const add2: () => string = () => {
  return '1'
}
const add3: (a: number, b: number) => number = (a, b) => {
  return 1
}

TS新增类型

1.联合类型

类型与类型之间使用 | 连接，代表类型可以是它们当中的其中一种，这种类型叫：联合类型

当数组中既有 number 又有 string 类型时，例如 arr=['1',a] 这种，就要用到| 来连接了，写法是

typescript 复制代码

let arr:( number | string)[]=['1',a]

再举个例子：

typescript 复制代码

let arr=[
  {
    id: 1,
    name: 'jack',
    hobby: ['唱歌'],
    family: {
      mather: 'jack妈妈'
    }
  },{
    id: 2,
    name: 'rose',
    hobby: ['跳舞'],
    family: {
      mather: 'rose妈妈'
    }
  }
]

2.自定义类型（类型别名）type

类型别名:

type 类型别名 = 具体类型 基本语法
定义类型别名，遵循大驼峰命名规范，类似于变量
使用类型别名，与类型注解的写法一样即可
当同一类型（复杂）被多次使用时，可以通过类型别名，简化 该类型的使用

typescript 复制代码

let arr: ( number | string )[] = [ 1, 'a', 4]

// 使用类型别名写法: type 类型别名 = 具体类型
type CustomArr = (number | string)[];
let arr: CustomArr = [1, 'a', 4];
let arr2: CustomArr = [2, 'b', 8];

2.1 type的交叉类型

使用 & 可以合并连接的对象类型，也叫：交叉类型

typescript 复制代码

// 使用 type 来定义 Point2D 和 Point3D
type Point2D = {
  x: number;
  y: number;
};

// 使用 交叉类型 来实现接口继承的功能：
// 使用 交叉类型 后，Point3D === { x: number; y: number; z: number }
type Point3D = Point2D & {
  z: number;
};

let o: Point3D = {
  x: 1,
  y: 2,
  z: 3,
};

3. 接口 interface

interface 后面是接口名称，和类型别名的意思一样。
指定 接口名称 作为变量的类型使用。
接口的每一行只能有 一个 属性或方法，每一行不需要加分号。
使用 extends 实现接口继承，达到类型复用。

typescript 复制代码

// 通过interface定义对象类型
interface Person {
  name: string;
  age: number;
  sayHi: () => void;
}
// 使用类型
let person: Person = {
  name: 'jack',
  age: 19,
  sayHi() {},
};

3.1 接口的extends 继承

接口继承的语法：interface 接口A extends 接口B {}
继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

typescript 复制代码

interface Point2D {
  x: number;
  y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {
  z: number;
}
// 继承后 Point3D 的结构：{ x: number; y: number; z: number }

3.2 type和interface 的相同点与区别

关键的区别在于不能重新打开类型以添加新属性，而接口总是可扩展的。

interface	type
支持：对象类型	支持：对象类型，其他类型
复用：可以继承	复用：交叉类型

它们都可以定义对象类型
它们都可以复用，interface 使用 extends , type 使用 &
type 不能重复定义，interface 可以重复定义但是会合并

详解不同的点：

type 不可重复定义

typescript 复制代码

type Person = {
  name: string;
};
// 标识符"Person"重复  Error
type Person = {
  age: number;
};

interface 重复定义会合并

typescript 复制代码

interface Person {
  name: string;
}
interface Person {
  age: number;
}
// 类型会合并，注意：属性类型和方法类型不能重复定义
const p: Person = {
  name: 'jack',
  age: 18,
};

4. 类型推断

在 TS 中存在类型推断机制，在没有指定类型的情况下，TS 也会给变量提供类型。

typescript 复制代码

// 函数返回值的类型被自动推断为：number
const add = (num1: number, num2: number) => {
  return num1 + num2;
};

将来在开发项目的时候，能省略类型注解的地方就省略，充分利用TS推断 的能力，提高开发效率。
如果你不知道类型怎么写，可以把鼠标放至变量上，可以通过 Vscode 提示看到类型

5. 字面量类型

使用 js字面量 作为变量类型，这种类型就是字面量类型，使用字面量类型更加精确、严谨

typescript 复制代码

let str1 = 'Hello TS';
const str2 = 'Hello TS';
// str1的字面量是string   str2的字面量是'Hello TS'  
// 因为const声明的变量不能再改变，而str2 是 const 声明的，值只能是 Hello TS，所以类型只能是 Hello TS

再例如性别只有男和女

typescript 复制代码

type Gender = '男' | '女'
let gender: Gender = '男'
gender = '女'

字面量类型配合联合类型来使用，表示：一组明确的可选的值

typescript 复制代码

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，会有类型提示：
changeDirection('up')

6. any

any 类型的作用是逃避 TS 的类型检查

显式any情况：当变量的类型指定为 any 的时候，不会有任何错误，也不会有代码提示，TS会忽略类型检查

typescript 复制代码

let obj: any = { age: 18 }
obj.bar = '100'
const n: number = obj
console.log('n',n);

隐式any的情况：声明变量不给类型或初始值，函数参数不给类型或初始值

typescript 复制代码

// 声明变量不给类型或初始值
let a;
// 函数参数不给类型或初始值
const fn = (n) => {}

7. 类型断言 -as

一种将变量或表达式的类型强制转换为开发者指定的类型的方式

使用 as 关键字实现类型断言也可以使用尖括号（<>）语法进行类型断言（不推荐）

关键字 as 后面的类型是一个更加具体的类型

使用场景：消除类型检查错误、处理联合类型、处理any类型

这里，我们将一个any类型的变量str断言为string类型，并使用它的length属性获取字符串的长度。

typescript 复制代码

// 1. 使用尖括号语法的类型断言：
let str: any = "hello";
let len1: number = (<string>str).length;
// 2.使用as语法的类型断言：
let str: any = "hello";
let len2: number = (str as string).length;

8.泛型

在TypeScript中，泛型是一种创建可复用 代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类型（types）、接口（interfaces）、函数类型等能力的非常可靠的手段。

8.1 泛型别名

typescript 复制代码

// 对后台返回的数据进行类型定义
type User = {
    name: string;
    age: number;
}

type Goods = {
    id: number;
    goodsName: string;
}

type Data<T> = {
    msg: string;
    code: number;
    data: T
}

// 使用类型
type UserData = Data<User>
let userData: UserData = {
    msg: 'success',
    code: 200,
    data: {
        name: 'jack',
        age: 18
    }
}
console.log(userData.data.name);

type GoodsData = Data<Goods>
let goodsData: GoodsData = {
    msg:'success',
    code: 200,
    data: {
        id: 1,
        goodsName: 'iphone'
    }
}
console.log(goodsData.data.goodsName);

泛型：定义类型别名后加上<类型参数> 就是泛型语法，使用的时候传入具体的类型即可
<T> 是一个变量，可以随意命名，建议遵循大驼峰即可。
和类型别名配合，在类型别名后加上泛型语法，然后类型别名内就可以使用这个类型参数
泛型可以提高类型的复用性和灵活性

8.2 泛型接口

在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口，接口中所有成员都可以使用类型变量。

typescript 复制代码

// 对象，获取单个ID函数，获取所有ID函数，ID的类型肯定是一致的，但是可能是数字可能是字符串
interface IdFn<T> {
  id: () => T;
  ids: () => T[];
}

const idObj: IdFn<number> = {
  id() { return 1 },
  ids() { return [1, 2] },
};

8.3 泛型函数

typescript 复制代码

export { }
// 泛型---函数
type F1 = {
  id: number
}

// 普通函数
function fn1<T>(a: T, b): T {
  return a + b
}
fn1<number>(1, 2)

// extends
function fn2<T extends F1>(a: T): T {
  return a
}
fn2({ id: 1 })

9.枚举型-enum

typescript 复制代码

enum Day {
  sunday,
  monday,
  tuesday,
  wednesday,
  thursday,
  friday,
  saturday
}
function day(Day: Day) {
  console.log(Day);

}
day(Day.saturday)

// 可以给初始值,不给就是从0开始
enum num {
  one = 1,
  two,     //2
  three,    //3
  four      //4
}