Typescript類(lèi)型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范
Typescript是一門(mén)基于JavaScript之上的語(yǔ)言，重點(diǎn)解決了JavaScript自由類(lèi)型系統(tǒng)的問(wèn)題。
使用Typescript可以大大提高代碼的可靠程度。
類(lèi)型系統(tǒng)
強(qiáng)類(lèi)型和弱類(lèi)型(類(lèi)型安全)
強(qiáng)類(lèi)型：語(yǔ)言層面限制函數(shù)的實(shí)參類(lèi)型必須與形參類(lèi)型相同
弱類(lèi)型：語(yǔ)言層面不會(huì)限制實(shí)參的類(lèi)型
由于這種強(qiáng)弱類(lèi)型之分根本不是某一個(gè)權(quán)威機(jī)構(gòu)的定義，所以導(dǎo)致后人對(duì)這種鑒定方式的細(xì)節(jié)，出現(xiàn)了不一致的理解。但整體上大家的鑒定方式都是在描述強(qiáng)類(lèi)型有更強(qiáng)的類(lèi)型約束，而弱類(lèi)型中幾乎沒(méi)有什么約束。
強(qiáng)類(lèi)型語(yǔ)言中不允許有任意的隱式類(lèi)型轉(zhuǎn)換，而弱類(lèi)型語(yǔ)言中則允許任意的數(shù)據(jù)隱式類(lèi)型轉(zhuǎn)換。
強(qiáng)類(lèi)型不允許隨意的隱式類(lèi)型轉(zhuǎn)換，而弱類(lèi)型則是允許的。
變量類(lèi)型允許隨時(shí)改變的特點(diǎn)，不是強(qiáng)弱類(lèi)型的差異。
靜態(tài)類(lèi)型與動(dòng)態(tài)類(lèi)型(類(lèi)型檢查)
- 靜態(tài)類(lèi)型：一個(gè)變量聲明時(shí)它的類(lèi)型就是明確的，而且聲明過(guò)后，它的類(lèi)型就不允許再修改。
- 動(dòng)態(tài)類(lèi)型：運(yùn)行階段才能夠明確變量類(lèi)型。動(dòng)態(tài)類(lèi)型語(yǔ)言中的變量沒(méi)有類(lèi)型，變量中存放的值是有類(lèi)型的。
JavaScript就是動(dòng)態(tài)型語(yǔ)言，而且變量的類(lèi)型隨時(shí)可以改變。
常用編程語(yǔ)言：
JavaScript自由類(lèi)型系統(tǒng)的問(wèn)題
JavaScript是弱類(lèi)型且動(dòng)態(tài)類(lèi)型，甚至可以說(shuō)它沒(méi)有類(lèi)型。它的特征就是［任性］、［不靠譜］，缺失了類(lèi)型系統(tǒng)的可靠性。
JavaScript沒(méi)有編譯環(huán)節(jié)
大規(guī)模應(yīng)用下，弱類(lèi)型/動(dòng)態(tài)類(lèi)型這種優(yōu)勢(shì)就變成了短板。
弱類(lèi)型的問(wèn)題：君子約定有隱患，強(qiáng)制要求有保障。
強(qiáng)類(lèi)型的優(yōu)勢(shì)：
- 錯(cuò)誤更早暴露
- 代碼更智能，編碼更準(zhǔn)確
- 重構(gòu)更牢靠
- 減少不必要的類(lèi)型判斷
Flow靜態(tài)類(lèi)型檢查方案
- Flow是JavaScript的靜態(tài)類(lèi)型檢查器。
- 彌補(bǔ)了JavaScript的不足，為JavaScript提供了更完善的類(lèi)型系統(tǒng)。
- 工作原理就是通過(guò)在代碼當(dāng)中添加一些類(lèi)型注解方式來(lái)去標(biāo)記代碼中變量或參數(shù)應(yīng)該是什么類(lèi)型的。
//@flow
function sum(a: number, b: number) {
return a + b
}
console.log(sum(10, 20));
console.log(sum('10', '20'));
Flow只是一個(gè)小工具。
安裝：flow-bin
通過(guò)編譯除注解
- 1.安裝flow-remove-types依賴(lài)
- 2.使用JavaScript編譯工具babel配合flw插件
flow開(kāi)發(fā)者工具：flow language support
類(lèi)型注解
function add(a:number,b:number){
return a+b
}
let num:number = 90
function foo():void{}
flow原始類(lèi)型
const a: string = 'foobar' const b: number = Infinity // NaN // 100 const c: boolean = false // true const d: null = null const e: void = undefined const f: symbol = Symbol()
flow數(shù)組類(lèi)型
const arr1: Array<number> = [1, 2, 3] const arr2: number[] = [1, 2, 3] // 元組 const foo: [string, number] = ['foo', 100]
flow對(duì)象類(lèi)型
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'
flow函數(shù)類(lèi)型
//@flow
function foo (callback: (string, number) => void) {
callback('string', 100)
}
foo(function (str, n) {
// str => string
// n => number
})
flow特殊類(lèi)型
// 字面量類(lèi)型 const a: 'foo' = 'foo' const type: 'success' | 'warning' | 'danger' = 'success' // ------------------------ // 聲明類(lèi)型 type StringOrNumber = string | number const b: StringOrNumber = 'string' // 100 // ------------------------ // Maybe 類(lèi)型 const gender: ?number = undefined
任意類(lèi)型 Mixedany
//@flow
// string | number | boolean | ....
function passMixed (value: mixed) {
if (typeof value === 'string') {
value.substr(1)
}
if (typeof value === 'number') {
value * value
}
}
passMixed('string')
passMixed(100)
// ---------------------------------
function passAny (value: any) {
value.substr(1)
value * value
}
passAny('string')
passAny(100)
Typescript語(yǔ)言規(guī)范與基本應(yīng)用
任何一種JavaScript運(yùn)行環(huán)境都支持。功能更為強(qiáng)大，生態(tài)也更健全、更完善。
Typescript是JavaScript的超集。
微軟自研的開(kāi)發(fā)工具對(duì)Typescript支持特別好。
Typescript(漸進(jìn)式)–前端領(lǐng)域中的第二語(yǔ)言。
Typescript缺點(diǎn)：
- 語(yǔ)言本身多了很多概念
- 項(xiàng)目初期，Typescript會(huì)增加一些成本
使用Typescript之前要先安裝依賴(lài)。
標(biāo)準(zhǔn)庫(kù)就是內(nèi)置對(duì)象所對(duì)應(yīng)的聲明。
顯示中文錯(cuò)誤信息：yarn tsc --locale zh-CN，vs-code也可以設(shè)置locale為中文
Typescript作用域
我們可以用立即執(zhí)行函數(shù)/export導(dǎo)出模塊來(lái)創(chuàng)建一個(gè)單獨(dú)作用域。
//立即執(zhí)行函數(shù)
(function () {
const a = 9
})()
//模塊導(dǎo)出
export aa = {
a: 23
}
Typescript原始類(lèi)型
//原始數(shù)據(jù)類(lèi)型 const a: string = 'foo' const b: number = 100 //NaN/Infinity const c: boolean = true //false const d: boolean = null const e: void = undefined const f: null = null const g: undefined = undefined const h: symbol = Symbol()
Typescript Object類(lèi)型
并不單指普通的對(duì)象類(lèi)型，而是泛指所有的非原始類(lèi)型：對(duì)象、數(shù)組、函數(shù)。
//Object類(lèi)型
const aa: object = function () { } //[]//{}
const obj: { foo: number, bar: string } = { foo: 123, bar: 'aaa' }
更專(zhuān)業(yè)的方式是使用接口。
Typescript數(shù)組類(lèi)型
有兩種定義方式：
- 使用Array泛型
- 使用元素類(lèi)型+［］
//數(shù)組類(lèi)型 const arr: Array<number> = [1, 2, 3] const arr1: number[] = [1, 2, 3]
Typescript元組類(lèi)型(turple)
是一種特殊的數(shù)據(jù)結(jié)構(gòu)，其實(shí)元組就是一個(gè)明確元素?cái)?shù)量以及每個(gè)元素類(lèi)型的數(shù)組，各個(gè)元素的類(lèi)型不必要完全相同。定義方式：字面量方式
//元組類(lèi)型
//元組（tuple)
export { } //確保跟其他示例沒(méi)有成員沖突
const tuple: [number, string] = [10, 'rock']
console.log(tuple[0]); //10
console.log(tuple[1]); //rock
//解構(gòu)賦值
const [num, age] = tuple
Object.entries({
foo: 123,
zar: 432
})
Typescript枚舉類(lèi)型(enum)
enum Status {
Draft = 'aaa',
Unpulished = 'bbb',
Published = 'ccc'
}
如果確認(rèn)代碼中不會(huì)使用索引器去訪問(wèn)枚舉，就可以使用常量枚舉。
//常量枚舉
const post = {
title: 'Hello',
content: 'TypeScript',
status: 'ok'
}
枚舉類(lèi)型會(huì)入侵到我們運(yùn)行時(shí)的代碼，它會(huì)影響到我們編譯后的結(jié)果。我們?cè)赥ypeScript中使用的大多數(shù)類(lèi)型，它在經(jīng)過(guò)編譯轉(zhuǎn)換后，最終都會(huì)被移除掉，因?yàn)樗皇菫榱宋覀冊(cè)诰幾g過(guò)程中做類(lèi)型檢查，但枚舉類(lèi)型不會(huì)，它最終會(huì)變?yōu)橐粋€(gè)雙向鍵值對(duì)對(duì)象。
TypeScript函數(shù)類(lèi)型
JavaScript中又兩種函數(shù)定義方式：
函數(shù)聲明
//函數(shù)聲明方式
// function func1(a: number, b?: number): string {
// function func1(a: number, b: number=90): string {
function func1(a: number, ...rest: number[]): string {
return 'hello'
}
func1(12, 34)
func1(30)
使用參數(shù)可選、參數(shù)默認(rèn)值、剩余參數(shù)都需要放在參數(shù)列表的最后一個(gè)參數(shù)位置。
函數(shù)表達(dá)式
//函數(shù)表達(dá)式
const func2 = (a: number, b: number) => string = function (a: number, b: number): string {
return 'func2'
}
TypeScript任意類(lèi)型
因?yàn)閍ny是弱類(lèi)型，也是動(dòng)態(tài)類(lèi)型，所以TypeScript不會(huì)對(duì)any做類(lèi)型檢查。所以它存在類(lèi)型安全問(wèn)題，我們不要輕易去使用它。
function stringify(value: any) {
return JSON.stringify(value)
}
stringify('string')
stringify(123)
stringify(true)
let foo: any = 'string'
foo = 100
foo.bar()
隱式類(lèi)型判斷
如果我們沒(méi)有通過(guò)類(lèi)型注解去標(biāo)注一個(gè)變量，TypeScript會(huì)根據(jù)這個(gè)變量的使用情況去推斷這個(gè)變量的類(lèi)型。
//隱式類(lèi)型推斷 let age = 10 //number // age = 'aaa' let foo; foo = 45 foo = 'aaa'
雖然定義變量時(shí)如果不給它指定類(lèi)型，也不給初始值，TypeScript會(huì)自動(dòng)幫他注解為any類(lèi)型，但還是建議定義時(shí)就注明類(lèi)型。
TypeScript類(lèi)型斷言
在某些特殊情況下，TypeScript無(wú)法去推斷一個(gè)變量的類(lèi)型，而我們作為開(kāi)發(fā)者，我們根據(jù)代碼的使用情況，我們是會(huì)明確知道這個(gè)變量到底是什么類(lèi)型的。類(lèi)型斷言的方式：
- 使用as關(guān)鍵字
- 在變量前面使用<>(JSX中不能使用)
const nums = [12, 34, 56] const res = nums.find(i => i > 10) //斷言方式一--as關(guān)鍵字 const num1 = res as number //斷言方式二---泛型 const num2 = <number>res
類(lèi)型斷言并不是類(lèi)型轉(zhuǎn)換，類(lèi)型轉(zhuǎn)換是代碼在運(yùn)行時(shí)的概念，而類(lèi)型斷言是代碼在編譯時(shí)的概念。當(dāng)代碼編譯過(guò)后，斷言也就不存在了。
TypeScript接口(Interface)
一種規(guī)范或者一種契約。它可以用來(lái)去約定對(duì)象的結(jié)構(gòu)。去使用一個(gè)接口，就必須去遵守它所有的約定。
interface Post {
title: string
content: string
}
function printPost(post: Post) {
console.log(post.title);
console.log(post.content);
}
printPost({
title: 'hello',
content: 'welcome'
})
//hello
//welcome
TypeScript中的接口只是為了我們有結(jié)構(gòu)的數(shù)據(jù)，去做類(lèi)型約束的，在實(shí)際運(yùn)行階段，它并沒(méi)有任何意義。
- 可選成員
- 只讀成員
- 動(dòng)態(tài)成員
interface Post {
title: string
subtitle?: string //可選成員
content: string
readonly summary: string //只讀成員
}
TypeScript類(lèi)(class)
類(lèi)的特征：描述一類(lèi)具體事物的抽象特征。
類(lèi)可以用來(lái)描述一類(lèi)具體對(duì)象的抽象成員。
ES6以前，JavaScript都是通過(guò)函數(shù)+原型模擬實(shí)現(xiàn)類(lèi)。ES6開(kāi)始，JavaScript中有了專(zhuān)門(mén)的class。
TypeScript增強(qiáng)了class的相關(guān)語(yǔ)法。
class Person {
name: string
age: number
constructor(name: string, age: number) {
this.name = name
this.age = age
}
sayHi(msg: string): void {
console.log((`I am ${this.name}, ${msg}`));
}
}
類(lèi)的訪問(wèn)修飾符(默認(rèn)是public修飾符)
class Person {
public name: string // = 'init name'
private age: number
protected gender: boolean
constructor (name: string, age: number) {
this.name = name
this.age = age
this.gender = true
}
sayHi (msg: string): void {
console.log(`I am ${this.name}, ${msg}`)
console.log(this.age)
}
}
class Student extends Person {
private constructor (name: string, age: number) {
super(name, age)
console.log(this.gender)
}
static create (name: string, age: number) {
return new Student(name, age)
}
}
const tom = new Person('tom', 18)
console.log(tom.name)
// console.log(tom.age)
// console.log(tom.gender)
const jack = Student.create('jack', 18)類(lèi)的只讀屬性readonly
protected readonly gender:boolean
類(lèi)與接口
接口就是把共同的特征封裝起來(lái)。
interface EatAndRun {
eat(food: string): void
run(distance: number): void
}
class Person implements EatAndRun {
eat(food: string): void {
console.log(`美美的吃：${food}`);
}
run(distance: number) {
console.log(`直立行走：${distance}`);
}
}
class Animal implements EatAndRun {
eat(food: string): void {
console.log(`美美的吃：${food}`);
}
run(distance: number) {
console.log(`直立行走：${distance}`);
}
}
一個(gè)接口只約束一個(gè)能力，一個(gè)類(lèi)型去實(shí)現(xiàn)多個(gè)接口。
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) {
console.log(`直立行走：${distance}`);
}
}
class Animal implements Eat, Run {
eat(food: string): void {
console.log(`美美的吃：${food}`);
}
run(distance: number) {
console.log(`直立行走：${distance}`);
}
}
TypeScript抽象類(lèi)
抽象類(lèi)與接口有點(diǎn)類(lèi)似，也可以用來(lái)去約束子類(lèi)中必須擁有某個(gè)成員。
但是抽象類(lèi)可以包含一些具體的實(shí)現(xiàn)，但是接口只是成員的抽象，不包含具體的實(shí)現(xiàn)。
抽象類(lèi)不能用new去實(shí)例了，只能去繼承。
abstract class Animal {
eat(food: string): void {
console.log(`咕嚕咕嚕吃：${food}`);
}
abstract run(distance: number): void
}
class Dog extends Animal {
run(distance: number): void {
console.log(`四肢爬行：${distance}`);
}
}
const d = new Dog()
d.eat('肉')
d.run(200)
TypeScript泛型
泛型：我們?cè)诙x函數(shù)、接口或類(lèi)時(shí)，沒(méi)有指定具體的類(lèi)型，等到使用時(shí)再去指定具體類(lèi)型的特征。
function CreateNumberArray(length: number, value: number): number[] {
const arr = Array<number>(length).fill(value)
return arr
}
function CreateStringArray(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
}
const res = CreateArray<string>(3, 'foo')
TypeScript類(lèi)型聲明
一個(gè)成員在定義時(shí)沒(méi)有聲明類(lèi)型，在使用時(shí)單獨(dú)為它做出明確聲明。
import { camelCase } from 'lodash'
import qs from 'query-string'
qs.parse('?key=value&key2=value2')
declare function camelCase(input: string): string
const res = camelCase('hello')
以上就是Typescript類(lèi)型系統(tǒng)FLOW靜態(tài)檢查基本規(guī)范的詳細(xì)內(nèi)容，更多關(guān)于Typescript類(lèi)型FLOW靜態(tài)檢查的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript原型鏈中函數(shù)和對(duì)象的理解
這篇文章主要為大家介紹了JavaScript原型鏈中函數(shù)和對(duì)象的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了 微信小程序頁(yè)面生命周期的相關(guān)資料,需要的朋友可以參考下2016-09-09
js實(shí)現(xiàn)兔年轉(zhuǎn)圈圈動(dòng)畫(huà)示例
這篇文章主要為大家介紹了js實(shí)現(xiàn)兔年轉(zhuǎn)圈圈動(dòng)畫(huà)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 生命周期的相關(guān)資料,創(chuàng)建、到開(kāi)始、暫停、喚起、停止、卸載等過(guò)程，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了js作用域及作用域鏈工作引擎，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解
這篇文章主要為大家介紹了JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序 地圖（map）實(shí)例詳解的相關(guān)資料,這里對(duì)微信小程序的地圖API 進(jìn)行了詳細(xì)介紹并附示例代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
Openlayer?add?mark及添加hover效果實(shí)例詳解
這篇文章主要為大家介紹了Openlayer?add?mark及添加hover效果實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了JS微前端MicroApp基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 富文本轉(zhuǎn)文本實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10