TypeScript语言

拉勾大前端的学习笔记，仅作为学习记录
是基于JavaScript之上的编程语言，重点解决了js类型系统里面的不足，大大提高代码的可靠程度

内容概要

  • 强类型与弱类型
  • 静态类型和动态类型
  • JavaScript自有类型系统的问题
  • Flow静态类型检查方案
  • TypeScript语言规范和基本应用

类型系统

下面的类型是从两个维度来区分类型的类型安全维度和类型检查维度

  • 强类型与弱类型 (类型安全)
  • 静态类型与动态类型 (类型检查)

类型安全

  • 强类型：在语言层面限制了函数的实参类型必须与形参类型相同
  • 弱类型：在语言层面不会限制实参的类型
    强类型语言中不允许有随意的数据隐式类型转换，而弱类型语言则允许的

类型检查

  • 静态类型：一个变量声明时类型就是明确的，一旦被声明他的类型就不允许被修改
  • 动态类型：运行阶段才可以明确一个变量的类型，变量的类型随时可以改变

JavaScript类型系统特征

弱类型 且 动态类型

弱类型的问题

  • 等到运行阶段才会发现代码中的类型异常
  • 函数中传入参数类型不明确，可能会造成函数功能发生改变
  • 会有隐式转换

强类型的优势

  • 错误更早的暴露
  • 代码更智能，编码更加准确
  • 重构更牢靠
  • 减少代码层面不必要的判断

Flow概述——JavaScript静态类型检查器

  • 工作原理：在代码证通过添加类型注解的方式来标记代码中每个变量或者参数应该是什么类型的，Flow根据类型注解检查代码中是否存在类型使用异常，从而实现在开发阶段对类型异常的检查
// 
:number 代表类型注解
function sum (a: number, b:number){
  return a + b
}
sum(100, 50 )
sum('100', 50) // 如果传入的不是数字 语法上就会检测出对应的异常

类型注解在生产环境中可以通过babel 或者flow中的模块去掉注解

快速上手Flow

  • flow是以npm模块去工作的，通过yarn安装flow
yarn add flow-bin --dev
  • 作用就是检测当前代码中的类型异常
  • 使用flow的时候要在当前文件的开头加一个注释, 这样的flow会对当前代码做类型检查
// @flow
  • 当vscode报错语法报错是因为 :number不是es语法的时候，当使用flow的时候需要在VSCode关闭es语法检测，打开设置项，搜索javascript validate, 关掉enable选项
  • 运行命令去校验代码中的flow代码
yarn flow
// 报错not find a .flowconfig
// 这时候要yarn flow init 去进行初始化
  • 第一次执行后，flow会启动一个后台命令去监视我们的文件
  • 完成编码后，使用一下stop命令结束监视
yarn flow stop

Flow通过编译移除「类型注解」

  • 使用官方提供的 flow-remove-types
yarn add flow-remove-types
yarn flow-remove-types src[当前目录] -d dist[输出目录]
  • babel去移出类型注解
yarn add @babel/core @babel/cli @babel/preset-flow --dev
// 安装过后在项目中添加.babelrc文件
// 文件中添加presets配置
{
  "presets": ['@babel/presre-flow']
}

Flow开发工具插件

在VSCode中安装插件 Flow Labguage Support

类型推断

根据代码当中的使用情况，推断出变量的类型的特征就叫做类型推断

原始类型

const a:string = "footer"
const b:number = Infinity // NaN // 100
const c:boolean = true // false
const d:null = null
const e:void = undefined
const f: symbol = Symbol()

数组类型

// Array需要泛型参数指定数组中每一项的数据类型，
// 下面两个 表示为全部由数字组成的数组
const arr1: Array<number> 
const arr2: number[] 
//存放指定长度的数组，而且第一个是字符串，第二个是数字，此类做法称为元组
const foo:[string,number] = ['foo',100]

对象类型

// foo? 代表foo成员为可选属性
const obj1: { foo?:string, bar:number } = {
  foo: 'foo',
  bar: 123
}
// 当前对象允许添加任意个数的键，不过键和值的类型都必须是string类型
const obj2: { [string]:string } = {}

函数类型

一般指函数的参数类型和函数的返回值类型进行约束

