theme: channing-cyan

TypeScript的特點(diǎn)：

• JavaScript的超集，滿足所有的JS語(yǔ)法
• 含有面向?qū)ο蟮撵o態(tài)類型

起步安裝：1、npm i typescript -g 2、tsc 文件名

一、TS的基本數(shù)據(jù)類型

基本數(shù)據(jù)類型：number、boolean、string、undefined、null、symbol、bigint、void

當(dāng)中的類型有大小寫的區(qū)分：大寫的類型是給對(duì)象使用，小寫的類型是原生類型

二、TS的任意類型

任意數(shù)據(jù)類型：any、unknown

any

any類型可以賦值給任意類型的，也可以被任意類型的賦值。

unknown

unknown類型的特點(diǎn)：

• unknown類型只能賦值給自身或者any
• unknown類型不能調(diào)用任何屬性和方法
• unknown類型比any更加安全

額外知識(shí)

object、Object以及{}的三個(gè)區(qū)別：

• Object是跟原型鏈有關(guān)的，原型鏈頂層是Object，所以值的類型和引用類型都是指向Object，所以包含所有類型
• object是所有非值類型的類型
• {}是與第一個(gè)一樣，但是字面量模式下不能修改值

三、接口類型

interface的作用：定義一種約束，讓數(shù)據(jù)結(jié)構(gòu)滿足約束的格式

1、當(dāng)interface重名的時(shí)候，會(huì)進(jìn)行合并
ˋˋˋjs
ˋˋˋ
2、任意的索引，讓接口屬性動(dòng)態(tài)化
3、可選屬性
4、只讀屬性
5、接口的繼承，可以繼承多個(gè)接口，最后結(jié)果就是將多個(gè)接口進(jìn)行合并，以逗號(hào)分隔
6、定義函數(shù)類型

四、數(shù)組類型

1、類型[]

最簡(jiǎn)單和最直觀表示數(shù)組類型的方法，一維就是一個(gè)括號(hào)，二維就是兩個(gè)括號(hào)，后面的以此類推

let arr: number[] = [1, 2, 3];

2、用接口表示數(shù)組

// 利用接口的任意索引屬性來(lái)實(shí)現(xiàn)數(shù)組結(jié)構(gòu)的類型的定義
interface NumArray {
  [index: number]: number;
}

let arr: NumArray = [1, 2, 3];

3、對(duì)于arguments這個(gè)偽類數(shù)組的處理

1)采用TS的內(nèi)置對(duì)象IArguments
IArguments內(nèi)部實(shí)現(xiàn):

interface IArguments {
  [index: number]: number;
  length: number;
  callee: Function;
}

五、函數(shù)類型

1、函數(shù)定義類型和返回值、箭頭函數(shù)定義類型和返回值

// 定義普通函數(shù)類型
function add(num1: number, num2: number): number {
  return num1 + num2;
}
// 定義箭頭函數(shù)的參數(shù)類型和返回值
const descrease = (num1: number, num2: number): number => {
  return num1 - num2;
};

2、函數(shù)重載

重載就是函數(shù)名一樣，但是參數(shù)不一樣，從而可以保證不同的時(shí)候調(diào)用不同的參數(shù)

3、接口定義函數(shù)

// 接口定義函數(shù)
interface Add {
  (num1: number, num2: number): number;
}

const add: Add = (num1: number, num2: number): number => {
  return num1 + num2;
};

add(1,2)

六、聯(lián)合類型、交叉類型、類型斷言

聯(lián)合類型就是擴(kuò)展某個(gè)變量的類型，讓變量可以是這個(gè)當(dāng)中任一個(gè)類型，通過(guò)‘|’
交叉類型就是擴(kuò)張某個(gè)變量的類型，和extends類似，將合并信息，通過(guò)‘&’
類型斷言可以對(duì)某個(gè)變量改成固定的類型，但是使用的時(shí)候需要注意，可能語(yǔ)法錯(cuò)誤提示沒(méi)有了，但是會(huì)導(dǎo)致一些語(yǔ)法錯(cuò)誤

七、TS的內(nèi)置對(duì)象

JavaScript當(dāng)中有許多的內(nèi)置對(duì)象，這些內(nèi)置對(duì)象可以在TypeScript當(dāng)做定義好的類型來(lái)使用

