image

女友御用版TS解析

優(yōu)勢:

-增加了代碼的可閱讀和可維護性

安裝：

  npm install -g typescript

一.基礎類型

布爾值

let isDone: boolean = false;

數(shù)字 number

let number: number = 6; 
let notANumber: number = NaN;

字符串

 let  string: string = 'Tom';

空值 void

• void 類型的變量只能賦值為 undefined 和 null

    let unusable: void = undefined;

• 可以用 void 表示沒有任何返回值的函數(shù)

function myname():void{
}

null 和 undefined

• undefined 類型的變量只能被賦值為 undefined，null 類型的變量只能被賦值為 null

let u: undefined = undefined;
let n: null = null;

與 void 的區(qū)別是，undefined 和 null 是所有類型的子類型。也就是說 undefined 類型的變量，可以賦值給 number 類型的變量：

let u: undefined;
let num: number = u;
let num2:number = undefined;
// 編譯合法 undefined是number的子類型

let unm2: void;
let num3: number = unm2;
// => 不合法 (void不是number的子類型)

任意值 any

let anyType:any = 'seven';
anyType = 7;

變量如果在聲明的時候，未指定其類型， 也沒有賦值， 那么它會被推斷(類型推論)為任意值類型而完全不被類型檢查

let something; 
// 等價于 let something: any;
something = 'seven';
something = 7;

二.數(shù)組

1，類型 + 方括號（ type [ ] ）
這種方式定義的數(shù)組項中不允許出現(xiàn)其他的類型

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

2，數(shù)組泛型 Array < type >

    let list: Array<number> = [1, 2, 3];

三.元祖

簡單理解為可定義一組不同類型的數(shù)據(jù)：

let arr:[string, number] = ['name', 20];
console.log(arr[0]); 
// => 'name' 

越界元素：當訪問超出元祖長度的元素時，它的類型會被限制為元祖中每個類型的聯(lián)合類型

let arr:[string, number] = ['name', 20];
arr[0] = 'age';
arr[2] = 'string';
arr[3] = 40;
arr[4] = true; // 編譯報錯

四.枚舉 enum

被限定在一定范圍內(nèi)的場景，如一周只有7天，一年只有4季等

• 數(shù)字枚舉

enum Weeks {Mon, Tue, Wed, Thu, Fri, Sat, Sun};

• 字符串枚舉

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

常量枚舉在編譯階段是會被刪除的

五.類型推論

變量申明如果沒有明確的指定類型，那么 TypeScript 會依照類型推論的規(guī)則推斷出一個類型

let string = 'seven'; 
// 等價于 let string: string = 'seven'; 
string = 4; 
// 編譯報錯: error TS2322: Type 'number' is not assignable to type 'string' 

變量聲明但是未賦值，會推論為 any

let x;
x = 1;
x = 'aaa'

六.聯(lián)合類型

let stringOrNumber:string | number;
stringOrNumber = 'seven';

七.類型斷言

實則類似instanceof,來斷定一個類型

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

八.自定義類型

//  類型別名用法 自定義自己類型 public private等
type myType = {
    name: string,
    age: number,
}

接口 Interfaces

必須一一對應key和value

// 定義一個接口 Person
interface Person {
  name: string;
  age: number;
}

// 定義一個個變量，它的類型是 Person
let tom: Person = {
  name: 'Tom',
  age: 25
};

可選屬性

interface Person {
  name: string;
  age?: number;
}
let tom: Person = {
  name: 'tom'
}
// age是可選屬性

任意屬性(定義之后，person03所有的value只都必須為any)

interface Person03 {
  name: string;
  age?: number;
  [propName: string]: any;
}
let tom04: Person03 = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

只讀屬性readonly(一次給對象賦值可以，但是不能修改)

interface Person {
  readonly id: number;
}

let person: Person = {
  id: 100,
}
person.id = 2//報錯

函數(shù)

用接口定義函數(shù)的形狀