// 限制回调函数的参数和他的返回值
function foo (calback:(string,number) => void ){
  callback('string',100)
}
//foo传入的回调函数需要有两个参数一个是string,一个是number,并且这个函数没有返回值
foo(function(str,n){
})

特殊类型

  • 字面量类型
    一般配合联合类型的方法去组合几个特定的值
// a变量的值 只能存放'foo'
const a: 'foo'  =  'foo'
// type只能存 下面三个值
const type : 'success' | 'warning' | 'danger' = 'success'
  • 联合类型
//代表 b 的类型 只能是string 或者是number
const b:string | number = 100
  • 可以用type 关键词去声明一个类型
const StringOrNumber = string | number
const b:StringOrNumber = 100
  • maybe类型
// 表示gender除了可以接收number，还可以去接收 null 或者undefined 
const gender: ?number = null

Mixed && Any

// mixed 可以接收任意类型的数据
function passMixed( value:mixed ){
}
// any也可以接收任意类型的数据
function passAny( value:any){
}
//any是弱类型，mixed是强类型

TypeScript

是js的超集，包括js+类型系统+es6+ ，最终会被编译为js

  • 缺点：语言本身多了很对概念，提高学习成本；项目初期，TypeScript会增加一些成本

快速上手

yarn init --yes
yarn add typescript --dev'
// 这个模块提供一个tsc命令去编译ts文件
yarn tsc 文件名 // 编译转换ts代码为js
// 执行tsc命令回先去看代码中的类型使用是否正确，然后移出类型注解，并且自动转化ES 的新特性

配置文件

yarn tsc -- init // 初始化一个tsconfig.json 文件
yarn tsc // 编译整个项目

原始数据类型

  • ts中，在非严格模式下 前三个类型允许为空，可以给他赋值为 null 或undefined
const a:string = "footer"
const b:number = Infinity // NaN // 100
const c:boolean = true // false

const d:null = null
const e:void = undefined
const f: symbol = Symbol()
// 因为tsconfig中的target: "es5"，所以默认使用es5作为标准库，所以使用ES6的Symbol 在语法上就会报错
// 解决办法就是在tsconfig中的lib里面加上 lib:['ES2015']，表示引用ES2015作为默认标准库
// 在lib:['ES2015','DOM'],console.log就不会报错了
  • 标准库就是内置对象所对应的声明文件，想在代码中使用内置对象，就必须引用对应的标准库

作用域问题

  • 不同文件中有相同变量名称的情况
// 导出模块，把文件作为单独的模块导出，可以解决相同变量名的问题，因为每个模块单独的作用域
export {}

Object类型

  • ts中object类型并不单指普通的对象类型，而是泛指所有非原始类型，也就是对象，数组，函数。
  • 普通对象的类型可以使用对象字面量的方式声明，单大多情况下还是使用接口去声明
const foo: object = function (){}  // [] // {}
const obj: { foo:number } = { foo:number } // 对象字面量的方式声明

数组类型

  • arr泛型
  • 元素类型加[]的方式
const arr1: Array<T> = [1,2,3]
const arr2: number[] = [1,2,3]

元组类型

  • 明确元素数量已经各个类型的数组
const tuple: [number, string] = [18, 'zce']

枚举类型

  • 需要用某几个数值，表示变量的状态
enum PostStatus {
  Draft = 0,
  Unpublished = 1,
  Published = 2
}
// 当不给枚举类型加默认值时，默认从0开始递增
const post = {
  title: 'Hello',
  content: 'hello,world'
  status: PostStatus.Drafit //0代表未发布，1草稿，2已经发布了
}
// 枚举类型会影响编译后的结果，最终会编译为双向的键值对对象
// 当给枚举加上const 的时候，编译完成后枚举类型会被移出，代码中状态，会被换成对应的数值

函数类型

  • 对函数的输入输出做约束
  • 函数声明和函数表达式 分别如何约束
// 函数声明的约束
function func1(a?:number):string{
  return 'hello'
}
//在参数名后面加上？代表参数为可选参数
// 函数表达式对应的类型限制
const func2:(a:number) => string = function (a:number):string{
  return ''func2"
}

任意类型

  • any 属于动态类型，可以用来接收任意类型的值

隐式类型推断

let age = 18 // 这个类型就会被ts推断为number类型
age = 'hello' // 再赋值字符串就会被报错
const foo // 当无法推断类型的时候，推断为any

