[TOC]
## :-: 類型約束
```
// 約束變量必須為string類型,如果賦值為數字或其他類型則立馬報錯(靜態的,不需要運行)
let say: string = "hello";
// 約束函數
function sum(a:number, b:number):number { return a + b; }
let num:number = sum(123, 456);
// 約束數組有兩種寫法
let nums:number[] = [1, 2, 3];
let nums1:Array<number> = [4, 5, 6];
// :void -- 表示函數沒有返回值
function never():void { console.log('xxx') }
// :never -- 表示函數永遠不會有返回
function never():never {
while (true) { // ··· 死循環 ··· }
}
```
## :-: 聯合類型
```
// 約束變量可以是多種類型
let numStr:string|number = 123;
numStr = 'abc';
```
## :-: 字面量類型
```
// 字面量類型 約束變量只能賦值 "男" 或 "女"
let gender: "男" | "女"; gender = "男"; gender = "女";
```
## :-: 函數重載
```
// 約束函數傳統的a、b參數'保持一致'
function xxx(a: string, b: string): string;
function xxx(a: number, b: number): number;
function xxx(a: string | number, b: string | number) {
if (typeof a === "string" && typeof b === "string") {
return a + b;
}
if (typeof a === "number" && typeof b === "number") {
return a * b;
}
new Error("xxxxxxxx");
}
xxx(123, 13);
```
## :-: 類型別名
```
// 將一種類型單獨抽離出來。(自定義類型)
type Gender = "男" | "女";
let gender: Gender; gender = "女"; gender = "男";
```
## :-: 類型枚舉
```
// 會參與編譯,用于后期可能會批量修改的變量值
enum _gender { male = "小哥哥", female = "小姐姐" }
let gender:_gender = _gender["man"]; // '小哥哥'
```
## :-: 定義接口
```
// 定義接口(約束對象)
interface User {
name: string | null;
age: number;
sayHello: (text: string) => void;
}
let user: User = {
name: null,
age: 18,
sayHello: function(content) {
console.log(content);
}
};
user.sayHello("Hello World~");
// 三種約束函數的形式對比
type Condition1 = (n: number) => boolean;
type Condition2 = {
(n: number): boolean;
};
interface Condition {
(n: number): boolean;
}
// 接口的繼承
interface A { T1:string; }
interface B { T2:number; }
interface C extends A, B { T3:boolean; }
let oA:C = { T1:"123", T2:456, T3:true } // oA 被賦值時必須為 T1:string,T2:number,T3:boolean 不能多也不能少,只能剛剛好
```
## :-: TS修飾符
```
// readonly -- 被修飾的字段為只讀類型 (不在編譯結果中)
interface user1 {
readonly id: string;
name?: string; // 可以為空
age: number;
xxx: boolean;
}
const user1: user1 = {
id: "id-001",
// name: undefined,
age: 18,
xxx: true
};
// user1.id = "id-002"; // 只讀,不能再次修改
user1.age = 19;
user1.xxx = false;
// 數組中用readonly修飾后,所有的成員不可被改變。(兩種寫法效果一致)
// let arr1: readonly (string|number)[] = [11, "22", 33, "44", 55];
let arr1: ReadonlyArray<number|string> = [11, "22", 33, "44", 55];
// arr1[2] = " 只讀:不可改變,會報錯 ";
arr1 = [1, 2, 3]; // 因為是let不是const賦值,arr1可以整個被修改。
```
## :-: TS類
```
// 訪問修飾符(public、private)可以控制類中的某個成員的訪問權限
// - public -- 默認公開的,所有代碼均可訪問。
// - private -- 私有的,只有在類中可以訪問。不對外暴露,防止外部修改
class User3 {
readonly id: string = `id-${+new Date()}`; // 不能改變
// name: string;
gender: "男" | "女" = "男"; // 默認賦值
pid?: string; // 可空
private password: string = "123456"; // 私有屬性,不允許外部使用。
// public name:string -- 這種寫法是法語糖(簡寫),會直接增加并修改this.name (只要加了修飾符就會觸發這個語法糖)
constructor(public name: string, private _age: number) {
// this.name = name;
this.age = _age;
}
// ES6訪問器:用于控制屬性的訪問和讀取。如果將'set age'這個函數整個注釋掉,this.age將會是一個只讀的屬性。
set age(val: number) {
// 可以通過各種條件來約束限制值的范圍
if (val < 18) this._age = 18;
else if (val > 100) this._age = 100;
else this._age = Math.floor(val);
}
get age() { return this._age; }
}
const user3 = new User3("xxx", 26.8);
console.log(user3.age); // 26
user3.age = -300.5; // 18
```
## :-: 泛型
```
// 泛型:是指附屬于函數、類、接口、類型別名之上的類型。
// 泛型相當于是一個類型變量,在定義時,無法預先知道具體的類型,可以用該變量來代替,只有到調用時才能確定它的類型。(自動推導)
function take<T>(arr:T[], n:number):T[] {
if (n >= arr.length) { return arr; }
const newArr:T[] = [];
arr.map((item, index) => index < n && newArr.push(item));
return newArr;
}
let newArr = take<string|number>([1, "2", 3, 4, "5"], 2);
console.log(newArr); // [ 1, '2' ] :(string|number)[]
take([1, true, 3], 5); // 自動推導返回類型 :(number|boolean)[]
// 在類中使用泛型
class ArrayHelper<T> {
constructor(private arr: T[]) {} // 語法糖
log(): T[] { return this.arr; }
}
new ArrayHelper([1, "2", null]).log(); // :(string|number|null)[]
// 泛型約束:用于實現泛型的取值
interface hasNameProperty { name: string; }
// 鴨子辯型法,通過繼承接口,可以約束傳入的obj必須包含name的屬性,并且為string類型。
function nameToUpperCase<T extends hasNameProperty>(obj: T): T {
obj.name = "xxx";
return obj;
}
const o = {
name: "kevin yuan",
age: 22, gender: "男", xxx: "xxx"
};
const newO = nameToUpperCase(o);
console.log(newO.name, newO.xxx);
// 多泛型
function mixinArray<T,K>( arr1:T[], arr2:K[] ) :(T|K)[] {
return [...arr1,...arr2];
}
mixinArray([1, 2, 3], ["a", "b", "c"]); // :(string|number)[]
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request