image
女友御用版TS解析
優(yōu)勢:
-增加了代碼的可閱讀和可維護(hù)性
安裝：
npm install -g typescript
一.基礎(chǔ)類型
布爾值
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;
// 等價(jià)于 let something: any;
something = 'seven';
something = 7;
二.數(shù)組
1野崇，類型 + 方括號（ type [ ] ）
這種方式定義的數(shù)組項(xiàng)中不允許出現(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'
越界元素：當(dāng)訪問超出元祖長度的元素時鳖轰，它的類型會被限制為元祖中每個類型的聯(lián)合類型
let arr:[string, number] = ['name', 20];
arr[0] = 'age';
arr[2] = 'string';
arr[3] = 40;
arr[4] = true; // 編譯報(bào)錯
四.枚舉 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';
// 等價(jià)于 let string: string = 'seven';
string = 4;
// 編譯報(bào)錯: 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';
七.類型斷言
實(shí)則類似
instanceof,來斷定一個類型
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
八.自定義類型
// 類型別名用法 自定義自己類型 public private等
type myType = {
name: string,
age: number,
}
接口 Interfaces
必須一一對應(yīng)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//報(bào)錯
函數(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));
默認(rèn)參數(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
當(dāng)使用第三方庫時喂窟，我們需要引用它的聲明文件，才能獲得對應(yīng)的代碼補(bǔ)全碗啄、接口提示等功能
后續(xù)為實(shí)戰(zhàn),未完待續(xù)......我太難了啊
//傳給函數(shù)稳摄，用來解構(gòu)賦值
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
