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 consttype 和 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-02
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

