第二節：ts變量聲明、通用js數據類型、ts新數據類型、ts類型補充

一. TypeScript變量聲明

1. 變量的聲明

　聲明了類型后TypeScript就會進行類型檢測，聲明的類型可以稱之為類型注解。標准格式如下：

var/let/const 標識符: 數據類型 = 賦值;

實操：

let msg1:string='1234';      //這里小寫的string代表的是ts中的數據類型 （推薦使用）
let msg2:String='5555';      //這里大寫的String代表ECMAScript中定義的一個類

// msg1=123;     //自動檢測報錯

console.log(msg1);
console.log(msg2);

// 代表該文件是個模塊，如果不加的話，該文件種的變量可能會和其他文件中變量沖突
export {}

剖析：

　　小寫string是TypeScript中定義的字符串類型，大寫String是ECMAScript中定義的一個類，推薦使用小寫。

2. 變量的推斷

　在開發中，有時候為了方便起見我們並不會在聲明每一個變量時都寫上對應的數據類型，我們更希望可以通過TypeScript本身的特性幫助我們推斷出對應的變量類型：

　變量第一次賦值時，會根據后面的賦值內容的類型，來推斷出變量的類型。

實操：

let count1=100;  //ts會自動推斷為number類型
// count1="333";    //自動檢測報錯

 

二. JavaScript類型通用

說明：

　　ts是js的一個超集，即ts可以使用js的所有數據類型，並且ts又擴展了一下自己特有的數據類型，如下圖：

1. number類型

　數字類型是我們開發中經常使用的類型，TypeScript和JavaScript一樣，不區分整數類型（int）和浮點型（double），統一為number類型。TypeScript也是支持二進制、八進制、十六進制的表示。

let num:number=100;
num=200;

// 不區分進制
let num1:number=100;    //十進制
let num2:number=0b110;  //二進制
let num3:number=0o555;  //八進制
let num4:number=0xf23;  //十六進制

console.log(num,num1,num2,num3,num4);

export{}

2. boolean類型

　boolean類型只有兩個取值：true和false，非常簡單。

let flag: boolean = true;
flag = 20 > 30;
console.log(flag);

export { }

3. string類型

　 string類型是字符串類型，可以使用單引號或者雙引號表示，同時也支持ES6的模板字符串來拼接變量和字符串。

const name:string='ypf';
const age=19;
const info=`name為：${name},age為：${age}`;
console.log(info);

4. array類型

 　數組類型的定義也非常簡單，有兩種方式：

const name1:Array<string>=['a','b','c'];   //不推薦(react中的jsx沖突)
const name2:string[]=['d','e','f'];        //推薦

console.log(name1);
console.log(name2);

5. object類型

  　object對象類型可以用於描述一個對象：

const info = {
    name: 'ypf',
    age: 18
}
console.log(info.name, info.age);
console.log(info['name'],info['age']);

6. null和undefined類型

　在 JavaScript 中，undefined 和 null 是兩個基本數據類型。

　在TypeScript中，它們各自的類型也是undefined和null，也就意味着它們既是實際的值，也是自己的類型。

let m:null=null;
let n:undefined=undefined;

console.log(m,n);

7. symbol類型

　通過symbol來定義相同的名稱，因為Symbol函數返回的是不同的值。

const title1 = Symbol("title")
const title2 = Symbol('title')

const info = {
  [title1]: "程序員",
  [title2]: "老師"
}

 

三. TypeScript新類型

1. any類型

(1). 在某些情況下，我們確實無法確定一個變量的類型，並且可能它會發生一些變化，這個時候我們可以使用any類型（類似於C#語言中的dynamic類型）。

(2). any類型有點像一種討巧的TypeScript手段：

　　A. 我們可以對any類型的變量進行任何的操作，包括獲取不存在的屬性、方法；

　　B. 我們給一個any類型的變量賦值任何的值，比如數字、字符串的值；

let msg: any = 'hello';
msg = 100;
msg = true;
msg = {}

export { }

2. unknown類型

 　unknown是TypeScript中比較特殊的一種類型，它用於描述類型不確定的變量。

function foo(): string {
    return "abc"
}

function bar(): number {
    return 123
}

// unknown類型只能賦值給any和unknown類型
// any類型可以賦值給任意類型
let flag = true
let result: unknown // 最好不要使用any
if (flag) {
    result = foo()
} else {
    result = bar()
}

if (typeof result === 'string') {
    console.log(result.length);
}

3. void類型

 　void通常用來指定一個函數是沒有返回值的，那么它的返回值就是void類型。函數我們沒有寫任何類型，那么它默認返回值的類型就是void的，我們也可以顯示的來指定返回值是void。

// void通常用來指定一個函數是沒有返回值的，那么它的返回值就是void類型：
function sum(num1:number,num2:number):void{
    console.log(num1+num2);
}

// 不寫任何類型，默認類型就是void
function sum2(num1:number,num2:number){
    console.log(num1+num2);
}

sum(10,20);
sum2(20,30);

4. never類型

  　never 表示永遠不會發生值的類型，比如一個函數。

// 封裝一個核心函數
function handleMessage(message: string | number | boolean) {
    switch (typeof message) {
      case 'string':
        console.log("string處理方式處理message")
        break
      case 'number':
        console.log("number處理方式處理message")
        break
      case 'boolean':
        console.log("boolean處理方式處理message")
        break
      default:
        const check: never = message      //永遠進不到這里，所以用never類型
    }
  }
  
  handleMessage("abc")
  handleMessage(123)

