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)入測試
//導(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)出多個函數(shù)
?
//函數(shù)別名形式導(dǎo)出
export {a1 as ADD_FUNC ,b1 as DEL_FUNC};
?
//默認(rèn)導(dǎo)出,一個模塊只能有一個默認(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)出測試
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知識點整理
TS 和 JS 有什么差異
JS:動態(tài)類型,運(yùn)行時明確變量的類型,變量的類型由變量的值決定,并跟隨值的改變而改變;直接運(yùn)行在瀏覽器和 node.js 環(huán)境中;弱類型,數(shù)據(jù)類型可以被忽略的語言。一個變量可以賦不同數(shù)據(jù)類型的值。
TS:靜態(tài)類型,聲明時確定類型,之后不允許修改;編譯運(yùn)行,始終先編譯成 JavaScript 再運(yùn)行;強(qiáng)類型,一旦一個變量被指定了某個數(shù)據(jù)類型,如果不經(jīng)過強(qiáng)制轉(zhuǎn)換,那么它就永遠(yuǎn)是這個數(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 中的類
類中的實例屬性, 需要提前聲明,,才能在 constructor 構(gòu)造函數(shù)中進(jìn)行實例屬性的初始化。
存取器的操作:就像操作普通對象一樣即可
- set 方法:負(fù)責(zé)對內(nèi)部的私有屬性賦值.,同時可以達(dá)到對外部數(shù)據(jù)的攔截作用。
- get 方法:負(fù)責(zé)對外提供私有屬性的值。
TS 的訪問修飾符
public:公共的private:私有的,外部類不可訪問protected:受保護(hù)的,類的內(nèi)部或子類可訪問readonly:只讀的
TS 中的接口 - interface
interface 接口,主要描述對象結(jié)構(gòu),一個對象中應(yīng)該有什么屬性,賦值的時候需要符合接口規(guī)范。它主要針對的是對象結(jié)構(gòu),type關(guān)鍵字也可以描述對象, 除此之外,type 還可以描述基本類型,聯(lián)合類型等。
// (newName: string) => void: 這就是類型, 對一個函數(shù)進(jìn)行約束.
// 利用接口對函數(shù)進(jìn)行約束, 描述一個函數(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), 對類中的屬性和方法進(jìn)行約束.
interface AnimalType {
? aname: string;
? eat(n: string): void;
}
// implements 表示一個類要實現(xiàn)某個接口, 必須按照接口的要求, 實現(xiàn)這個類的內(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ù)/接口/類型 內(nèi)部都會根據(jù)這個類型做業(yè)務(wù)處理。簡單的說,“泛型就是把類型當(dāng)成參數(shù)”。
// 制作泛型接口, 用T來表示廣泛的類型, 就看使用的時候, 傳遞的是什么類型.
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)從這個文件中查找類名名稱,.ts不需要單獨導(dǎo)入這個文件,.d.ts文件也不需要單獨的導(dǎo)出某個類型。
// 對于聯(lián)合類型比較長的情況,可以通過type關(guān)鍵字,給這個聯(lián)合類型起個別名(相當(dāng)于自定義了一種新類型)。重用的時候?qū)懫饋矸奖恪?
type baseTypeArr = (number | string | boolean)[];
// number | string | boolean | number[]: 聯(lián)合類型,表示當(dāng)前這個變量,允許接收number/string/boolean/number[]這幾個類型中的一個即可。
type baseType = number | string | boolean | number[];
// 對于初始值可能為null/undefined的類型,也使用聯(lián)合類型約束
declare type dataType = string | undefined;
declare type arrType = number[] | null;
// declare 聲明類型 namespace 命名空間 ,每個命名空間內(nèi)都是獨立作用域,其實就是將不同的類型放到各自的模塊內(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屬性可有可無
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:讓一個變量可以是任意類型的值,被any標(biāo)識的數(shù)據(jù),ts會放棄對它的檢查,而是直接通過編譯,ts失效了。一定是在不確定類型/類型不統(tǒng)一是才使用any。
};
declare interface MyPeople {
? pname: string;
? page: number;
? psex?: boolean;
}const 和 readonly 的區(qū)別
const:用于變量,在運(yùn)行時檢查;使用 const 變量保存的數(shù)組,可以使用 push、pop 等方法。readonly:用于屬性,在編譯時檢查;使用Readonly Array<number>聲明的數(shù)組不能使用push,pop等方法。
枚舉和常量枚舉(const 枚舉)的區(qū)別
枚舉會在編譯時被編譯成一個對象,可以當(dāng)作對象使用。
const 枚舉會在 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對象兼容性是協(xié)變,父類 <= 子類,是可以的。子類 <= 父類,錯誤。Contravariant逆變,禁用strictFunctionTypes編譯,函數(shù)參數(shù)類型是逆變的,父類 <= 子類,是錯誤。子類 <= 父類,是可以的。Bivariant雙向協(xié)變,函數(shù)參數(shù)的類型默認(rèn)是雙向協(xié)變的。父類 <= 子類,是可以的。子類 <= 父類,是可以的。
TS 中同名的 interface 或者同名的 interface 和 class 可以合并嗎
interface會合并class不可以合并
如何使 TS 項目引入并識別編譯為 JS 的 npm 庫包
- npm install @types/xxxx
- 自己添加描述文件
TS 如何自動生成庫包的聲明文件
可以配置tsconfig.json文件中的declaration和outDir
- 1.declaration: true, 將會自動生成聲明文件
- 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等基于名義的語言則會拋錯。
interface Named { name: string }
class Person {
? name: string
}
let p: Named
// ok
p = new Person()const 斷言
const斷言,typescript會為變量添加一個自身的字面量類型
- 對象字面量的屬性,獲得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è)重于直接定義類型,還可以給一個或多個類型起一個新名稱(當(dāng)變量用),interface 只能定義對象數(shù)據(jù)結(jié)構(gòu)類型;
- type 可以為基本類型、聯(lián)合類型或元組甚至any等等賦值定義別名,interface 明顯辦不到;
- interface 定義重名了會合并屬性,type 辦不到(會報錯提醒 重復(fù)定義);
- type 不支持繼承。
implements 與 extends 的區(qū)別
extends, 子類會繼承父類的所有屬性和方法。implements,使用 implements 關(guān)鍵字的類將需要實現(xiàn)需要實現(xiàn)的類的所有屬性和方法。
枚舉和 object 的區(qū)別
枚舉可以通過枚舉的名稱,獲取枚舉的值。也可以通過枚舉的值獲取枚舉的名稱。
object 只能通過 key 獲取 value。
數(shù)字枚舉在不指定初始值的情況下,枚舉值會從0開始遞增。
雖然在運(yùn)行時,枚舉是一個真實存在的對象。但是使用 keyof 時的行為卻和普通對象不一致。必須使用 keyof typeof 才可以獲取枚舉所有屬性名。
never 和 void 的區(qū)別
never:表示永遠(yuǎn)不存在的類型。比如一個函數(shù)總是拋出錯誤,而沒有返回值?;蛘咭粋€函數(shù)內(nèi)部有死循環(huán),永遠(yuǎn)不會有返回值。函數(shù)的返回值就是 never 類型。void:沒有顯示的返回值的函數(shù)返回值為 void 類型。如果一個變量為 void 類型,只能賦予undefined 或者 null。
unknown 和 any 的區(qū)別
unknown 類型和 any 類型類似。
與 any 類型不同的是,unknown 類型可以接受任意類型賦值,但是 unknown 類型賦值給其他類型前,必須被斷言。
如何在 window 擴(kuò)展類型
? declare global {
? ? interface Window {
? ? ? myCustomFn: () => void;
? ? }
? }元組越界問題
let aaa: [string, number] = ['aaa', 5]; // 添加時不會報錯 aaa.push(6); // 打印整個元祖不會報錯 console.log(aaa); // ['aaa',5,6]; // 打印添加的元素時會報錯 console.log(aaa[2]); // error
重寫(override)和重載(overload)
重寫是指子類重寫“繼承”自父類中的方法 。雖然 TS 和 JAVA 相似,但是 TS 中的繼承本質(zhì)上還是 JS 的“繼承”機(jī)制—原型鏈機(jī)制
重載是指為同一個函數(shù)提供多個類型定義
class Animal {
speak(word: string): string {
return '動作叫:' + 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);以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap學(xué)習(xí)筆記之環(huán)境配置(1)
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之環(huán)境配置的具體操作方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12

