3.TypeScript语言笔记

本文为拉勾网大前端高薪训练营第一期笔记

---

强类型与弱类型（类型安全）
静态类型与动态类型（类型检查）
强类型语言不允许有任意的隐式类型转换，弱类型允许

举例‘100’-50

动态类型语言里，变量是没有类型的，变量中存放的值是有类型的弱类型的问题

• 类型异常需要等到运行时发现
• 类型不明确，函数功能发生改变
• 对对象索引器错误的用法

强类型优势

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

使用flow

• yarn add flow-bin —dev
• js文件里首部加@flow
• 成员加类型注释 a: number
• yarn flow init生成.flowconfig
• yarn flow

去除类型注释方法

flow-remove-types

• yarn add flow-remove-types —dev
• yarn flow-remove-types . -d dist

babel

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

• 根目录添加配置文件.babelrc

  {

  “presets”: ["@babel/preset-flow"]

  }

• yarn babel src -d dist

flow type

number string void null boolean symbol
Array number[] [string, number]

function foo (bar: number) : number {
	return num
}

obj的例子

const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 }
const obj2: { foo?: string, bar: number } = { bar: 100 }
const obj3: { [string]: string } = {}
obj3.key1 = 'value1'
obj3.key2 = 'value2'

function foo(callback: (string, number) ⇒ void){
	callback('string', 100)
}

特殊类型

const a: 'foo' = 'foo'

const type: 'success' | 'warning' | 'danger' = 'success'

// ------------------------

// 声明类型

type StringOrNumber = string | number

const b: StringOrNumber = 'string' // 100

// ------------------------

// Maybe 类型

const gender: ?number = undefined
// 相当于
// const gender: number | null | void = undefined

mixed any都可以支持所有类型，但是使用mixed的时候需要typeof判断之后才能做特定操作.substr或者是乘法运算，但是any就完全不限制

推荐使用mixed，any的话主要用于兼容老代码

cheatsheet https://www.saltycrane.com/cheat-sheets/flow-type/latest/

yarn add typescript —dev

yarn tsc —init

tsconfig.json

如果symbol不能用，就换成"lib": [“ES2015”, “DOM”, “ES2017”],

es2015是支持symbol，dom支持console

ts错误消息换成中文yarn tsc —locale zh-CN
如果没有export，零散文件的变量作用域都是全局的，解决方法

• (function(){})()
• 或者最后加一个export {} 这样就是模块作用域

const foo : object = function() {} // {} // [] 不只是{}，包括除了原始类型的其他类型

如果只是纯对象，用foo:{}，或者接口

const enum Status = {
	Draft = 1,
	Published = 2
}

数字省略的话从0开始累加，const的话就会在编译后隐藏枚举，如果不加const，会保留枚举且可双向访问，Status.Draft === 0和Status[0] === Draft

类型断言const bar = foo as number

接口可选，只读，动态键值

interface Post {
	title: string
	subtitle?: string
	readonly summary: string
}

interface Cache {
	[key: string]: string
}

class访问修饰符

public任意访问

private只有类内访问

protect子类也可以访问，允许继承

---

本文为拉勾网大前端高薪训练营第一期笔记