這樣學TS，遲早進大廠！！-有解無憂

極客江南：一個對開發技術特別執著的程式員，對移動開發有著獨到的見解和深入的研究，有著多年的iOS、Android、HTML5開發經驗，對NativeApp、HybridApp、WebApp開發有著獨到的見解和深入的研究, 除此之外還精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多種Web前端技術及Java、PHP等服務端技術，

let getRandomValue = ():(string | number)=>{
    let num = Math.random();
    return (num >= 0.5) ? 'abc' : 123.123;
}
// let value = getRandomValue();
// console.log(value);
/*
// 雖然通過型別斷言可以確切的告訴編譯器當前的變數是什么型別,
// 但是每一次使用的時候都需要手動的告訴編譯器, 這樣比較麻煩, 冗余代碼也比較多
if((value as string).length){
    console.log((value as string).length);
}else{
    console.log((value as number).toFixed());
}
 */
/*
// 定義了一個型別保護函式, 這個函式的'回傳型別'是一個布爾型別
// 這個函式的回傳值型別是, 傳入的引數 + is 具體型別
function isString(value:(string | number)): value is string {
    return typeof value === 'string';
}
if(isString(value)){
    console.log(value.length);
}else{
    console.log(value.toFixed());
}
 */
/*
// 除了可以通過定義型別保護函式的方式來告訴編譯器使用時聯合型別的變數具體是什么型別以外
// 我們還可以使用typeof來實作型別保護
// 注意點:
// 如果使用typeof來實作型別保護, 那么只能使用 === / !==
// 如果使用typeof來實作型別保護, 那么只能保護 number/string/boolean/symbol型別
if(typeof value === 'string'){
    console.log(value.length);
}else{
    console.log(value.toFixed());
}
 */
// 除了可以通過typeof類實作型別保護以外, 我們還可以通過instanceof來實作型別保護
class Person {
    name:string = 'lnj';
}
class Animal {
    age: number = 18;
}
let getRandomObject = ():(Person | Animal)=>{
    let num = Math.random();
    return (num >= 0.5) ? new Person() : new Animal();
};
let obj = getRandomObject();
console.log(obj);
if(obj instanceof Person){
    console.log(obj.name);
}else{
    console.log(obj.age);
}

3. null和undefined

/*
1.null和undefined
TypeScript具有兩種特殊的型別， null和 undefined，它們分別具有值null和undefined.
*/
// 默認情況下我們可以將 null和 undefined賦值給任意型別
// 默認情況下null和 undefined也可以相互賦值
// 注意點: 在企業開發中, 如果不想把 null和 undefined賦值給其它的型別
//或者不想讓 null和 undefined相互賦值, 那么我們就可以開啟strictNullChecks
/*
let value1:null;
let value2:undefined;
value1 = value2;
value2 = value1;
let value3:number;
value3 = value1;
value3 = value2;
 */
// 如果我們開啟了strictNullChecks, 還想把null和 undefined賦值給其它的型別
// 那么我們就必須在宣告的時候使用聯合型別
/*
let value:(number | null | undefined);
value = null;
value = undefined;
 */
// 對于可選屬性和可選引數而言, 如果開啟了strictNullChecks, 那么默認情況下資料型別就是聯合型別
// 就是當前的型別 + undefined型別
class Person {
    name?:string
}
function say(age?:number) {
}

4. 型別別名

/*
什么是型別別名?
型別別名就是給一個型別起個新名字, 但是它們都代表同一個型別
例如: 你的本名叫張三, 你的外號叫小三, 小三就是張三的別名, 張三和小三都表示同一個人
*/
// 給string型別起了一個別名叫做MyString, 那么將來無論是MyString還是string都表示string
// type MyString = string;
// let value:MyString;
// value = 'abc';
// value = 123;
// value = false;
// 型別別名也可以使用泛型
// type MyType<T> = {x:T, y:T};
// let value:MyType<number>;
// value = {x:123, y:456};
// value = {x:'123', y:456};
// value = {x:false, y:456};
// 可以在型別別名型別的屬性中使用自己
/*
type MyType = {
    name:string,
    // 一般用于定義一些樹狀結構或者嵌套結構
    children?:MyType
}
let value:MyType = {
    name:'one',
    children:{
        name:'one',
        children:{
            name:'one',
        }
    }
}
 */
// 介面和型別別名是相互兼容的
type MyType = {
    name:string
}
interface MyInterface {
    name:string
}
let value1:MyType = {name:'lnj'};
let value2:MyInterface = {name:'zs'};
value1 = value2;
value2 = value1;

5. 型別別名和介面

// 介面和型別別名異同
// 1.都可以描述屬性或方法
// type MyType = {
//     name:string;
//     say():void;
// }
// interface MyInterface {
//     name:string;
//     say():void;
// }
// 2.都允許拓展
/*
interface MyInterface {
    name:string;
    say():void;
}
interface MyInterface2 extends MyInterface{
    age:number;
}
let value:MyInterface2 = {
    name:'lnj',
    age:18,
    say():void{
    }
}
 */
/*
type MyType = {
    name:string;
    say():void;
}
type MyType2 = MyType & {
    age:number;
}
let value:MyType2 = {
    name:'lnj',
    age: 18,
    say():void{
    }
}
 */
// 3.type 可以宣告基本型別別名，聯合型別，元組等型別, interface不能
// type MyType1 = boolean;
// type MyType2 = string | number;
// type MyType3 = [string, boolean, number];
// 4.type不會自動合并
// interface MyInterface {
//     name:string
// }
// interface MyInterface {
//     age:number
// }
// let value:MyInterface  ={
//     name:'lnj',
//     age:18
// }
// type MyType = {
//     name:string
// }
// type MyType = {
//     age:number
// }

6. 字面量型別

/*
1.什么是字面量?
字面量就是源代碼中一個固定的值
例如數值字面量: 1,2,3,...
例如字串字面量: 'a','abc',...
2.在TS中我們可以把字面量作為具體的型別來使用
當使用字面量作為具體型別時, 該型別的取值就必須是該字面量的值
* */
// type MyNum = 1;
// let value1:MyNum = 1;
// let value2:MyNum = 2;

碼字不易，在線求個三連支持，

大家記得收藏前，先點個贊哦！好的文章值得被更多人看到，

最后，再多一句，粉絲順口溜，關注江哥不迷路，帶你編程上高速，

著作權所有，請勿轉載，轉載請聯系本人授權

支付寶生態技術學習交流群

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/294255.html

標籤：其他

上一篇：Flutter打包IOS相關問題記錄

下一篇：VSCode中C++編譯環境相關插件

這樣學TS，遲早進大廠！！

目錄

1.交叉和聯合型別

2. 型別保護

3. null和undefined

4. 型別別名

5. 型別別名和介面

6. 字面量型別