TypeScript學習——靜態類型(1)

一：定義

1.TypeScript無法直接在瀏覽器上運行(node也無法去運行)，會被編譯成JavaScript語法再去運行
2.是JavaScript的超集，是靜態類型，一旦定義成某類型，將無法改變

//靜態類型
let c: number=123;
c='123';//報錯 
c=123; 

二：優勢

1.開發過程重，編寫代碼的時候快速發現潛在問題
2.更好的代碼提示
3.通過靜態類型的定義可以更好閱讀代碼

function tsdemo(data:{x:number,y:number}) { //明確知道data類型  更好閱讀代碼
    return Math.sqrt(data.x**2+data.y**2)
}
tsdemo()//會直接報錯 沒有輸入data數據

三：基礎環境搭建

1.需要node npm

npm install -g typescript

2.編譯成JavaScript 然后再執行js文件

tsc demo.ts //編譯成js文件
node demo.js//運行 

3.利用工具自動編譯運行

cnpm install -g ts-node

ts-node demo.ts

四：靜態類型

靜態類型的深層次理解：
靜態類型，代表其類型，方法和屬性已經確定了，代碼提示也會很友好

基礎類型和對象類型

基礎類型 null underfined symbol ,boolean,void number string

//基礎類型 null underfined symbol ,boolean,void
const count:number=123;
const teacherName:string='Dell';

對象類型 , {} , class，function , [ ]

class Person{}
const teacher:{
    name:string;
    age:number;
}={
    name:'Dell',
    age:18
}
const numbers:number[]=[1,2,3];//number類型是一個數組
const dell:Person=new Person(); //dell 必須是對象類

const getotal:()=>number=()=>{ ///返回值必須是數值
    return 123;
}

** 類型注解 type annotation 我們告訴TS變量是什么類型**
** 類型推斷 type inference ,TS 會自帶的去嘗試分析變量的類型**
// 如果TS 能夠自帶分析變量類型，我們就什么也不需要做了
// 如果TS無法分析變量的類型的話，我們就需要使用類型注解

let count: number;
count = 123;
let conutInference = 123; //類型推斷
const firstNumber = 1;
const secondNumber = 2;
const total = firstNumber + secondNumber; //類型推斷自動推斷是number

function getTotal(firstNumber: number, secondNumber: number) {
  //無法自己推斷,需要類型注解
  return firstNumber + secondNumber;
}
const totals = getTotal(1, 2); //類型推斷自動推斷是number

const obj = { name: 'dell', age: 18 };

如果 定義和賦值不在一行 那么TS就無法自動類型推斷，需要自己寫類型注解

let count:number;
count=123;

parse 無法推斷出

const rawDate='{"name":"dell"}';
const newData :Person= JSON.parse(rawDate);

函數相關類型

function add(first:number,second:number):number{ //加上對返回值定義
    return first+second+''; //報錯 必須返回時number
}
const total=add(1,2)

定義返回值為void 表示該函數不應該有返回值

function sayHello():void{
    console.log('hello');
}

never的情況

function errorEmitter():never{
 throw new Error();
 console.log(123);
}
function errorEmitter():never{
while(true){
    
}
}

函數的兩種寫法

1.
const func = (str: string): number => { //number可以省略 可以根據parseInt推斷出
  return parseInt(str, 10);
};
2.
const func1: (str: string) => number = (str) => {//number必須寫
    return parseInt(str, 10);
};

解構類型的注解寫法

function add({ first, second }: { first: number; second: number }): number {
  return first + second;
}
function getNumber({first}:{first:number}){
    return first;
}
const total = add({ first: 1, second: 2 });

如果存在多個類型 可以直接|或定義

let temop:number|string=123;
temop = '456';

本文由博客群發一文多發等運營工具平台 OpenWrite 發布