TypeScript学习整理1

一、了解TypeScript

1、编程语言类型

动态类型语言：指在运行期间才会做类型检查的语言，在使用动态语言编程的时候，不用给变量指定数据类型。可以给变量赋值为字符串，再赋值为对象，非常灵活。

如：JavaScript、Ruby、Python、Php。

静态类型语言：指在编译阶段才会做类型检查的语言，写程序时需要先声明变量的数据类型。

如：C、C++、C#、Java。

2、TypeScript是什么

TypeScript是可扩展的JavaScript（JavaScript that），或者说是JavaScript的超集。除了提供原生JavaScript的类型系统， 还提供了ES6~ES10的语法支持。

TypeScript的出现是不关注数据类型的动态语言，变为关注数据类型的静态语言。

3、为什么使用TypeScript

优点：

（1）程序更容易理解。在阅读代码时，函数或者方法输入输出的参数类型，外部条件一目了然。并且有了TypeScript代码本身就是注释。

（2）在其他插件的帮助下，开发更有效率。可以在不同的代码块和定义中跳转。代码自动补全。

（3）更少的错误。编译期间能够发现大量错误，并杜绝一些常见错误。

（4）非常好的包容性，完全兼容JavaScript。

缺点：

（1）增加了一些前端开发的学习成本，需要学习一些平时未接触的概念。

（2）短期内增加开发成本。

二、原始数据类型和any类型

最新的ECMAScript定义了8中数据类型：

7中原始类型：Boolean、Null、Undfiend、Number、BigInt、String、Symbol。

1种引用类型：Object。

let isDone: boolean = false

let age: number = 12

let firstName: string = 'jiang'
let message: string = `Hello ${firstName}`

let isDone: boolean = false

let u: undefined = undefined
let n: null = null

let num: number = undefined

当无法确定数据类型时，使用any

let notSure: any = 4
notSure = 'any'
notSure = true
notSure.myName
notSure.getName()

三、数组和元组

定义数组：

let arrOfNumber: number[] = [1, 2, 3]
arrOfNumber.push(1)
arrOfNumber.push('123) // 报错

特殊数据结构：类数组（array like object）argument, HTMLCollection等

function test() {
  conosle.log(arguments)
  arguments.length
  arguments.forEach() // 报错
  let htmlCollection: HTMLCollection
}

元组

let user：[string, number] = ['hello', 123]

四、Interface接口

对对象的形状进行描述

interface IPerson {
  name：string
  age： number
}

let student：IPerson = {
  name：'jiang',
  age: 10
}

五、function 函数

function add (x: number, y: number): number {
  return x + y
}

function add (x: number, y: number, z: number?): number {
  if(typeof z === 'number') {
   return x + y + z
  }
  return x + y
}

// add:(x: number, y: number, z: number?): number
// type interface 类型推断复制过程中,变量应该是什么类型的
const add = (x: number, y: number, z: number?): number {
  if(typeof z === 'number') {
   return x + y + z
  }
  return x + y
}
interface ISum {
  (x: number, y: number, z: number?): number
}

let add1：ISum = add

六、类型推论、联合类型和类型断言

1. 类型推论type interface

// type interface类型推论
let str = 'string'

2.联合类型

// union types联合类型
let numberOrstring: number|string
numberOrstring = 'str'
numberOrstring = 123

3.类型断言

允许你覆盖它的推断，并且能以你任何你想要的方式分析它，这种机制被称为「类型断言」。TypeScript 类型断言用来告诉编译器你比它更了解这个类型，并且它不应该再发出错误。

使用 as 关键字来进行类型断言

// 类型断言不是类型转换，把它断言成联合类型中不存在的类型，会出现错误
fuction getLength(input: number | string): number{
  const str = input as string
  if (str.length) {
    return str.length
  }else {
    const number = input as number
    return number.toString().length
  }
}

4. 类型守卫type guard：typeof、instanceof

fuction getLength(input: number | string): number{
  if(typeof input === 'string') {
    return input.length
  }else {
    input.toString().length
  }
}

TypeScript学习整理2