Typescript模塊的導(dǎo)入導(dǎo)出與繼承方式
Typescript模塊的導(dǎo)入導(dǎo)出與繼承
ModA.ts
export let x = 8888; export let print = function (x){console.log(x);};
ModB.ts
export let x = 8888; export let print = function (x){console.log(x);};
ModTest.ts
export * as B from "./ModB"; export {H,Hello} ?from "./ModB.js"; export {Hello as exp} ?from "./ModB.js";
導(dǎo)入測(cè)試
//導(dǎo)出變量 export let HeadName = 'Nance'; export let MidName = 'Jone'; export let BothDate = '2020-12-20'; ? let [X,Y,Z]=[0,0,0]; export {X,Y,Z}; ? //導(dǎo)出函數(shù) export function Add(a,b){return a+b;} ? function Multiply(x,y){return x * y;} export {Multiply}; ? function a1(a,b){return a+b;} function b1(a,b){return a-b;}; export {a1,b1};//導(dǎo)出多個(gè)函數(shù) ? //函數(shù)別名形式導(dǎo)出 export {a1 as ADD_FUNC ,b1 as DEL_FUNC}; ? //默認(rèn)導(dǎo)出,一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出,不管是類,方法或者是變量 //export default class a{};//默認(rèn)導(dǎo)出類a后就不能再默認(rèn)導(dǎo)出函數(shù),或者默認(rèn)導(dǎo)出變量 //export default function b(){}; let qq=0; export default qq; //默認(rèn)導(dǎo)出不能使用 as 別名導(dǎo)出
導(dǎo)出測(cè)試
import {HeadName,MidName,BothDate,X,Y,Z,ADD_FUNC,DEL_FUNC,Add} from "./ExportEx"; export {ADD_FUNC,DEL_FUNC,Add as myAdd} from "./ExportEx";//從導(dǎo)入模塊直接導(dǎo)出方法 console.log(HeadName,MidName,BothDate); console.log(X,Y,Z); console.log(ADD_FUNC(1,2),DEL_FUNC(3,4)); console.log(Add(5,6));
TypeScript知識(shí)點(diǎn)整理
TS 和 JS 有什么差異
JS:動(dòng)態(tài)類型,運(yùn)行時(shí)明確變量的類型,變量的類型由變量的值決定,并跟隨值的改變而改變;直接運(yùn)行在瀏覽器和 node.js 環(huán)境中;弱類型,數(shù)據(jù)類型可以被忽略的語(yǔ)言。一個(gè)變量可以賦不同數(shù)據(jù)類型的值。
TS:靜態(tài)類型,聲明時(shí)確定類型,之后不允許修改;編譯運(yùn)行,始終先編譯成 JavaScript 再運(yùn)行;強(qiáng)類型,一旦一個(gè)變量被指定了某個(gè)數(shù)據(jù)類型,如果不經(jīng)過(guò)強(qiáng)制轉(zhuǎn)換,那么它就永遠(yuǎn)是這個(gè)數(shù)據(jù)類型了。
TS 數(shù)據(jù)類型
基本數(shù)據(jù)類型:string、number、boolean
引用數(shù)據(jù)類型:數(shù)組(number[]、string[]、boolean[]、(number | string | boolean)[])、null、undefined、{ pname: string; page: number }、枚舉、void、Object、斷言
TS 中的類
類中的實(shí)例屬性, 需要提前聲明,,才能在 constructor 構(gòu)造函數(shù)中進(jìn)行實(shí)例屬性的初始化。
存取器的操作:就像操作普通對(duì)象一樣即可
- set 方法:負(fù)責(zé)對(duì)內(nèi)部的私有屬性賦值.,同時(shí)可以達(dá)到對(duì)外部數(shù)據(jù)的攔截作用。
- get 方法:負(fù)責(zé)對(duì)外提供私有屬性的值。
TS 的訪問(wèn)修飾符
public
:公共的private
:私有的,外部類不可訪問(wèn)protected
:受保護(hù)的,類的內(nèi)部或子類可訪問(wèn)readonly
:只讀的
TS 中的接口 - interface
interface 接口,主要描述對(duì)象結(jié)構(gòu),一個(gè)對(duì)象中應(yīng)該有什么屬性,賦值的時(shí)候需要符合接口規(guī)范。它主要針對(duì)的是對(duì)象結(jié)構(gòu),type關(guān)鍵字也可以描述對(duì)象, 除此之外,type 還可以描述基本類型,聯(lián)合類型等。
// (newName: string) => void: 這就是類型, 對(duì)一個(gè)函數(shù)進(jìn)行約束. // 利用接口對(duì)函數(shù)進(jìn)行約束, 描述一個(gè)函數(shù)的結(jié)構(gòu), 有什么參數(shù), 什么返回值. interface FunctionType { ? (newName: string, newAge: number, test?: string): void; } let setMyName: FunctionType = function ( ? name: string, ? age: number, ? a?: string ): void { ? console.log(name + age); }; setMyName("新名稱", 100); // 利用接口定義類的結(jié)構(gòu), 對(duì)類中的屬性和方法進(jìn)行約束. interface AnimalType { ? aname: string; ? eat(n: string): void; } // implements 表示一個(gè)類要實(shí)現(xiàn)某個(gè)接口, 必須按照接口的要求, 實(shí)現(xiàn)這個(gè)類的內(nèi)部結(jié)構(gòu). class Animal implements AnimalType { ? aname: string; ? constructor() { ? ? this.aname = "鴨子"; ? } ? eat(a: string): string { ? ? return "123"; ? } } let ani = new Animal(); console.log(ani.eat("1"));
泛型
在定義函數(shù)function 或者 接口interface 或者 類型type 時(shí),由我們傳入指定類型,函數(shù)/接口/類型 內(nèi)部都會(huì)根據(jù)這個(gè)類型做業(yè)務(wù)處理。簡(jiǎn)單的說(shuō),“泛型就是把類型當(dāng)成參數(shù)”。
// 制作泛型接口, 用T來(lái)表示廣泛的類型, 就看使用的時(shí)候, 傳遞的是什么類型. interface PType<T> { ? p: T; ? p1: T; } type PTypeOne<T> = { ? p: T; ? p1: T; }; let pp1: PTypeOne<string> = { ? p: "123", ? p1: "222", }; let pp2: PType<number> = { ? p: 12, ? p1: 22, }; let pp3: PType<number[]> = { ? p: [1, 2, 3], ? p1: [4, 5, 6], }; // 制作泛型函數(shù) function getValue<T>(a: T, b: T): T { ? return (a as any) + (b as any); } console.log(getValue<string>("10", "20")); console.log(getValue<number>(10, 20)); function getResult<T, Y>(a: T, b: Y): any { ? return (a as any) + (b as any); } console.log(getResult<string, number>("10", 20));
文件 .d.ts 的作用
全局聲明公共的類型,所有的.ts文件默認(rèn)從這個(gè)文件中查找類名名稱,.ts不需要單獨(dú)導(dǎo)入這個(gè)文件,.d.ts文件也不需要單獨(dú)的導(dǎo)出某個(gè)類型。
// 對(duì)于聯(lián)合類型比較長(zhǎng)的情況,可以通過(guò)type關(guān)鍵字,給這個(gè)聯(lián)合類型起個(gè)別名(相當(dāng)于自定義了一種新類型)。重用的時(shí)候?qū)懫饋?lái)方便。 type baseTypeArr = (number | string | boolean)[]; // number | string | boolean | number[]: 聯(lián)合類型,表示當(dāng)前這個(gè)變量,允許接收number/string/boolean/number[]這幾個(gè)類型中的一個(gè)即可。 type baseType = number | string | boolean | number[]; // 對(duì)于初始值可能為null/undefined的類型,也使用聯(lián)合類型約束 declare type dataType = string | undefined; declare type arrType = number[] | null; // declare 聲明類型 namespace 命名空間 ,每個(gè)命名空間內(nèi)都是獨(dú)立作用域,其實(shí)就是將不同的類型放到各自的模塊內(nèi),統(tǒng)一管理。 namespace HomeType { ? type homeList = number | string; } declare namespace CateType { ? type cateList = number | string; } declare namespace CartType { ? type cartList = number | string; } // 自定義類型,叫People類型 // psex?: boolean 表示People類型中的psex屬性可有可無(wú) type People = { ? page: number; ? pname: string; ? psex?: boolean | undefined; }; type CommonObject = { ? // [propName: string | number]: string | number | boolean; // [propName: string] 接收任意key,且是字符串。 ? [propName: string | number]: any; // any:讓一個(gè)變量可以是任意類型的值,被any標(biāo)識(shí)的數(shù)據(jù),ts會(huì)放棄對(duì)它的檢查,而是直接通過(guò)編譯,ts失效了。一定是在不確定類型/類型不統(tǒng)一是才使用any。 }; declare interface MyPeople { ? pname: string; ? page: number; ? psex?: boolean; }
const 和 readonly 的區(qū)別
const
:用于變量,在運(yùn)行時(shí)檢查;使用 const 變量保存的數(shù)組,可以使用 push、pop 等方法。readonly
:用于屬性,在編譯時(shí)檢查;使用Readonly Array<number>聲明的數(shù)組不能使用push,pop等方法。
枚舉和常量枚舉(const 枚舉)的區(qū)別
枚舉會(huì)在編譯時(shí)被編譯成一個(gè)對(duì)象,可以當(dāng)作對(duì)象使用。
const 枚舉會(huì)在 TS 編譯期間被刪除,避免額外的性能消耗。
? ?// 普通枚舉 ? ?enum Witcher { ? ? ?Ciri = 'Queen', ? ? ?Geralt = 'Geralt of Rivia' ? ?} ? ?function getGeraltMessage(arg: {[key: string]: string}): string { ? ? ?return arg.Geralt ? ?} ? ?getGeraltMessage(Witcher) // Geralt of Rivia ? ? ?// const枚舉 ? ?const enum Witcher { ? ? ?Ciri = 'Queen', ? ? ?Geralt = 'Geralt of Rivia' ? ?} ? ?const witchers: Witcher[] = [Witcher.Ciri, Witcher.Geralt] ? ?// 編譯后 ? ?// const witchers = ['Queen', 'Geralt of Rivia'
TS 中的 interface 可以給 Function/Array/Class 做聲明嗎
可以
TS 中如何枚舉聯(lián)合類型的 key
? type Name = { name: string } ? type Age = { age: number } ? type Union = Name | Age ?? ? type UnionKey<P> = P extends infer P ? keyof P : never ?? ? type T = UnionKey<Union>
什么是抗變、雙變、協(xié)變和逆變
Covariant
協(xié)變,TS對(duì)象兼容性是協(xié)變,父類 <= 子類,是可以的。子類 <= 父類,錯(cuò)誤。Contravariant
逆變,禁用strictFunctionTypes編譯,函數(shù)參數(shù)類型是逆變的,父類 <= 子類,是錯(cuò)誤。子類 <= 父類,是可以的。Bivariant
雙向協(xié)變,函數(shù)參數(shù)的類型默認(rèn)是雙向協(xié)變的。父類 <= 子類,是可以的。子類 <= 父類,是可以的。
TS 中同名的 interface 或者同名的 interface 和 class 可以合并嗎
interface
會(huì)合并class
不可以合并
如何使 TS 項(xiàng)目引入并識(shí)別編譯為 JS 的 npm 庫(kù)包
- npm install @types/xxxx
- 自己添加描述文件
TS 如何自動(dòng)生成庫(kù)包的聲明文件
可以配置tsconfig.json文件中的declaration和outDir
- 1.declaration: true, 將會(huì)自動(dòng)生成聲明文件
- 2.outDir: ‘’, 指定目錄
-?、-readonly
用于刪除修飾符
type A = { ? ? a: string; ? ? b: number; } type B = { ? ? [K in keyof A]?: A[K] } type C = { ? ? [K in keyof B]-?: B[K] } type D = { ? ? readonly [K in keyof A]: A[K] } type E = { ? ? -readonly [K in keyof A]: A[K] }
TS 是基于結(jié)構(gòu)類型兼容
typescript的類型兼容是基于結(jié)構(gòu)的,不是基于名義的。下面的代碼在ts中是完全可以的,但在java等基于名義的語(yǔ)言則會(huì)拋錯(cuò)。
interface Named { name: string } class Person { ? name: string } let p: Named // ok p = new Person()
const 斷言
const斷言,typescript會(huì)為變量添加一個(gè)自身的字面量類型
- 對(duì)象字面量的屬性,獲得readonly的屬性,成為只讀屬性
- 數(shù)組字面量成為readonly tuple只讀元組
- 字面量類型不能被擴(kuò)展(比如從hello類型到string類型)
// type '"hello"' let x = "hello" as const // type 'readonly [10, 20]' let y = [10, 20] as const // type '{ readonly text: "hello" }' let z = { text: "hello" } as const
type 和 interface 的區(qū)別
- type 側(cè)重于直接定義類型,還可以給一個(gè)或多個(gè)類型起一個(gè)新名稱(當(dāng)變量用),interface 只能定義對(duì)象數(shù)據(jù)結(jié)構(gòu)類型;
- type 可以為基本類型、聯(lián)合類型或元組甚至any等等賦值定義別名,interface 明顯辦不到;
- interface 定義重名了會(huì)合并屬性,type 辦不到(會(huì)報(bào)錯(cuò)提醒 重復(fù)定義);
- type 不支持繼承。
implements 與 extends 的區(qū)別
extends
, 子類會(huì)繼承父類的所有屬性和方法。implements
,使用 implements 關(guān)鍵字的類將需要實(shí)現(xiàn)需要實(shí)現(xiàn)的類的所有屬性和方法。
枚舉和 object 的區(qū)別
枚舉可以通過(guò)枚舉的名稱,獲取枚舉的值。也可以通過(guò)枚舉的值獲取枚舉的名稱。
object 只能通過(guò) key 獲取 value。
數(shù)字枚舉在不指定初始值的情況下,枚舉值會(huì)從0開(kāi)始遞增。
雖然在運(yùn)行時(shí),枚舉是一個(gè)真實(shí)存在的對(duì)象。但是使用 keyof 時(shí)的行為卻和普通對(duì)象不一致。必須使用 keyof typeof 才可以獲取枚舉所有屬性名。
never 和 void 的區(qū)別
never
:表示永遠(yuǎn)不存在的類型。比如一個(gè)函數(shù)總是拋出錯(cuò)誤,而沒(méi)有返回值。或者一個(gè)函數(shù)內(nèi)部有死循環(huán),永遠(yuǎn)不會(huì)有返回值。函數(shù)的返回值就是 never 類型。void
:沒(méi)有顯示的返回值的函數(shù)返回值為 void 類型。如果一個(gè)變量為 void 類型,只能賦予undefined 或者 null。
unknown 和 any 的區(qū)別
unknown 類型和 any 類型類似。
與 any 類型不同的是,unknown 類型可以接受任意類型賦值,但是 unknown 類型賦值給其他類型前,必須被斷言。
如何在 window 擴(kuò)展類型
? declare global { ? ? interface Window { ? ? ? myCustomFn: () => void; ? ? } ? }
元組越界問(wèn)題
let aaa: [string, number] = ['aaa', 5]; // 添加時(shí)不會(huì)報(bào)錯(cuò) aaa.push(6); // 打印整個(gè)元祖不會(huì)報(bào)錯(cuò) console.log(aaa); // ['aaa',5,6]; // 打印添加的元素時(shí)會(huì)報(bào)錯(cuò) console.log(aaa[2]); // error
重寫(override)和重載(overload)
重寫是指子類重寫“繼承”自父類中的方法 。雖然 TS 和 JAVA 相似,但是 TS 中的繼承本質(zhì)上還是 JS 的“繼承”機(jī)制—原型鏈機(jī)制
重載是指為同一個(gè)函數(shù)提供多個(gè)類型定義
class Animal { speak(word: string): string { return '動(dòng)作叫:' + word; } } class Cat extends Animal { speak(word: string): string { return '貓叫:' + word; } } let cat = new Cat(); console.log(cat.speak('hello')); /**--------------------------------------------**/ function double(val: number): number function double(val: string): string function double(val: any): any { if (typeof val == 'number') { return val * 2; } return val + val; } let r = double(1); console.log(r);
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js判斷所有表單項(xiàng)不為空則提交表單的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷所有表單項(xiàng)不為空則提交表單的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的, 現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11實(shí)現(xiàn)局部遮罩與關(guān)閉原理及代碼
實(shí)現(xiàn)局部遮罩,或許對(duì)某些朋友有著特殊的意義。局部遮罩的原理很簡(jiǎn)單另外加上關(guān)閉就有著另一番的效果,本文將介紹實(shí)現(xiàn)方法,感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-02-02Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12