代碼雨TS練習(xí)：

let canvas = document.querySelector('#canvas') as HTMLCanvasElement;// 獲取canvas元素
let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;// 畫(huà)布渲染內(nèi)容
canvas.height = screen.availHeight;// 最大的窗口高度
canvas.width = screen.availWidth;// 最大的窗口寬度

let str: string[] = 'XZSDASRWQJKHEWQKHEJLKQWHEKQWHE'.split('');
let Arr = Array(Math.ceil(canvas.width / 10)).fill(0);
console.log(Arr);
const rain = () => {
  ctx.fillStyle = 'rgba(0,0,0,0.5)';// 背景顏色
  ctx.fillRect(0, 0, canvas.width, canvas.height);// 背景的大小
  ctx.fillStyle = '#0f0';// 字體顏色
  Arr.forEach((item, index) => { // 數(shù)組用來(lái)實(shí)現(xiàn)代碼雨高度的改變
    ctx.fillText(
      str[Math.floor(Math.random() * str.length)],
      index * 10,
      item + 10
    );
    Arr[index] =
      item >= canvas.height || item > 10000 * Math.random() ? 0 : item + 10;
  });
};

setInterval(rain, 100);

八、class類

1、定義一個(gè)簡(jiǎn)單的類

TypeScript的類的定義和java當(dāng)中類的定義一樣，需要先聲明屬性，但是JS中可以直接使用constructor中this去直接指向?qū)嵗龑?duì)象來(lái)添加屬性

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
  }

  run() {}
}

2、類的修飾符

• protected：定義的私有變量只能在內(nèi)部和繼承的子類中訪問(wèn)，不能在外部訪問(wèn)
• private：私有修飾符，只能在類的內(nèi)部訪問(wèn)調(diào)用
• public：公開(kāi)修飾符，都可以訪問(wèn)調(diào)用
• static：靜態(tài)修飾符，只有通過(guò)這個(gè)類名才可以訪問(wèn)調(diào)用

雖然有這些關(guān)鍵字和java很類似，但是它的本身還是JS，TS只是做了類型校驗(yàn)，會(huì)有語(yǔ)法提示而已，并不會(huì)去約束語(yǔ)法

class Person {
  public name: string;
  private age: number;

  constructor(name: string, age?: number) {
    this.name = name;
  }

  static run() {}

  getName() {
    console.log(this.name);
  }
}

3、interface定義類

4、抽象類

九、TS元組類型

元組類型定義：是一個(gè)數(shù)量固定，元素可以類型不同的集合。
好處：可以將多個(gè)元素作為一個(gè)單元傳遞
基本語(yǔ)法：

// 當(dāng)對(duì)arr數(shù)組進(jìn)行重新賦值的時(shí)候如果超過(guò)了固定數(shù)量將會(huì)報(bào)語(yǔ)法提示，但是對(duì)于一些push方法都不會(huì)有語(yǔ)法錯(cuò)誤提示
let arr:  [string, boolean] = ['1', false];

使用readonly關(guān)鍵字可以保證無(wú)法對(duì)這個(gè)元組進(jìn)行任何操作，例如數(shù)組進(jìn)行push方法也會(huì)提示語(yǔ)法錯(cuò)誤

let arr: readonly [string, boolean] = ['1', false];

arr = ['123', true];

十、枚舉類型

1、數(shù)字枚舉

數(shù)字枚舉默認(rèn)是從0開(kāi)始不斷遞增，如果自己對(duì)定義了初始值將會(huì)自動(dòng)遞增

enum Color {
  Red,
  Green,
  Blue,
}

console.log(Color.Green); // 1

2、字符串枚舉

字符串沒(méi)有自動(dòng)增長(zhǎng)的行為，因此字符串可以很好地序列化。字符串枚舉必須保證每一個(gè)成員都要有字符串字面量

enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'bule',
}

console.log(Color.Green); // green

3、異構(gòu)枚舉

異構(gòu)枚舉就是數(shù)字枚舉和字符串枚舉一起使用，混合在一起

enum Color {
  No = 'No',
  Yes = 1,
}

4、const枚舉

