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 發佈