TypeScript核心语法合集

一、类型注解

变量后面约定类型的语法,就是类型注解

约定了什么类型,变量赋值就是什么类型,不符合就会报错

TypeScript核心语法合集_第1张图片 

注:这里需要借助VSC插件才能直接在代码后面显示错误提示 

二、原始数据类型 

review:js原有数据类型

1.简单数据类型:number、string、boolean、undefined、null、symbol、bignit

2.复杂数据类型:对象、函数、数组

ts中的原始类型有以下5种(也就是常用的js前5种简单数据类型,书写方式和js相同) :

number、string、boolean、undefined、null

书写方式简单,和js相同:

const num: number = 1
const str: string = '字符串'
const show: boolean = true
const u: undefined = undefined
const n: null = null

三、数组类型

有两种写法:

let arr: number[] = [1, 2, 3, 4]  // 常用

let newArr: Array = [5, 6, 7, 8]

四、函数类型

函数类型就是给函数的参数和返回值指定类型,有普通函数和箭头函数两种写法:

1.普通函数写法:

function getNum(a: number, b: string): number {
  return a
}

2.箭头函数写法:

// 和普通函数一样的写法
const getstr = (a: number, b: string): string => {
  return '字符串'
}
// 另一种写法
const get = (a: number, b: string) => number => () => {
  return 10086
}

五、void类型

(1)函数没有返回值(或者不确定函数有没有返回值),定义函数返回值类型时为void

(2)函数没有返回值且没有定义函数返回值的类型,默认为void

// 1.普通函数
function getC(): void { }
// 2.箭头函数
const getCount: () => void = () => { }

六、对象类型

TS 的对象类型,其实就是描述对象属性和方法的类型

const obj: {
  name: string
  age: number
  city: string
  fn: (a: number) => number
  newFn(b: string): string
} = {
  name: '小金子',
  age: 18,
  city: '上海',
  fn: (a) => {
    return 10086
  },
  newFn(b) {
    return '字符串'
  }
}

七、联合类型

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

(1) 一个数据可以有多种类型

const total: number | string | boolean = 1
const total2: number | string | boolean = '字符串'
const total3: number | string | boolean = true

(2)数组里面有多种数据类型

const arr: (number | string | boolean | [] | {})[] 
= [1, '字符串', true, [1, 2, 3], { id: 1, name: 'gold' }]

八、类型别名 

1.用type关键字给类型起名字

2.遵循大驼峰命名规范,类似于变量

3.写法和类型注解保持一致

type N = number
type S = string
type F = (a: number, b: string) => number

type Tinfo = {
  id: N;
  name: S;
  hobby: S[];
  family: {
    mather: S;
  };
  fn: F
}[]

const obj: Tinfo = [{
  id: 1,
  name: '小金子',
  hobby: ['sing', 'dance'],
  family: {
    mather: 'mom'
  },
  fn: (a, b) => {
    return 10086
  }
}]

九、接口interface

作用:接口声明是命名对象类型的另一种方式,interface和类型别名的关键字type作用一样

interface T {
  id: number
  name: string,
  fn: (a: string) => string
}

const obj: T = {
  id: 1,
  name: '小金子',
  fn: (a) => {
    return 'res'
  }
}

十、继承

1.接口interface的继承:通过关键字extends达到类型复用

interface T {
  id: number
  fn: (a: string) => string
}

// interface的继承-->Y继承T
interface Y extends T {
  userInfo: {
    id: number
    city: string
    img: string[]
  }
}

const obj: Y = {
  id: 1,
  fn: (a) => {
    return 'res'
  },
  userInfo: {
    id: 1,
    city: '北京',
    img: ['1.jpg', '2.jpg']
  }
}

2.type的继承: 通过交叉类型&实现类型复用

type T = {
  id: number
  fn: (a: string) => string
}

// type的继承
type Y = T & {
  userInfo: {
    id: number
    city: string
    img: string[]
  }
}

const obj: Y = {
  id: 1,
  fn: (a) => {
    return 'res'
  },
  userInfo: {
    id: 1,
    city: '北京',
    img: ['1.jpg', '2.jpg']
  }
}

注:interface和type的区别: 

type interface
支持的数据类型 所有数据类型 只支持对象类型
类型复用的方式 通过交叉类型& 通过关键字extends
能否定义相同变量 相同变量不可重复定义 相同变量重复定义会合并
写法 变量名后 等号 变量名后 等号

3.通过extendstypeof类型实现继承

