Typescript基础使用

1.基础数据类型

//1.ts 中冒号后面的都是类型
const str: string = 'hello'
const num: number = 123
const boolean: boolean = true
let n:null = null
let u:undefined = undefined

//2.联合类型
let age: string｜number = 1
age = '12'

//3.数组 对象 函数
const arr: number[] = [1,2,3] //数组的元素全为数字类型

//4.元组
const tuple: [string, number] = ['zhen', 1] //限制为数组类型且元素只能为两个，一个字符串一个数字类型

//5.枚举
enum USER_ROLE {
  USER,
  MANAHGER,
  ADMIN
}
console.log(USER_ROLE.USER)  //0

enum USER_ROLE {
  USER: 'user',
  MANAHGER: 'mananger',
  ADMIN: 'admin'
}
console.log(USER_ROLE.USER)  //user

//6.any 
const array:any = [{},123,'zhen']

//7.object类型 - 非原始数据类型
const create = (obj:object) => {}
create({})
create([])
create(function(){})

2.接口（对象类型）

//1.用来描述对象的形状 interface
interface ISchool {
  name: string,
  readonly age: number, //只读不可修改
  address?: string      //可选属性
}
  
let school:ISchool = {
  name: 'zhen',
  age: 12,
  address: '深圳市'
}
  
//2.接口可以扩展
interface IZhen extands ISchool {
  type: string //继承了ISchool并且有type属性为string类型
  [xxx:string]: any //*任意类型*
}

let zhen: IZhen = {
  ...school,
  type: 'web'，
  a: 1,
  b: '123'
}
  
//3.类型断言 - 表示这个对象就是这样一个类型
let school2: ISchool = {
  name: 'zhen',
  age: 12,
  address: '深圳市',
  lessons: ['vue','react']
}
//上面的方式会报错因为ISchool没有申明lessons属性，应该使用断言
let school2: ISchool = （{
  name: 'zhen',
  age: 12,
  address: '深圳市',
  lessons: ['vue','react']
}）as ISchool

3.函数

//1.函数主要关心返回值和参数
function sum (a: string, b:string): string {
  retrun a + b
}
sum('a', 'b')

//2.通过表达式来定义
let sum = (a:number, b: number):number => a + b
sum(1,2)

//3.声明函数类型(用于类型提示)
type Sum1 = ((aa:number, bb: number) => number) | string //返回值可以是number或者string

interface Sum2 {
  (aa:number, bb: number) : number
}

//两种函数定义的区别 
//1.interface可以继承可以被类来实现
//2.type仅仅是一个别名，一般在定义联合类型，定义临时变量时可以使用
let sum: Sum1 = (a:number, b: number):number => a + b
let sum: Sum2 = (a:number, b: number):number => a + b

4.泛型

//1.用来在代码执行时传入的类型，来确定结果
function createArray (len,value) {
  let result = []
  for(let i = 0;i < len; i ++){
    result.push(value)
  }
  return result
}

let arr = createArray(1,'hello')
//如果没有声明泛型，arr[0]是字符串 arr[0].xxx 没有字符串方法的提示
//所以要使用泛型，来确定结果类型
function createArray <T> (len:number, value: T) :T[] {
  let result = []
  for(let i = 0;i < len; i ++){
    result.push(value)
  }
  return result
}
let arr = createArray(1,'hello') //因为value:T 可以推导出T为String类型，所以函数结果为T[]

//2.多个泛型 - 元组的交换 [string,number] = [number,string]
const swap = <T,K>(tuple:[T,K]):[K:T] => {
  return [tuple[0],tuple[1]]
}
swap<number,number>([1,2]) //泛型T跟K可以交换类型