TypeJScript基础

安装typescript包

npm install -g typescript

或者

yarn global add typescript

建议进入淘宝镜像下载，yarn 试了好几次 都不好使
 //设置镜像为taobao。
npm config set registry https://registry.npm.taobao.org
//设置镜像为npm官方
npm config set registry https://registry.npmjs.org
//查看配置
npm config get registry 

使用ts工具编辑成ES5

新建一个.ts的文件 =>

在终端内输入命令 tsc 文件名 =>

会得到一个 文件名.js的文件

但这样每次编辑完ts文件后都需要重新

也可以在终端中输入 tsc -watch 任务名 (一直监视文件内容的变化)

可以自动更新

ts中的数据类型

布尔型

let flag: boolean = true
// flag = "sss" 报错
flag = false //正确

数字类型

let num: number = 123
console.log(num)
num = 12.3
console.log(num)

字符串类型

let str: string = "this is string"
str = "Nihao"
console.log(str)

数组类型

//第一种 
let arr: number[] = [1, 2, 3, 4, 5]
// let arr:number[]=[1,2,3,4,false] 错误写法
console.log(arr)

let atrr: string[] = ['this', 'is', 'a', 'arr']
console.log(atrr)
//第二种 
let arrs: Array<number> = [1, 2, 5, 4, 7]
console.log(arrs)
let arrd: Array<string> = ["this", "is", "a", "str", "array"]
console.log(arrd)

//第三种 利用any
let arr3: any[] = [1, 2, "你好"]
console.log(arr3)

元组类型

属于数组的一种,可以定义数组中每一个值的类型

let arrR: [number, string, boolean] = [12, "niha", true]

枚举类型

用来判断一些有特殊含义的文字

比如:用0代表已支付,1代表未支付 会弄不清具体0,1的语义(含义)

语法 : enum 枚举名 {标识符 = 整形常数, 标识符 = 整形常数 ……}

enum Flages { success = 1, error = -1 }
let f: Flages = Flages.success
console.log(f)
console.log(Flages.error)

enum Color { red, blue, yellow }
let c: Color = Color.red
console.log(c)

enum Color1 { red, blue = 5, yellow }
let d: Color1 = Color1.yellow
console.log(Color1.red)//0
console.log(d)//6

任意类型 any

let any: any = 123
any = "nihao"
console.log(any)

任意类型的使用场景

在获取元素节点时,元素节点是个对象,对象就不能在进行修改样式等操作 就需要定义个任意类型

// let div = document.querySelector('#div')//会报错
let div: any = document.querySelector('#div')
div.style.color = 'red'

null 和 undefined 其它数据类型

undefined

let count: number;
// console.log(count) //定义未赋值就会报错

let count1: undefined
console.log(count1)
// 用| 代表了或 如果赋值就传入否则是undefined
let count2: number | undefined
console.log(count2)
count2 = 123
console.log(count2)

null

let nu1: null
// console.log(nu1)// 报错
nu1 = null
console.log(nu1)

一个元素可能是number 可能是 null 可能是undefined

let count3: number | null | undefined

console.log(count3)
count3 = 5
console.log(count3)

void类型

typescript中的void表示没有任何类型,一般用于定义方法的时候没有返回值

大多数是用在表示方法没有返回任何类型

function run2(): void {
  console.log("run")
}
run2()

//如果有返回值 返回什么指定什么类型
// function run(): number {
// return 1
// }
// run()

never类型

是其他类型 (包括null和undefined) 的子类型,代表从不会出现的值

声明never的变量只能被never类型所赋值

let abc: never
abc = (() => { throw console.error("有个错误") })()

定义函数

函数的定义方式

声明函数

function run(): string {
  return "跑"
}
console.log(run())

匿名函数

let fan1 = function (): number {
  return 123
}
console.log(fan1())

函数的传参

声明函数

function getinfo(name: string, age: number): string {
  return `${name}~~~${age}`
}
console.log(getinfo("丁永康", 22))

匿名函数

let getinfo1 = function (name: string, age: number): string {

  return `${name}~~~${age}`
}
console.log(getinfo("姜小莹", 18))

定义没有返回值的函数

function aab(): void {
  console.log("没有返回值得方法")
}
aab()

定义可选传参的函数

在ts中函数传参 需要在可填可不填的形参与冒号之间加个?号

可选参数必须要配置到最后面,不能放到前面

function getinfo2(name: string, age?: number): string {

  if (age) {
    return `${name}~~~${age}`
  } else {
    return `${name}~~~年龄保密`
  }

}
console.log(getinfo2("丁永康", 22))
console.log(getinfo2("姜小莹",))

定义有默认参数的函数

function getinfo3(name: string, age: number = 20): string {

  if (age) {
    return `${name}~~~${age}`
  } else {
    return `${name}~~~年龄保密`
  }

}
console.log(getinfo3("丁永康"))
console.log(getinfo3("丁永康", 40))

剩余传参(扩展运算符…)

function sum(a: number, ...result: number[]): number {
  return result.reduce(function (sum: number, item: number): number {
    sum += item
    return sum
  }, 1)
}

console.log(sum(1, 2, 3, 4, 5, 6))

函数的重载!!!

在ts中可以定义多个一样名字的函数,来进行对实参类型进行判断并返回对应的结果,不会像es5中一样函数名的函数就会被替换掉

可以在第三个函数中对形参的类型进行判断

function getinfo5(name: string): string
function getinfo5(age: number): string
function getinfo5(str: any): any {
  if (typeof str === "string") {
    return `我叫${str}`
  } else {
    return `我的年龄是${str}`

  }
}
console.log(getinfo5("丁永康"))
console.log(getinfo5(22))

函数重载中可选传参

function getinfo6(name: string): string
function getinfo6(name: string, age?: number): string
function getinfo6(name: any, age?: any): any {
  if (age) {
    return `我叫${name},我的年龄是${age}`
  } else {
    return `我叫${name}`
  }
}
console.log(getinfo6("丁永康"))
console.log(getinfo6("丁永康", 22))

箭头函数和js一样