學習 TypeScript 隨記

學習 TypeScript 筆記

僅僅我的用來作筆記，若有不對請指出。 我是看的技術胖的視頻，而後本身總結的筆記，想去看視頻的同窗，請去 https://jspang.com 另外我的博客：wangxuelong.com 歡迎訪問 互踩

初識TypeScript

TypeScript是JavaScript 的超集

適合用於大型應用 或者多人合做

TypeScript 仍是會像 less sass 同樣 會在最後編譯成JavaScript 和css

跨平臺 且開源 注：js必定要學懂在看

js庫 TS 也可使用

TypeScript 提供了一些 類 接口 模塊 利於組件化開發

Vue Ng React 推薦使用TypeScript

開發環境 安裝

nodejs.org 先安裝Node 能夠安裝最新版 具體百度

npm install typeScript -g 安裝TS

tsc --version 查看版本若是出來講明安裝成功

npm init -y -y表示默認

tsc --init 會生成一個tsconfig.JSON 是用來編譯成js文件 的一個文件 eg：有時運行很差使 請刪除這個從新下載

npm install @types/node --dev-save 解決模塊生名文件問題

而後就能夠寫文件了

var a:string ="Hello TS";
複製代碼

右鍵編譯 轉換成js 而後使用 node 文件名.js 出現你打的文字就說明成功

變量類型

javascript 是弱類型語言 TypeScript是強類型語言 TypeScript有不少類型

1.undefined類型、

沒賦值就是undefined

2.number類型

不只能夠設置整數類型 也能夠設置小數類型 NAN 全稱 Not a Number

3.string類型

單引號 雙引號都是string類型

boolean類型

true false 只有這兩個值 沒有0 1

enum類型枚舉類型

eg：人的類型：男 女 中(:技術胖平常開車 eg： enum REN(一般用大寫聲明)

enum REN(nan,nv,yao));
console.log(REN.yao);//打印索引下標
enum RENN(nan='男人'.nv='女');
console.log(RENN.nan);//打印男人
複製代碼

any 類型

eg：就是任何類型啥都行 （我感受就是返回js類）

var t:any =10 
t=true;
console.log(t);打印true
複製代碼

void 空類型

Array 數組類型

Tuple 元祖類型

Null 空類型

TypeScript的函數

eg:代碼的複用

function searchAV(AV:string):string{

    return 'search your AV' +AV;
}
var AV:string='010294590';
var result:string =searchAV(AV)
console.log(result);
複製代碼

eg: ?是能夠不傳的參數

function searchAV(AV:string,AVMING?:string):string{
    if(AVMING===undefind){
        return 'search your AVMING' +AV+AVMING;
    }else{
        return 'search your AV' +AV;
    }

   
}
var AV:string='010294590';
var result:string =searchAV(AV)
console.log(result);
複製代碼

三種函數得定義方式(徹底支持ES 6,7,8,...)

函數聲明法

function add(n1:number,n2:number){
    return n1+n2;
}
console.log(add(1,2));//打印3
複製代碼

函數表達式法

var add =function(n1:number,n2:number){
    return n1+n2;
}
console.log(add(1,2));//打印3
複製代碼

箭頭函數

var add =(n1:number,n2:number):number => {
    return n1+n2;
}
console.log(add(1,2));//打印4 
複製代碼

函數中變量得做用域

變量得做用域:TypeScript函數劃分 函數體內得變量 是封閉得 只在函數體內部起做用

什麼是全局變量，局部變量？

函數體外就是全局變量，函數體內得就是局部變量 當重名得時候內部變量不會改變，內部變量引入不了外部變量

var app = function():void{
    var abc:string='asd';
    console.log(abc); //asd
}
app();
console.log(abc);//報錯
複製代碼

引用類型-數組

引用類型

let A ={
    name:'wang',
    age=12,
    webChrom: 'wangxuelong.com',
    saysome:function(){
        console.log('112233');
    }
}
console.log(A.name);
A.saysome();
複製代碼

數組 --array String Date RegEXP

let arr:number[] //數值類型
let arr1:Array<string> //字符串類型
let arr2:Array<boolean> //布爾類型
複製代碼

字面量賦值法

let arr1:number[] = [];
let arr2:number[] = [1,2,3,4,5];
let arr3:Array<string> = ['aa','bb','cc'];
let arr4:Array<boolean> = [true,false,true];
複製代碼

構造函數賦值法

let arr1:number[] = new Array();
let arr2:number[] = new Array(1,2,3,4,5);
let arr3:Array<string> = new Array('aa','bb','cc');
let arr4:Array<boolean> = new Array(true,false,true);
複製代碼

坑🕳

let arr5:number[]=[1,2,true]//單一類型 不容許會報錯
複製代碼

元祖是能夠的(不建議使用)

