TS學習

隨着vue3.0的即將到來，是時候學習一下TS了

　　簡介：TypeScript是一種由微軟開發的自由和開源的編程語言。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。

　　ts並不是js語言，所以它是不能直接被瀏覽器識別的，所有從ts到js是有一個轉換的過程，我們可以稱之為編譯。

　　ts轉化到js和es6到es5是類似的，所以我們借助webpack 構建工具，將要使用的轉化插件是ts-loader,和css-loader,style-loader都是差不多的

　　https://www.webpackjs.com/guides/typescript/ webpack 使用指南

　　webpack 4 　安裝webpack-cli  創建webpack.config.js 文件 

　　執行 npm install --save-dev typescript ts-loader 安裝轉化插件，創建tsconfig.json 配置文件

　　整體的項目結構如圖

　　

 

 

 　　測試一下，我們創建一個ts文件tsdome.js,經過編譯后申請bundle.js

　　tsdome.ts

function getname():string {
  let name: string = "123"
  return name
}
console.log(getname())

　　最終生成的bundle.js(可以不用關心)

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("123")}]);

　　最終可以再瀏覽器打印出123　　

 

 

 　　經過上面我們初始開發ts的環境已經搭建完畢

　　一、TS基礎類型

　　　　布爾值 boolean  數值 number  字符串 string  數組 number[] 或者 Array<number>  元組 Tuple 枚舉 enum

　　　　任何類型 Any  空值 void  Null和Underfined  nerver   Object 對象

　　　　下面是所以的類型，以及所以的類型使用

let isdome: boolean = true
let cname: string = '123132'
let age: number = 123
let list: number[] = [1,2,3,4]
let listname: string[] = ['1','2','3','4']
let listarray: Array<number> = [1,2,3,5]
// 元組 對每個元素都進行單獨類型定義 ,如果類型對不上就會報錯
let yzlist: [number,number,string] = [1,2,'3']
//枚舉 （好像有點像對象）
enum Color {red,green,blue}
let c: Color = Color.red
let notsure: any = 4 //不確認類型，可以用any

function getbname(): void {
  // 表示沒有換回值的函數
  console.log(123)
}
getbname()
// undefined  null 意思不是很大
let und: undefined = undefined
let nl: null = null

// never 表示永不存在的值類型，如一些總是拋出錯誤，或者根本不會有返回值的函數表達式，或者是箭頭函數
function error(message: string):never {
  throw new Error(message)
}
//object 對象類型
let obj: object = {
  a:132
}
// 類型斷言
let anykey: any = '七月的風，八月的雨，你的過去，無法參與'
let alength: number = (<string>anykey).length
console.log(alength)

let aslength: number = (anykey as string).length
console.log(aslength)

　　二、變量申明 let const var

　　沒什么可說的，es6 es5 ,let表示局部變量，沒有申請提升，只能先申明后使用，否則報錯，var 略，const，表示常量，賦值后就不能再次改變了。如果值是一個對象，表示地址不能變。

　　三、接口  

　　

// 定義一個父類接口parent 里面有一個name屬性
interface parent {
  name: string
}

function getname(anyamin:parent) {
  console.log(anyamin.name)
}

//繼承於parent的子類必須實現 name屬性，要不會報錯
getname({name: '123123'})

// 當然接口的屬性是可以定義成可選的
interface anany {
  name: string,
  age?: number,
  sex?: string
}
let bbb: anany = {
  name: '123132',
}
// bbb可以不去實現sex 和 age ,當然也不能給bbb新增屬性，那么也會報錯
// 只讀屬性的定義
interface point {
  readonly x: number,
  readonly y: number
}
let bp: point = {
  x: 123,
  y: 123
}
// bp.x = 6  報錯，只讀屬性不能從新賦值

// 函數類型
interface SearchFunc{
  //表示一個函數，有兩個參數，第一個參數是string類型，第二個參數是number,返回值是void
  // x y 為形參，不需要一樣
  (x: string,y: number): void 
}
let func: SearchFunc = function(z: string,b: number) {
  console.log(z+b)
}
func('1',2)
//  可索引類型 好像和數組類似，沒多大區別
interface stringarrray{
  [index: number]: string
}
let arrayname: stringarrray = ['bob','333']
console.log(arrayname[0])

//類 類型 。。。。。。

 　　類類型

// 類繼承接口
//類 類型
interface ClockInterface {
  currentTime: string
}
// 定義一個接口，里面有一個currentTime
// 如果使用類去繼承他，則必須再構造函數中初始化它
class Clock implements ClockInterface {
  currentTime: string
  constructor(h: number,m: number){
    this.currentTime = '123'
  } 
}

interface parent {
  tick(): void, //tick方法，返回值是空
  name: string // 屬性那么,為string 類型
}

class child implements parent {
  name: string
  constructor(x: string) {
    this.name = x
  }
  tick(): void {
    console.log(this.name)
  }
}
let c1 = new child('cz')
c1.tick()

// 接口繼承接口
interface p1 {
  name: string
}
interface p2 extends p1 {
  age: number
}
class c1 implements p2 {
  name: string
  age: number
  constructor() {
    this.name = '123'
    this.age = 12
  }
}

// 接口繼承接口
interface Counter {
  (start: number): string //代一個string參數，返回值未string的函數
  interval: number
  reset (): void
}

function getCounter(): Counter {
  let counter = <Counter>function(x: number){}
  counter.interval = 123
  counter.reset= function():void {
  }
  return counter
}
let cc = getCounter()
console.log(cc.interval)

//接口繼承類
class pc {
  private state: any
}
interface sel extends pc {
  select (): void
}
// 接口不能繼承代有私有類型類
class pd implements sel {
  constructor () {
  }
  select ():void {

  }
}

　　對於接口而言，不能出現私有的屬性或者方法，因為接口的屬性在其繼承者上，必須實現。二私有的屬性和對象是不能夠繼承的。