• const聲明的枚舉會(huì)被編譯完成常量

const enum Types{
    NO = 'No',
    Yes = 1
}

• 普通聲明的枚舉會(huì)被編譯完成為一個(gè)對(duì)象

enum Color {
  Red = 'red',
  Green = 'green',
  Blue = 'bule',
}

5、反向映射

枚舉成員都可以有正向映射和反向映射，正向映射就是name->value,value->name
注意：字符串枚舉成員不會(huì)有反向映射

enum Enum {
  fall,
}

let a = Enum.fall;
console.log(a); // 0
let nameEnum = Enum[a];
console.log(nameEnum); // fall

十二、Never類型

作用：表示不應(yīng)該存在的狀態(tài)

它和void的差異：

• void它是沒(méi)有返回值但不會(huì)出錯(cuò)，never它是沒(méi)有返回值只會(huì)有異常
• never在聯(lián)合類型當(dāng)中會(huì)被直接移除

十四、泛型

作用：它就是提供一個(gè)動(dòng)態(tài)的類型，你可以使用不同的泛型參數(shù)名，只要在數(shù)量和使用方式上對(duì)應(yīng)就行

function showArray<T>(a:T,b:T):Array<T>{
  return [a,b]
}

showArray(1,2)

1、泛型約束

作用：對(duì)泛型進(jìn)行類型的約束，保證它具有一定的屬性，能夠提供語(yǔ)法提示

interface Len {
  length:number
}

function showArrayLength<T extends Len>(arg:T){
  arg.length
}

showArrayLength([1,2])

使用keyof約束對(duì)象

function prop<T,K extends keyof T>(obj:T,key:K){
  return obj[key]
}

let obj = {a:'1',b:'2'}

prop(obj,'c') //Argument of type '"c"' is not assignable to parameter of type '"a" | "b"'
prop(obj,'a')

2、泛型類

它的定義和定義函數(shù)方式一致，在類名后面加<類型>

十五、tsconfig.json

生成tsconfig.json文件：通tsc --init生成
詳細(xì)的ts的配置文件：