// typeof 后面接值 返回的是类型
const aa = { id: 1 }
// 这里代码的意思是:Q继承了变量aa的类型{ id:number }
function getList2(a: Q): Q {
  return a
}
getList2({ id: 5 })

4.通过extendskeyof类型实现继承

// keyof 后面接的是类型 返回的是字面量类型
const aa = { id: 1 }
// 这里代码的意思是:通过typeof获取aa的类型为{ id: number }
// keyof获取{ id: number }对象中的键名作为字面量类型,也就是'id'
// 最后把字面量类型'id'再继承给Q
function getList3(a: Q): Q {
  return a
}
getList3('id')

 十一、类型推断

简单数据类型能省略就省略,在VSC中鼠标点到变量上就有类型推断提示

TypeScript核心语法合集_第2张图片

十二、字面量类型 

1.使用js字面量作为变量类型,这种类型就是字面量类型

TypeScript核心语法合集_第3张图片

思考:str1和str2分别是什么类型? 

// str1 是一个变量 类型为string
let str1 = 'hello';
// str2 是一个常量 类型为字面量hello
const str2 = 'hello';

 2.字面量类型和联合类型一起使用,可以用来表示明确可选的

type gender = '男' | '女'
const man:gender = '男'
let woman:gender = '女'

十三、any类型 

作用:逃避TS的类型检查

1.隐式any:声明变量不给类型或初始值,函数参数不给类型或初始值

let a;
const fn = (n) => {}

2.显示any:当变量的类型指定为 any 的时候,不会有任何错误,也不会有代码提示,TS会忽略类型检查,但将来可能会有错误,所以一般不建议用any类型

const n: any = 1
let obj: any = '字符串'
let obj1: any = { id : 1}
obj1.name='小金子'
let fn: any = () => { }

 十四、类型断言

作用:通过关键字 as 来指定更具体的类型,就是类型断言






 十五、泛型

定义类型别名后加上<类型参数> 就是泛型语法, 使用的时候需要传入具体的参数

具体使用:

1.<> 里面是一个变量,可以随意命名,建议遵循大驼峰命名

2.和类型别名配合,在类型别名后加上泛型语法,然后类型别名内就可以使用这个类型参数

(1)泛型之类型别名

// 泛型别名
type user = {
  id: number,
  name: string
}

type info = {
  city: string,
  img: string[]
}

// x,y相当于两个参数
type userInfo = {
  message: x,
  show: boolean,
  address: y
}

// 定义新类型时传入类型参数就可以复用
type example = userInfo

 (2)泛型之接口(用法和上面一致)

// id是一个参数
interface IdFn {
  id: () => id;
  id1: () => id[];
}

// 使用的时候,传入类型
const idObj: IdFn = {
  id() { return 1 },
  id1() { return [1, 2] },
};

const idObj: IdFn = {
  id() { return '1' },
  id1() { return ['1', '2'] },
};

(3)泛型之函数

function getList(a: Q): Q {
  return a
}

getList(1)

getList('1') // Q不传值会自动进行类型推断

十六、枚举

关键字:enum

作用:表示一组明确可选的值,和字面量类型配合联合类型类似。

注意:

(1)通过枚举访问其成员,成员的值默认从 0 开始自增

(2)如果指定了某个成员的值为一个具体数值,其他成员的值从该成员的值开始自增

(3)如果指定了成员的值为字符串,所有的成员的值都要为字符串

(4)枚举的值经常需要在运行的时候使用,d.ts 不参与运行

enum Day {
  sunday,
  monday,
  tuesday,
  wednesday,
  thursday,
  friday,
  saturday
}

function getDay(day: Day) {
  return Day
}

getDay(Day.sunday)

十七、是否可选

Required 转换为全部必须

Partial 转换问全部可选

export type Consult = {
  id: string
  type: ConsultType
  illnessType: 0 | 1
  depId: string
  illnessDesc: string
  illnessTime: IllnessTime
  consultFlag: 0 | 1
  pictures: Image[]
  patientId: string
  couponId: string
}

// 全部可选
export type PartialConsult = Partial

 十八、取出和排除某些属性

Pick 可以从一个对象类型中 取出某些属性

Omit 可以从一个对象类型中 排出某些属性

type Person = {
  name: string
  age: number
}
// 类型PickPerson只包含Person中的age
type PickPerson = Pick
type Person = {
  name: string
  age: number
  id:number 
  address: string
}
// 类型OmitPerson排除Person中的age,其他都包含
type OmitPerson = Omit

你可能感兴趣的:(ts,typescript,vue.js,es6,前端)