5. tuple類型

 (1). tuple是元組類型，很多語言中也有這種數據類型，比如Python、Swift等。

 (2). 那么tuple和數組有什么區別呢？

　　A. 首先，數組中通常建議存放相同類型的元素，不同類型的元素是不推薦放在數組中。（可以放在對象或者元組中）

　　B. 其次，元組中每個元素都有自己特性的類型，根據索引值獲取到的值可以確定對應的類型；

// 1. 數組的弊端
const info1: any[] = ['ypf', 18, 1.82];
console.log(info1[0].length);
// console.log(info1[1].length);  //只有string類型才能length，number不能，但是這里不會報錯，只有運行的時候才能知道，這就是弊端

// 2. 使用元祖
const info2:[string,number,number]= ['ypf', 18, 1.82];
console.log(info2[0].length);
// console.log(info2[1].length);   //直接報錯

場景優化： 

function useState<T>(state: T) {
    let currentState = state
    const changeState = (newState: T) => {
      currentState = newState
    }
    const info: [string, number] = ["abc", 18]
    const tuple: [T, (newState: T) => void] = [currentState, changeState]
    return tuple
  }
  
  const [counter, setCounter] = useState(10);
  setCounter(1000)
  const [title, setTitle] = useState("abc")
  const [flag, setFlag] = useState(true)

 

四. TypeScript類型補充

1.  函數的參數類型

 　聲明函數時，可以在每個參數后添加類型注解，以聲明函數接受的參數類型。

// 1. 函數的參數類型
function sum1(num1: number, num2: number) {
    return num1 + num2;
}

2. 函數的返回值類型

 　可以添加返回值的類型注解，這個注解出現在函數列表的后面。

// 2. 函數的返回值類型
// 添加返回值的類型注解，這個注解出現在函數列表的后面：
// 和變量的類型注解一樣，我們通常情況下不需要返回類型注解，因為TypeScript會根據 return 返回值推斷函數的返回類型：
function sum2(num1: number, num2: number): number {
    return num1 + num2;
}

3. 匿名函數參數

　匿名函數與函數聲明會有一些不同：當一個函數出現在TypeScript可以確定該函數會被如何調用的地方時；該函數的參數會自動指定類型。

const names = ["abc", "cba", "nba"]
// item根據上下文的環境推導出來的, 這個時候可以不添加的類型注解
// 上下文中的函數: 可以不添加類型注解
names.forEach(function (item) {
    console.log(item.toUpperCase())
}) 

4. 對象類型

　使用了一個對象來作為類型：

　A. 在對象我們可以添加屬性，並且告知TypeScript該屬性需要是什么類型；

　B. 屬性之間可以使用 , 或者 ; 來分割，最后一個分隔符是可選的；

　C. 每個屬性的類型部分也是可選的，如果不指定，那么就是any類型

// 對象類型
function printPoint(myPoint: { x: number, y: number }) {
    console.log(myPoint.x, myPoint.y);
}

printPoint({ x: 200, y: 300 });

5. 可選類型

 　對象類型也可以指定哪些屬性是可選的，可以在屬性的后面添加一個?：

function printPoint(myPoint: { x: number, y: number, z?: number }) {
    if (myPoint.z) {
        console.log(myPoint.x, myPoint.y, myPoint.z);
    } else {
        console.log(myPoint.x, myPoint.y);
    }
}

printPoint({ x: 200, y: 300 });
printPoint({ x: 200, y: 300, z: 400 });

6. 聯合類型

　A. 聯合類型是由兩個或者多個其他類型組成的類型；

　B. 表示可以是這些類型中的任何一個值；

　C. 聯合類型中的每一個類型被稱之為聯合成員（union's members ）；

function showMsg(msg: number|string|boolean){
    if (typeof msg==='string') {
        console.log(msg.toUpperCase())
    } else {
        console.log(msg)
    }
}

showMsg(123);
showMsg('dfdfs');
showMsg(true);


// 補充：可選類型可以看做是 類型 和 undefined 的聯合類型：
function showName(name?:string){
    console.log(name);
}

showName('ypf');
showName();   //返回undefined

7. 類型別名

　在類型注解中編寫 對象類型 和 聯合類型，但是當我們想要多次在其他地方使用時，就要編寫多次。 比如我們可以給對象類型起一個別名。

// function printPoint(myPoint: { x: number, y: number, z?: number }) {
//     if (myPoint.z) {
//         console.log(myPoint.x, myPoint.y, myPoint.z);
//     } else {
//         console.log(myPoint.x, myPoint.y);
//     }

// }
 type pointType = {
    x: number
    y: number
    z?: number
}

function printPoint(myPoint: pointType) {
    if (myPoint.z) {
        console.log(myPoint.x, myPoint.y, myPoint.z);
    } else {
        console.log(myPoint.x, myPoint.y);       
    }
}

printPoint({ x: 200, y: 300 });
printPoint({ x: 200, y: 300, z: 400 });

 

 

 

 

 

 

 

 

 

!

• 作       者 : Yaopengfei(姚鵬飛)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 聲     明1 : 如有錯誤，歡迎討論，請勿謾罵^_^。
• 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址，否則保留追究法律責任的權利。