摘要

创建于2022年01月11日。

typescript解决javascript类型系统问题，大大提高代码的可靠程度。

内容概要：

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

强类型与弱类型

强类型与弱类型（类型安全）静态类型与动态类型（类型检查）

类型安全：

强类型VS弱类型

强类型语言层面限制函数的实参类型必须与形参类型相同

class Main { static void foo (int num) { System.out.println(num); } public static void main(String[] args) { Main.foo(100); // ok Main.foo("100"); // error "100" is a string Main.foo(Integer.parseInt("100")); // ok } }

弱类型语言层面不会限制实参的类型

function foo(num) { console.log(num) } foo(100) // ok foo(100) // ok foo(parseInt(100)) // ok

强类型有更强的类型约束，而弱类型中几乎没有什么约束。

强类型中不允许任意的隐式类型转换，而弱类型语言则允许任意的数据隐式类型转换。

静态类型与动态类型

静态类型：

一个变量声明时它的类型就是明确的，声明过后，它的类型就不允许再修改。

动态类型：

运行阶段才能够明确变量类型，而且变量的类型可以随时改变.

var str = 100; str = lalal // ok console.log(str)

动态类型语言中的变量没有类型，变量中存放的值是有类型的。

JavaScript类型系统特征

弱类型且动态类型（任性），缺失了类型系统的可靠性（不靠谱）

为什么不是强类型/静态类型？早前的js应用简单。js没有编译环节。

大规模应用下，这种优势变成了短板。

弱类型的问题

// javascript 弱类型产生的问题 const obj = {} obj.foo() setTimeout(() => { obj.foo() }, 3000) function sum (a, b) { return a + b } console.log(sum(100, 100)) console.log((100, 100)) const obj = {} obj[true] = 100 console.log(obj[true])

弱类型在运行过程中才会发现问题，强类型则会提前发现！

强类型的优势

错误更早的暴露（编码阶段 则可以发现）代码更智能，编码更准确重构更牢靠减少不必要的类型判断

Flow

Javascript 类型检查器，代码当中添加类型注解的方式 进行类型检查。

function sum(a: number, b: number) { return a + b }

如何使用？

npm i flow-bin -dev在package.json中添加一条命令：就可以使用 npm run flow来进行类型检测在终端运行 npm flow init 用于初始化 .flowconfig文件在需要flow进行检测的文件 起始位置添加 //@flow，以使flow工具确认要检测的文件使用注解

具体看官网：https://flow.org/en/

TypeScript

优点

任何一种JavaScript运行环境都支持功能更为强大，生态也更健全，更完善angular/vue3.0前端领域中的第二语言渐进式语言

缺点

语言本身多了很多概念

项目初期TypeScript 会增加一些成本

安装

npm install -g typescript

tsc -v 看下是否安装成功

写个小例子

const hello = (name:string) => { console.log(`h${name}`) } hello(111)

如果想指定函数传递的参数类型可以在参数后面加上xxx:类型 来指定传入类型如果传入类型

不符那么在编译阶段就会报错。。

01.ts:4:7 - error TS2345: Argument of type number is not assignable to parameter of type string. 4 hello(122222)

如何使用配置文件

ts的配置文件是tsconfig.json

可以在对应的文件夹中使用tsc --init 来进行初始化配置文件

初始化好了以后就类似这样 你可以对你的项目进行配置 例如 编译成哪个版本的语法呀，

是否强制类型检查呀，是否需要错误映射呀等等

生成以后 在项目里面新建 ts 文件 最后 使用tsc 就会生成对应的js 文件

原始类型

const a: string = 1 const b: number = 1 // NaN Infinity const c: boolean = true // false // const d: string = null // 非严格模式可以为空 const e: void = undefined const f: null = null const g: undefined = undefined const h: symbol = Symbol()

中文错误消息

tsc --locale zh-CN

vscode 中的错误消息 搜下去吧

object 对象类型并不单指 对象

const foo: object = function () {} const obj: { foo: number, bar: string } = { foo: 123, bar: aaa }

数组类型

const arr: Array<number> = [1,2,3,4] const arr1: number[] = [1,2,3,4] // ------------------------------- function sum(...args: number[]) { // 判断是不是每个成员都是数字 return args.reduce((prev, current) => prev + current, 0) }

元组

// 元组 const tuple: [number, string] = [18, zce] const age = tuple[0] const name1 = tuple[1]

枚举

// 枚举类型 enum PostStutes { A = 0, B = 1, C = 2 } const post = { aa: 1, bb: PostStutes.A }

函数类型

// 函数类型 // function fun1 (a:string, b:string): string { // return fun1 // } // fun1(a,b) // function fun1 (a:string, b?:string): string { // return fun1 // } // fun1(a) // function fun1 (a:string, b:string = b): string { // return fun1 // } // fun1(a) // function fun1 (a:string, b:string = b, ...rest: number[]): string { // return fun1 // } // fun1(a) const fun2:(a:number, b:number) => string = function(a:number, b:number):string { return fun1 }

任意类型

function a(value:any){ console.log(value) } a(1) a(abb) // any 类型是不安全的

隐士类型推断

let age = 18 // age = 111 let foo foo = abc

提示：不建议用

类型断言：明确知道是某种类型

const nums = [1,2,3,4,5,6] const res = nums.find(i => i > 0) // const addnum = res * res const num1 = res as number // 断言1 const num2 = <number>res // 断言2

接口

// 接口 interface Post { title: string detail: string } function setPost(post: Post) { console.log(post.title) console.log(post.detail) } setPost({ title: abc, detail: abccccc }) // 接口 interface Post { title: string detail: string subTitle?: string // 可选成员 readonly summary: string // 只读成员 } function setPost(post: Post) { console.log(post.title) console.log(post.detail) } setPost({ title: abc, detail: abccccc, summary: 111 }) // 不定成员 interface Cache { [prop: string]: string } const cache: Cache = {} cache.a = 1 cache.b = 1

类

描述一类具体事物的抽象特征（例如：手机）

ES6以前 ， 函数+原型 class

typescript 增强了 class 的相关语法

class Person { name: string // = 张三 age: number constructor(name: string, age: number) { this.name = name this.age = age } sayHi (msg: string) { console.log(this.name) } }

使用前必须声明

访问修饰符

class Person { public name: string // = 张三 private age: number protected gender: boolean constructor(name: string, age: number) { this.name = name this.age = age this.gender = true } sayHi (msg: string) { console.log(this.name) console.log(this.age) } } const tom = new Person(张三, 18) console.log(tom.name) // console.log(tom.age) // console.log(tom.gender) class S extends Person{ constructor(name: string, age: number){ super(name, age) console.log(this.gender) } } const tom1 = new Person(tom, 18) console.log(tom1.name)

public,private,protected 三种修饰符

构造函数如何标记为私有的怎么办

class A { name: string age: number private constructor(name: string, age: number) { this.name = name this.age = age } static create(name: string, age: number) { return new A(name, age) } } // const af = new A() // 类“A”的构造函数是私有的，仅可在类声明中访问 const af = A.create(张三, 18) console.log(af.name)

只读属性

class A { name: string protected readonly age: number constructor(name: string) { this.name = name this.age = 18 } } const af = new A(张三) console.log(af.name)

类和接口

// 类和接口 interface Eat { eat (food: string): void } interface Run { run(distance: number): void } class A implements Eat, Run { eat (food: string): void { console.log(a+food) } run(distance: number): void { console.log(a+distance) } } class B implements Eat, Run { eat (food: string): void { console.log(b+food) } run(distance: number): void { console.log(b+distance) } }

抽象类

// 抽象类 只能被继承 不能被实现 abstract class Animal { eat (foo: string): void { console.log(抽象类+foo) } abstract run(d: number): void } class Dog extends Animal { run(d: number): void { console.log(d) } } const d = new Dog() d.eat(啥大声道) d.run(100)

泛型

// 泛型 声明不指定类型 调用才指定类型 function createArray<T> (length: number, value: T): T[] { const arr = Array<T>(length).fill(value) return arr } const res = createArray<string>(2, aa) console.log(res)

类型声明

import { camelCase } from loadsh declare function camelCase(input: string): string const res = camelCase(hello) console.log(res, 89)