一：定義 1.TypeScript無法直接在瀏覽器上運行(node也無法去運行)，會被編譯成JavaScript語法再去運行 2.是JavaScript的超集，是靜態類型，一旦定義成某類型，將無法改變 //靜態類型 let c: number=123; c='123';//報錯 c=123; 二：優 ...
一：定義
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 發佈