"compilerOptions": {
  "incremental": true, // TS編譯器在第一次編譯之后會(huì)生成一個(gè)存儲(chǔ)編譯信息的文件，第二次編譯會(huì)在第一次的基礎(chǔ)上進(jìn)行增量編譯，可以提高編譯的速度
  "tsBuildInfoFile": "./buildFile", // 增量編譯文件的存儲(chǔ)位置
  "diagnostics": true, // 打印診斷信息 
  "target": "ES5", // 目標(biāo)語(yǔ)言的版本
  "module": "CommonJS", // 生成代碼的模板標(biāo)準(zhǔn)
  "outFile": "./app.js", // 將多個(gè)相互依賴的文件生成一個(gè)文件，可以用在AMD模塊中，即開(kāi)啟時(shí)應(yīng)設(shè)置"module": "AMD",
  "lib": ["DOM", "ES2015", "ScriptHost", "ES2019.Array"], // TS需要引用的庫(kù)，即聲明文件，es5 默認(rèn)引用dom、es5、scripthost,如需要使用es的高級(jí)版本特性，通常都需要配置，如es8的數(shù)組新特性需要引入"ES2019.Array",
  "allowJS": true, // 允許編譯器編譯JS，JSX文件
  "checkJs": true, // 允許在JS文件中報(bào)錯(cuò)，通常與allowJS一起使用
  "outDir": "./dist", // 指定輸出目錄
  "rootDir": "./", // 指定輸出文件目錄(用于輸出)，用于控制輸出目錄結(jié)構(gòu)
  "declaration": true, // 生成聲明文件，開(kāi)啟后會(huì)自動(dòng)生成聲明文件
  "declarationDir": "./file", // 指定生成聲明文件存放目錄
  "emitDeclarationOnly": true, // 只生成聲明文件，而不會(huì)生成js文件
  "sourceMap": true, // 生成目標(biāo)文件的sourceMap文件
  "inlineSourceMap": true, // 生成目標(biāo)文件的inline SourceMap，inline SourceMap會(huì)包含在生成的js文件中
  "declarationMap": true, // 為聲明文件生成sourceMap
  "typeRoots": [], // 聲明文件目錄，默認(rèn)時(shí)node_modules/@types
  "types": [], // 加載的聲明文件包
  "removeComments":true, // 刪除注釋 
  "noEmit": true, // 不輸出文件,即編譯后不會(huì)生成任何js文件
  "noEmitOnError": true, // 發(fā)送錯(cuò)誤時(shí)不輸出任何文件
  "noEmitHelpers": true, // 不生成helper函數(shù)，減小體積，需要額外安裝，常配合importHelpers一起使用
  "importHelpers": true, // 通過(guò)tslib引入helper函數(shù)，文件必須是模塊
  "downlevelIteration": true, // 降級(jí)遍歷器實(shí)現(xiàn)，如果目標(biāo)源是es3/5，那么遍歷器會(huì)有降級(jí)的實(shí)現(xiàn)
  "strict": true, // 開(kāi)啟所有嚴(yán)格的類型檢查
  "alwaysStrict": true, // 在代碼中注入'use strict'
  "noImplicitAny": true, // 不允許隱式的any類型
  "strictNullChecks": true, // 不允許把null、undefined賦值給其他類型的變量
  "strictFunctionTypes": true, // 不允許函數(shù)參數(shù)雙向協(xié)變
  "strictPropertyInitialization": true, // 類的實(shí)例屬性必須初始化
  "strictBindCallApply": true, // 嚴(yán)格的bind/call/apply檢查
  "noImplicitThis": true, // 不允許this有隱式的any類型
  "noUnusedLocals": true, // 檢查只聲明、未使用的局部變量(只提示不報(bào)錯(cuò))
  "noUnusedParameters": true, // 檢查未使用的函數(shù)參數(shù)(只提示不報(bào)錯(cuò))
  "noFallthroughCasesInSwitch": true, // 防止switch語(yǔ)句貫穿(即如果沒(méi)有break語(yǔ)句后面不會(huì)執(zhí)行)
  "noImplicitReturns": true, //每個(gè)分支都會(huì)有返回值
  "esModuleInterop": true, // 允許export=導(dǎo)出，由import from 導(dǎo)入
  "allowUmdGlobalAccess": true, // 允許在模塊中全局變量的方式訪問(wèn)umd模塊
  "moduleResolution": "node", // 模塊解析策略，ts默認(rèn)用node的解析策略，即相對(duì)的方式導(dǎo)入
  "baseUrl": "./", // 解析非相對(duì)模塊的基地址，默認(rèn)是當(dāng)前目錄
  "paths": { // 路徑映射，相對(duì)于baseUrl
    // 如使用jq時(shí)不想使用默認(rèn)版本，而需要手動(dòng)指定版本，可進(jìn)行如下配置
    "jquery": ["node_modules/jquery/dist/jquery.min.js"]
  },
  "rootDirs": ["src","out"], // 將多個(gè)目錄放在一個(gè)虛擬目錄下，用于運(yùn)行時(shí)，即編譯后引入文件的位置可能發(fā)生變化，這也設(shè)置可以虛擬src和out在同一個(gè)目錄下，不用再去改變路徑也不會(huì)報(bào)錯(cuò)
  "listEmittedFiles": true, // 打印輸出文件
  "listFiles": true// 打印編譯的文件(包括引用的聲明文件)
}
 
// 指定一個(gè)匹配列表（屬于自動(dòng)指定該路徑下的所有ts相關(guān)文件）
"include": [
   "src/**/*"
],
// 指定一個(gè)排除列表（include的反向操作）
 "exclude": [
   "demo.ts"
],
// 指定哪些文件使用該配置（屬于手動(dòng)一個(gè)個(gè)指定文件）
 "files": [
   "demo.ts"
]

十六、namespace命名空間

作用：避免全局變量造成污染

• 通過(guò)export暴露
• 通過(guò)namespace關(guān)鍵字定義

當(dāng)兩個(gè)命名空間重名的時(shí)候會(huì)進(jìn)行合并

十八、聲明文件declare

作用：提供語(yǔ)法提示和代碼補(bǔ)全等功能

使用：通過(guò).d.ts文件去寫declare聲明

Ts寫發(fā)布訂閱模式

