TypeScript用法介紹、webpack配置ts

TypeScript是什麼？

TypeScript是微軟公司開發的一款開源的JavaScript超集語言！
JavaScript超集：當前任何JavaScript都是合法的TypeScript代碼！
TypeScript主要爲JavaScript提供了類型系統和ES6語法的支持！
Flow是一個類型檢查工具，TypeScript是一種開發語言！
TypeScript有自己的編譯工具，我們寫好的TypeScript代碼最終會通過編譯器編譯成JavaScript代碼進行運行！angular、vue、react都是支持ts的。

安裝

TypeScript命令行工具的安裝（TS編譯器）

npm i typescript -g

安裝好了之後，全局會提供一個tsc命令給我們使用！

編寫TypeScript代碼

通過tsc進行編譯，最終運行

ts配置文件的說明

創建配置文件

tsc --init

設置配置項（tsconfig.json）
- target: es5 指的就是將ts代碼要轉換成哪個版本的js代碼 es5 es3
- module: 指的就是將ts代碼轉換成js代碼之後，使用的模塊化的標準是什麼
- outDir: 指的就是將ts代碼轉換成js代碼之後，js代碼存放的文件夾路徑
- rootDir: 指的就是要將哪個目錄中的ts代碼進型轉換，ts代碼的存放路徑
- strict: 是否要將ts代碼轉換爲嚴格模式的js代碼！
- allowJs: true 允許ts語法中引入js的模塊
使用配置文件

tsc -p ./tsconfig.json

ts 如何配置webpack 4.0

yarn add ts-loader -D
……
webpack.config.js 中的配置
module： {
	rules: [{
		test: /\.tsx$/,
		use: 'ts-loader',
		exclude: /node_modules/
	}]
}

ts的幾種類型及用法

ts中類型的介紹

// number
let a: number = 10
let b: number = NaN
let c: number = Infinity
let d: number = 0xA12 //16進制
let e: number = 0b1010101 //2進制
let f: number = 0o75 //8進制

//string
let str1: string = ‘這是一個字符串’ //單、雙引號均可
let str2: string = `這是一個模板字符串${a}` //模板字符串，可以放變量

//boolean
let flag1: boolean = true; //false

//數組
//Array<數據類型>
let arr: Array = [1, 2, 3, 4]
// 數據類型 []
let arr1: number[] = [1, 2, 3]

//元組類型（Tuple）
//該類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。比如定義以下數組
let arr2: [number, string] = [5, ‘s’]
arr2[1] = ‘b’
arr2[0] = 1

//void 空值 (無返回值)
let res: void = undefined;

//undefined
// null
let res1: undefined = undefined;
let res2: null = null;

//any
let somevar: any = 10
somevar = ‘10’
somevar = undefined

//never類型
//永遠不可能有返回值的類型設置，比如死循環
function n(): never {
while (true) {}
}

//object類型
let o: object = {}
let o1: object = []

//對象類型
let o2: {name: string, age: number} = {
name: ‘gc’,
age: 15
}

//enum枚舉類型 g= 0/1/-1
enum gender {
male,
female,
unknow
}
let g: gender = gender.male

//類型斷言
let str4: any = ‘abc’
// let l: number = str4.length
let l: number = (<string>str4).length

ts中的類

 class Person {
  names: string  //與es6 不同的是， ts中屬性必須聲明，需要指定類型
  constructor(name: string) {
    this.names = name  //聲明好屬性之後，屬性必須賦值一個默認值或者在構造函數中進行初始化
  }
  sayHello (msg: string): void {
    console.log(msg)
    // return 'abc'
  }
}

ts中類的繼承

class Animal {
  age: number
  constructor (age: number) {
    this.age = age;
  }
  eat () {
    console.log("吃啥呢")
  }
}

class Dog extends Animal {
  type: string
  constructor (type: string, age: number) {
    super(age)
    this.type = type
  }
  //子類中如果出現和父類同名的方法 ，則會重寫父類的方法了
  eat () {
    console.log("吃西紅柿炒番茄")
  }
}
var dog = new Dog('中華田園犬', 18)
dog.eat()  //實現了Dog對Animal的繼承