类型断言

  • 有些情况下ts无法推断出具体类型,我们可以使用断言告诉ts此变量就是**类型
  • 只是编译过程中的概念，编译过后就没什么意义了
const nums = [100,12,119]
const res = nums.find(i => i >= 0) // 此时ts会推断res为number | undefined 
// 断言的两种方式
const num1 = res as number
const num2 = <number>res //JSX下不能使用，有标签冲突

接口(Interfaces)

可以理解为一种规范，或者是一种契约，可以用来约定对象的接口，使用接口，就必须遵循接口全部的约定

  • ts中的接口只是为有结构的数据进行类型约束的，在实际运行阶段这种接口并没有意义，不会被编译到实际运行的代码中
// 可以约定一个对象中具体应该有哪些成员，并且成员的类型都是什么样的
interface Post {
  title : string
  constext:  string
}
function printPost(post: Post){
  // 这种调用就是post有些要求，post必须要有title和context属性
 // 可以用接口描述这种隐式的约束
  console.log(post.title)
  console.log(post.context)
}
可选成员
//subtitle为可选成员
interface Post {
  title : string
  constext:  string
  subtitle?: string
}
只读成员
//subtitle为可选成员
interface Post {
  title : string
  constext:  string
  subtitle?: string
  readonly summary:string
}
// summary在初始化完成后就不允许被修改了
动态成员
interface Cache{
  [key: string] : string // 表示键的类型为string,值的类型也为string,
}
const cache:Cahe = {}
cache.foo = 'foo'
cache.bar = 'bar'

类(Classes)

  • 描述一类具体事物的抽象特征
  • 用来描述具体对象的抽象成员
  • ts中增强了类的相关语法
// 在ts中类的属性在赋值之前要去声明他的类型
class Person = {
  public name: string = 'hello' // 可以通过等号的方式设置初始值
  private age: number
  protected readonly gender: boolean //只读属性readonly
  constructor (name: string, age:number){
      this.name = name
      this.age = age
  }
}
访问修饰符
  • private 表示私有属性，只能在内部进行访问
  • public 表示公有成员，默认就是public
  • protected 表示受保护的，不能在外部访问，只允许在子类中访问对应的成员
类和接口

利用接口对类进行抽象

interface Eat {
  eat(food:string):void
}
interface Run{
  run(distance: number): void
}
class Person implements Eat,Run{
  eat(food:string): void{
      console.log(`优雅的进餐：${food}`)
  }
  run(distance:number):void{
      console.log(`直立行走：${distance}`)
  }
}

class Animal implements Eat,Run{
   eat(food:string): void{
      console.log(`呼噜呼噜的吃：${food}`)
  }
  run(distance:number):void{
      console.log(`爬行：${distance}`)
  }
}
抽象类
  • 用来约束子类中必须拥有某一个成员，抽象类可以包含具体的实现
  • 一般比较大的类建议使用抽象类
  • 抽象类只能被继承，不能被实例化
abstract class Animal {
   eat(food:string): void{
      console.log(`呼噜呼噜的吃：${food}`)
  }
  abstract run (distance: number): void // 抽象类不需要具体的实现方法
}
// 使用子类继承Animal类型
class Dog extends Animal{
   // 父类中有抽象方法，子类中就必须要去实现那个抽象方法
  run(distance: number):void{
    console.log(`四脚爬行：${distance}`)
  }
}

泛型

  • 定义函数接口和类的时候没有定义具体的类型，等使用的时候再去指定具体类型的特征
  • 简单的说声明函数的时候不去指定具体的类型，等调用的时候再去指定这个类型
// 创建数字类型的数组
function createNumberArray(length: number, value:number): number[]{
  const arr = Array<number>(length).fill(value)
  return arr
}
// 创建字符串类型的数组
function createNumberArray(length: number, value:string): string[]{
  const arr = Array<string>(length).fill(value)
  return arr
}
// 使用泛型优化上面的函数,支持创建任意类型的数组
function createArray<T>(length: number, value:T): T[]{
  const arr = Array<T>(length).fill(value)
  return arr
}

类型声明

  • 对第三方的模块进行类型声明
  • typescript社区有维护一些第三方模块的类型声明
// 例如添加lodash的类型声明
yarn add @types/lodash --dev
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345