interface EventFace {
  on: (name: string, callback: Function) => void;
  emit: (name: string, ...args: Array<any>) => void;
  off: (name: string, fn: Function) => void;
  once: (name: string, fn: Function) => void;
}

interface List {
  [key: string]: Array<Function>;
}

class Dispatch implements EventFace {
  list: List;
  constructor() {
    this.list = {};
  }

  on(name: string, callback: Function) {
    const callbackList: Array<Function> = this.list[name] || [];
    callbackList.push(callback);
    this.list[name] = callbackList;
  }

  emit(name: string, ...args: Array<any>) {
    let eventName = this.list[name];
    if (eventName) {
      eventName.forEach((fn) => {
        fn.apply(this, args);
      });
    } else {
      console.error('該事件未被監(jiān)聽(tīng)');
    }
  }

  off(name: string, fn: Function) {
    let eventName = this.list[name];
    if (eventName) {
      let index = eventName.findIndex((fns) => fns === fn);
      eventName.splice(index, 1);
    } else {
      console.error('該事件未被注冊(cè)');
    }
  }

  once(name: string, fn: Function) {
    let decor = (...args: Array<any>) => {
      fn.apply(this, args);
      this.off(name, decor);
    };
    this.on(name, decor);
  }
}

let myEvent = new Dispatch();

myEvent.on('show', () => {
  console.log('展示');
});
myEvent.on('show', () => {
  console.log('展示1', arguments);
});
myEvent.once('show', () => {
  console.log('helloworld');
});
myEvent.emit('show', 'zjt', 'hello');

二十四、partial和pick

• partial

作用：快速設(shè)置T中的所有屬性為可選

type Person = {
  name:string
  age:number
}
/**
 * type p = {
    name?: string;
    age?: number;
}
 */
type p = Partial<Person>

源碼：

// 通過(guò)遍歷T類型的所有屬性來(lái)實(shí)現(xiàn)可選
type MyPartial<T> = {
  [p in keyof T]?:T[p]
}

• pick

作用：在T中選取指定一組屬性，返回一個(gè)新的類型定義

type Person = {
  name: string;
  age: number;
  text: string;
  address: string;
};

type Ex = 'text' | 'age';

type A = Pick<Person, Ex>;

源碼：

// k被進(jìn)行泛型約束，確保K類型一定在T里面，再通過(guò)遍歷K來(lái)實(shí)現(xiàn)類型的選定
type MyPick<T, K extends keyof T> = {
  [P in K]: T[P];
};

二十五、readonly和record

• readonly

作用：將T類型的所有屬性變?yōu)橹蛔x屬性

type Person = {
  name:string
  age:number
}
/**
 * type p = {
    readonly name: string;
    readonly age: number;
}
 */
type p = Readonly<Person>

源碼：

type MyReadonly<T> = {
  readonly [P in keyof T]:T[P]
}

• record

作用：根據(jù)類型參數(shù)來(lái)映射出一個(gè)key，value形式的類型出來(lái)

type petsGroup = 'dog' | 'cat' | 'fish'

interface IPetInfo{
  name:string,
  age:number
}

/**
 * type IPets = {
    dog: IPetInfo;
    cat: IPetInfo;
    fish: IPetInfo;
}
 */
type IPets = Record<petsGroup,IPetInfo>

源碼：

type MyRecord<T extends keyof any,K> = {
  [P in T]:K
}

二十七、infer關(guān)鍵字

作用：

• 定義關(guān)鍵字起占位效果

type zhanwei<T> = T extends Array<infer U> ? U : T;

type A = zhanwei<(string | Symbol)[]>;

• 類型提取

type Arr = ['a','b','c']
 
type First<T extends any[]> =  T extends [infer First,...any[]] ? First : []
 
type a = First<Arr>

• 遞歸

type Arr = ['a', 'b', 'c'];

type Reverse<T extends any[]> = T extends [infer first, ...infer rest] ? [...Reverse<rest>,first] : [];

type a = Reverse<Arr>;

二十八、extends關(guān)鍵字

作用：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-700651.html

• 繼承/拓展
• 約束
• 分配

到了這里，關(guān)于【TypeScript】基礎(chǔ)知識(shí)學(xué)習(xí)筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！