TypeScript

类型

String

let stageName: string = 'A Beautiful Vue'

Number

let roomSize: number = 100

Booleans

let isComplete: boolean = false

Arrays

let shoppingList: string[] = ['apple', 'bananas', 'cherries']

Function

let generateFullName = (firstName: string, lastName: string): string => {
  return firstName + ' ' + lastName
}

Object

let person: {
  name: string;
  age: number;
  activeAvenger: boolean;
  powers: string[];
} = {
  name: 'Peter Parker',
  age: 20,
  activeAvenger: true,
  powers: ['wall-crawl', 'spider-sense']
}

Type

什么是类型

定义类型，buttonStyles只能赋值'primary'

type buttonType = 'primary'
let buttonStyles: buttonType = 'primary'

// 会警告
// let buttonStyles: buttonType = 'secondary'

Union Operator

可以定义多个值

type buttonType = 'primary' | 'secondary' | 'success' | 'danger'

interface

可以理解为type，用来定义对象。

type ComicUniverse = 'Marvel' | 'DC'

interface Hero {
	name: string;
	age: number;
	activeAvenger: boolean;
	powers: string[];
	universe: ComicUniverse;
}

类型断言

interface TodoItem {
  label: string
  complete: boolean
}

const futureTodoItem = {} as TodoItem

futureTodoItem.label = 'Install VueDX extension'
futureTodoItem.complete = false

泛型

function createList<CustomType>(item: CustomType): CustomType[] {
    const newList: CustomType[] = []
  
    newList.push(item)
  
    return newList
}

const numberList = createList<number>(123)

function createList<T>(item: T): T[] {
    const newList: T[] = []
  
    newList.push(item)
  
    return newList
}

const stringList = createList<number>(123)