ts中類成員的訪問修飾符

//訪問修飾符
//指的就是可以在類的成員前通過添加關鍵字來設置當前成員的訪問權限
//public  公開的。默認所有人都可以進行訪問
//private 私有的,只能在當前類中進行訪問，不能在任何實例上調用
//protected  受保護的,只能在當前類或者子類中進行訪問，不能在任何實例上調用

enum Color {
  red,
  yellow,
  blue
}

class Car {
  //如果不加訪問修飾符，默認公開 所有成員都可以訪問
  color: Color
  constructor () {
    this.color = Color.red
    //this.run()
  }
  private run() {}
  protected load() {}
}

let byd = new Car()
//byd.color 可以訪問
// byd.run()  不可以訪問
// byd.load()  不可以訪問

class Audi extends Car {
  sayHi() {
    console.log(this.color)
    // this.load() 可以訪問
  }
}

readonly只讀屬性修飾符，參數屬性修飾符

class Cat {
  readonly name: string
  constructor(public type: string) {
    this.name = '加菲'
  }
}

var cat = new Cat('中華田園貓')
//cat.name = '123'  報錯不可更改

ts中類成員存取器

class People {
  private _name: string = ''
  //屬性存取器 利用set，get對參數進行操作
  get name(): string {
    return this._name
  }
  set name(value: string) {
    //設置添加的校驗邏輯
    if(value.length < 2 || value.length > 5) {
      throw new Error('名字不合法')
    }
    this._name = value
  }
}

var p = new People();
p.name = '這個名字很長'

ts中的接口的作用及應用

//可以理解成一種規範
//例如option 需要url，type，data，success
//接口用interface 進行聲明

interface AjaxOption {
  url?: string, //可選屬性 ？
  type: string,
  data: object,
  success(data: object): void
}

 function ajax (option: AjaxOption) {}

 ajax({
    // url: "http:www.baidu.com",  //url是可選屬性，可寫可不寫，其他三個屬性不寫則報錯
    type: "get",
    data: {},
    success(data) {}
 })

 interface Point {
   readonly x: number,
   y: number,
   [propName: string]: any   //爲多餘的屬性定義，如下邊ps1的成員z
 }

 let ps: Point = {
   x: 10,
   y: 10
 }

ps.x = 1111 //x屬性爲只讀屬性，賦值報錯

let ps1: Point = {
  x: 1,
  y: 2,
  z: 3  //z屬性爲未聲明的屬性
}

ts中函數類型的接口

let sum: Suminterface = function (a:number, b: number) {
  return a + b
}

interface Suminterface {
  (a: number, b: number): number   //a、b是number類型  返回值也是number類型
}

ts中的類類型的接口

interface PersonInter {
  name: string,
  age: number,
  eat(): void
}

class jj implements PersonInter{
  name = 'jj';
  age = 11;
  eat() {}
}

ts中接口的繼承

//接口繼承接口
interface TwoDPoint {
  x: number,
  y: number
}

interface ThreeDPoint extends TwoDPoint {
  z: number
}
let ps2: ThreeDPoint = {
  z: 100,
  x: 1,
  y: 4
}

// 接口繼承類
class Bird {
  type: string = '黃鸝'
  fly(): void {}
}

interface Fly extends Bird {}

let fs: Fly = {
  type: '白鷺',
  fly(): void {}
}

以上是typescript的全部內容，碼字不易，且讀且珍惜！

TypeScript用法介紹、webpack配置ts

TypeScript是什麼？

安裝

編寫TypeScript代碼

通過tsc進行編譯，最終運行

ts配置文件的說明

ts 如何配置webpack 4.0

ts的幾種類型及用法

致遠OA及相關OA系統集成與二次開發

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

【面試準備】項目經驗——接口自動化項目

vue-video-player設置中文

es6 合併多個對象

css 文字超出省略號

vue-cli搭配mockjs模擬可抓到的請求

js表情字符串互轉

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結