let arr5:[string,number];
arr5=['hello',10]//正確的方法
//arr5=[10,'he']//錯誤的
複製代碼

引用類型得字符串

基本類型字符串，引用類型字符串

let a:string = 'xxbb';//基本類型
let b:String = new String('xxbb')//引用類型 String:'xxbb'
console.log(a.length) //4
複製代碼

查找字符串indexOf

let some:string='abcdefg,higklmn';
let find:string='abcdefg'
console.log(some.indexOf(find));//0
console.log(some.lastindexOf(find));//0 找最後一個 出現兩次 選最後一次
複製代碼

截取字符串 substring()

let some:string='abcdefg,higklmn';
let find:string='abcdefg'
console.log(some.substring(8));//higklmn
console.log(some.substring(8,10));//hi
複製代碼

替換字符串 replace()

let some:string='abcdefg,higklmn';
let find:string='abcdefg';
console.log(some.replace('abcdefg','xxbb'));//xxbb,higklmn
複製代碼

引用類型-日期對象

1 不傳值

let d:Date = new Date();
console.log(d); //不是當前中國時區？ 不知道爲何
複製代碼

2 傳數字

let d:Date = new Date(1000);//1970-01-01 00:00:00向前數1000毫秒
console.log(d);//
複製代碼

3 傳字符串

let d:Date = new Date('1970/01/01 00:00:00');
let d1:Date = new Date('1970-01-01 00:00:00');
let d2:Date = new Date('1970-01-01T00:00:00');
console.log(d);//1969-12-31T16:00:00.000Z
console.log(d1);//1969-12-31T16:00:00.000Z
console.log(d2);//1969-12-31T16:00:00.000Z
//這裏打印結果 我這TS 時區是不同的   我也不知道爲何
複製代碼

正則表達式

RegExp string

構造函數聲明法

let reg:RegExp = new RegExp("js")//1.匹配字符串 2.修飾符（可選）
console.log(reg);// /js/
複製代碼

字面量聲明 查找字符串text(string)返回TRUE FALSE exec(string)返回 【查找的東西 位置 內容】

let reg:RegExp = /js/
let findred:string = 'jis is js very good'
console.log(reg.test(findred))//true
複製代碼

面向對象編程-類的聲明和使用

概念

類：類是對象具體事務的一個抽象

對象：對象時的具體表現

class findgirl{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log('大馬猴');
    }
}
let xxbb:findgirl =new findgirl('hxx',18);
console.log(xxbb)//findgirl { name: 'hxx', age: 18 }
xxbb.sayHello()//大馬猴
複製代碼

面向對象編程-修飾符

public //曝光的 protected //保護的 private //私有的

class DaMahou{
    public sex:string 
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.name = name 
        this.age = age
        this.sex = sex
    }
    public sayHello(){
        console.log('我叫大馬猴')；
    }
    protected sayHxx(){
        console.log('hxx');
    }
}

var xxbb:DaMahou = new DaMahou('男','xxbb',24)
console.log(DaMahou.sex) //男
console.log(DaMahou.name) //提示收到保護
console.log(DaMahou.age) //報錯 私有屬性
DaMahou.sayHello()//正常
DaMahou.sayHxx()//報錯
複製代碼

readonly 只讀 不能修改

class findName{
    public readonly name:string='xxbb'
}

var man:findName = new findName()
man.name = 'hxx'//報錯
複製代碼

面向對象編程-繼承和重寫

繼承：容許咱們建立一個類（子類），從已有的類（父類）上繼承全部的屬性和方法，子類能夠新建父類中沒有的屬性和方法。

class b{
    console.log(12);
}
extends//繼承 a 繼承於b
class a extends b {
    public xing:string ='asd';
}
複製代碼

面向對象編程-接口 就是與後端交互 interface

interface man{
    name:string
    sex:string
    age:number
    Dmh?:Boolean
}

let hxx:man = {
    name:'hxx',
    sex:'nv',
    age: '18'
}
console.log(hxx)//{ name: 'hxx', sex: 'nv', age: 18 }
複製代碼

接口規範

interface FindDMH{
    (name:string,sex:string):boolean
}
let hxx:FindDMH
hxx=function (name:string,sex:string):boolean{
    let flag =name.search(sex)
    return (flag!=1)
}
console.log(hxx('dmh','男'))//true
複製代碼

面向對象編程-命名空間

namespace shuaiGe{
    export class Dehua{
        public name:string = '劉德華'
        talk(){
            console.log('我是帥哥劉德華')
        }
    }
}

namespace bajie{
    export class Dehua{
        public name:string = '馬德華'
        talk(){
            console.log('我是二師兄馬德華')
        }
    }
}

let dehua1:shuaiGe.Dehua   = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()
複製代碼

結語：感受TS 就是 好嚴謹啊 又get到了一個知識點

網站連接 jspang.com/posts/2018/…