大前端学习--TypeScript

TypeScript

一、JavaScript

1. 弱类型、动态语言的缺陷

• 程序中的异常在运行时才能发现

• 类型不明确函数功能会发生改变

• 对对象索引器的错误用法

2. 强类型的优势

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

---

二、Flow

1. Flow是JavaScript类型检查器

// : number 叫做类型注解
function sum (a: number, b: number) {
   
  return a + b
}
console.log(sum(1, 2))

2. 如何安装并使用flow

• 先执行yarn init -y

• 执行yarn add flow-bin

• 在代码中第一行添加flow注释：// @flow

• 在函数中形参后面加上冒号和类型：function sum (a: number, b: number)

• 执行yarn flow init创建.flowconfig

• 执行yarn flow

  // @flow
  // : number 叫做类型注解
  function sum (a: number, b: number) {
       
    return a + b
  }
  console.log(sum(1, 2))
  
  console.log(sum('100', '100'))
  

3. 如何移除flow注解

flow官方提供的操作:

• yarn add flow-remove-types --dev

• yarn flow-remove-types src -d dist

使用babel配合flow转换的插件:

• yarn add @babel/core @babel/cli @babel/preset-flow --dev

• .babelr文件:

  {
       
    "presets": ["@babel/preset-flow"]
  }
  

• yarn babel src -d dist

4. 开发工具插件

VsCode中的插件：Flow Language Support

5. Flow支持的类型

/**
 * 原始类型
 * @flow
 */

 const a: string = 'foo'

 const b: number = Infinity // NaN // 100

 const c: boolean = false // true

 const d: null = null

 const e: void = undefined

 const f: symbol = Symbol()

 const arr: Array<number> = [1, 2, 3]

 const arr2: number[] = [1, 2, 3]

 // 元组
 const foo: [string, number] = ['foo', 100]

const obj1: {
   foo: string, bar: number} = {
   foo: 'string', bar: 100}

// 问号表示可有可与的属性
const obj2: {
   foo?: string, bar: number} = {
   bar: 100}

// 表示当前对象可以添加任意个数的键，不过键值的类型都必