interface FuncAdd {
  (value: number, increment: number): number
}
let add: FuncAdd;
add = function(value: number, increment: number): number {
  return value + increment;
}
// 函數(shù)的參數(shù)名不需要與接口里定義的名字相匹配
let add2: FuncAdd;
add2 = function(a: number, b: number) {
  return a + b;
}

可選參數(shù)(必須放在參數(shù)的最后面)

function addNum(a: number, b: number, c? :number): number {
    if(c) {
        return a + b + c;
    } else {
        return a + b;
    }
}
console.log(add(1, 2));

默認參數(shù)

function add(a: number = 1, b: number): number {
    return a + b;
}
console.log(add(undefined, 1))

類 class

類的定義

class Animal {
        name:string; // 定義屬性
    constructor(name) {
        this.name = name; // 屬性賦值
    }
    sayHi() {
        return `我叫 ${this.name}`;
    }
}

let cat = new Animal('Tom');
console.log(cat.sayHi()); // 我叫 Tom

類的繼承

class Cat extends Animal {
    color: string;
    constructor(name, color) {
        super(name); // 調(diào)用父類Animal的 constructor(name)
        this.color = color
    }
    sayHi() {
        // 調(diào)用父類的 sayHi()；
        return super.sayHi() + '我是一只'+ this.color + ' 色的貓，'; 
    }
}

let c = new Cat('Tom', '橘黃'); // Tom
console.log(c.sayHi()); // 我叫 Tom，我是一只橘黃色的貓；

let cat2 = new Cat('Jerry');
cat2.color = '黑';
console.log(c.sayHi()); // 我叫 Jerry，我是一只黑色的貓；

存取器

class Animal {
        name:string;
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

靜態(tài)屬性和方法

• static--子類不繼承
  -public--公共方法
  -private--私有
  -protected--繼承的子類可以訪問

多態(tài)

子類同種父類的方法名字

class Person {
  eat(){ console.log('eat') }
}
class A extends Person {
  eat(){ console.log('A eat') }
}
class B extends Person {
  eat(){ console.log('B eat') }
}

泛型函數(shù)

// 打印字符串
function printer1(arr:string[]):void {
for(var item of arr) {
  console.log(item)
}
}
printer1(['a','b','c','d'])
--------------------------------------------------------------------

function printer<T>(arr:T[]):void {
for(var item of arr) {
  console.log(item)
}
}
// 指定具體類型調(diào)用
printer<string>(['a','b','c','d']);
// 調(diào)用時也可以直接讓ts自己做類型推論
printer([1,2,3,4]);

聲明文件 declare

當使用第三方庫時，我們需要引用它的聲明文件，才能獲得對應的代碼補全、接口提示等功能

后續(xù)為實戰(zhàn),未完待續(xù)......我太難了啊

//傳給函數(shù)，用來解構賦值
class a {
 aa({a,b}:{a:number,b:string}):void{
        console.log(11)
    }
}
let b = new a()
b.aa({
    a:1,
    b:"1"
})

工作中用到的

//基本數(shù)據(jù)類型--------------------------------------
private  str:string = ''
//數(shù)組（三種，我們用兩種）
//1
private  arr: string[] = ['1','2']
//2
private Array<string> = ['1','2']

//對象---------------------------

//允許接口里有任意屬性。但是是所有子集的父級
//1(一般任意用了 就不寫別的了)
interface test{
  name: string;
  age?: number;
  [propName: string]: any;
}

//2
interface obj{
  name: string; // 表示對象要有name屬性, 值是string類型
  age?: number; // ? 表示age屬性可以有也可以沒有, 值是number類型
  readonly id: number; // readonly 表示 id 屬性只可讀，不可修改
}
let obj2: obj= { name: "obj2", age: 18, id: 2 };

//數(shù)組對象


interface test{
    name1: string;
}
interface zz{
    name: test;
}
const aaa:zz[] = [{name:{name1:"2"}}]


//函數(shù)
//1
function fn(x:number,y?: number,z:number = 1):void{}
//2