大前端学习--TypeScript

最新推荐文章于 2023-05-31 09:53:44 发布

爱玲姐姐

最新推荐文章于 2023-05-31 09:53:44 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/jal517486222/article/details/106212805

版权

本文深入探讨了JavaScript的弱类型和动态语言的不足，强调强类型带来的好处。接着介绍了Flow类型检查器的安装、使用和移除注解的方法。文章重点在于TypeScript，详细讲解了TypeScript的安装、tsc命令、原始类型、标准库声明、错误消息、作用域、Object类型、元组、枚举、函数类型、任意类型、类型推断、类型断言、接口、类、抽象类以及泛型等核心概念，帮助读者全面理解TypeScript。

摘要由CSDN通过智能技术生成

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}

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