一：定義
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 發布
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53643.html
標籤：JavaScript
上一篇：javascript Proxy 代理模式深度監聽物件、陣列變化
下一篇：js獲取cookie值