當前位置：首頁 > news >正文

寧波網(wǎng)站建設服務關鍵詞優(yōu)化精靈

news 2025/7/2 5:01:13

寧波網(wǎng)站建設服務,關鍵詞優(yōu)化精靈,湖濱區(qū)建設局網(wǎng)站,上海做網(wǎng)站設計的公司目錄一、安裝 1、下載國內(nèi)鏡像 2、安裝 3、查看安裝情況 4、使用例子二、變量聲明 1、規(guī)則 2、聲明的四種方式 3、注意 4、類型斷言 5、類型推斷 6、變量作用域三、基礎類型（共11種） 1、Any 類型 2、Null 和 Undefined 3、never 類型…

一、安裝

1、下載國內(nèi)鏡像

2、安裝

3、查看安裝情況

4、使用例子

二、變量聲明

1、規(guī)則

2、聲明的四種方式

3、注意

4、類型斷言

5、類型推斷

6、變量作用域

三、基礎類型（共11種）

1、Any 類型

2、Null 和 Undefined

3、never 類型

四、every循環(huán)

五、函數(shù)

1、函數(shù)返回值

2、帶參函數(shù)

3、可選參數(shù)和默認參數(shù)

4、剩余參數(shù)

?5、構造函數(shù)

6、遞歸函數(shù)

7、函數(shù)重載

一、安裝

1、下載國內(nèi)鏡像

npm config set registry https://registry.npmmirror.com

2、安裝

npm install -g typescript

3、查看安裝情況

安裝完成后我們可以使用?tsc?命令來執(zhí)行 TypeScript 的相關代碼，以下是查看版本號：

tsc -v

4、使用例子

（1）新建try1.ts文件

const hello : string = "Hello"
console.log(hello);

（2）將 TypeScript 轉(zhuǎn)換為 JavaScript 代碼，在終端輸入

tsc try1.ts

當前目錄下（與 try1.ts 同一目錄）就會生成一個 try1.js 文件

（3）使用 node 命令來執(zhí)行 try1.js 文件

node try1.js

二、變量聲明

1、規(guī)則

（1）變量名稱可以包含數(shù)字和字母

（2）除了下劃線 _ 和美元 $ 符號外，不能包含其他特殊字符，包括空格

（3）變量名不能以數(shù)字開頭

2、聲明的四種方式

（1）聲明變量的類型及初始值????????var [變量名] : [類型] = 值;

var uname:string = "Runoob";

（2）聲明變量的類型，但沒有初始值，變量值會設置為 undefined????????var [變量名] : [類型];

var uname:string;

（3）聲明變量的初始值，但不設置類型，該變量可以是任意類型????????var [變量名] = 值;

var uname = "Runoob";

（4）聲明變量沒有設置類型和初始值，類型可以是任意類型，默認初始值為 undefined????????var [變量名];

var uname;

3、注意

（1）變量不要使用 name 否則會與 DOM 中的全局 window 對象下的 name 屬性出現(xiàn)了重名

（2）TypeScript 遵循強類型，如果將不同的類型賦值給變量會編譯錯誤

4、類型斷言

（1）介紹

①手動指定一個值的類型，即允許變量從一種類型更改為另一種類型

②格式：<類型>值? 或??值 as 類型

（2）實例

lean-ts.ts

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 類型
console.log(str2)

?終端ts轉(zhuǎn)換生成的js文件

var str = '1';
var str2 = str;  //str、str2 是 string 類型
console.log(str2);

（3）類型斷言不是類型轉(zhuǎn)換，意味著斷言只是純粹一個編譯時的語法，為編譯器提供分析代碼的方法

5、類型推斷

（1）當類型沒有給出時，TypeScript 編譯器利用類型推斷來推斷類型

（2）缺乏聲明而不能推斷出類型，那么它的類型被視作默認的動態(tài) any 類型

var num = 2;// 類型推斷為 number
console.log("num 變量的值為" + num);
num = '12';// 編譯錯誤
console.log(num);

6、變量作用域

變量作用域指定了變量定義的位置，TypeScript 有以下幾種作用域：

（1）全局作用域：定義在程序結構的外部，可以在代碼的任何位置使用

（2）類作用域：這個變量也可以稱為?字段，類變量聲明在一個類里頭，但在類的方法外面。該變量可以通過類的對象來訪問。類變量也可以是靜態(tài)的，靜態(tài)的變量可以通過類名直接訪問。

（3）局部作用域：局部變量只能在聲明它的一個代碼塊（方法）中使用

lean-ts.ts文件

var global_num = 12          // 全局變量
class Numbers {num_val = 13;             // 實例變量static sval = 10;         // 靜態(tài)變量storeNum(): void {var local_num = 14;    // 局部變量}
}
console.log("全局變量為: " + global_num)
console.log(Numbers.sval)   // 靜態(tài)變量
var obj = new Numbers();
console.log("實例變量: " + obj.num_val)

終端tsc轉(zhuǎn)換成lean-ts.js

var global_num = 12; // 全局變量
var Numbers = /** @class */ (function () {function Numbers() {this.num_val = 13; // 實例變量}Numbers.prototype.storeNum = function () {var local_num = 14; // 局部變量};Numbers.sval = 10; // 靜態(tài)變量return Numbers;
}());
console.log("全局變量為: " + global_num);
console.log(Numbers.sval); // 靜態(tài)變量
var obj = new Numbers();
console.log("實例變量: " + obj.num_val);

三、基礎類型（共11種）

數(shù)據(jù)類型	關鍵字	描述
任意類型	any	聲明為 any 的變量可以賦予任意類型的值
數(shù)字類型	number	雙精度 64 位浮點值。它可以用來表示整數(shù)和分數(shù)。 let binaryLiteral: number = 0b1010; // 二進制 let octalLiteral: number = 0o744; // 八進制 let decLiteral: number = 6; // 十進制 let hexLiteral: number = 0xf00d; // 十六進制
字符串類型	string	一個字符系列，使用單引號（'）或雙引號（"）來表示字符串類型。反引號（`）來定義多行文本和內(nèi)嵌表達式。 let name: string = "Runoob"; let years: number = 5; let words: string = `您好，今年是 ${ name } 發(fā)布 ${ years + 1} 周年`;
布爾類型	boolean	表示邏輯值：true 和 false。 let flag: boolean = true;
數(shù)組類型	無	聲明變量為數(shù)組。 // 在元素類型后面加上[] let arr: number[] = [1, 2];// 或者使用數(shù)組泛型 let arr: Array<number> = [1, 2];
元組	無	元組類型用來表示已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同，對應位置的類型需要相同。 let x: [string, number]; x = ['Runoob', 1]; // 運行正常 x = [1, 'Runoob']; // 報錯 console.log(x[0]); // 輸出 Runoob
枚舉	enum	枚舉類型用于定義數(shù)值集合。 enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 輸出 2
void	void	用于標識方法返回值的類型，表示該方法沒有返回值。 function hello(): void {alert("Hello Runoob"); }
null	null	表示對象值缺失。
undefined	undefined	用于初始化變量為一個未定義的值
never	never	never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現(xiàn)的值。

注意：TypeScript 和 JavaScript 沒有整數(shù)類型。

1、Any 類型

（1）變量值會動態(tài)改變時，可以讓這些變量跳過編譯階段的類型檢查

let x: any = 1;    // 數(shù)字類型
console.log(x);
x = 'I am who I am';    // 字符串類型
console.log(x);
x = false;    // 布爾類型
console.log(x);

（2）定義存儲各種類型數(shù)據(jù)的數(shù)組

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;
console.log(arrayList[1]);

2、Null 和 Undefined

（1）null：表示 "什么都沒有"，一個空對象引用，只有一個值的特殊類型

（2）undefined：一個沒有設置值的變量，typeof 一個沒有值的變量會返回 undefined

（3）Null 和 Undefined 是其他任何類型（包括 void）的子類型，可以賦值給其它類型，如數(shù)字類型，此時，賦值后的類型會變成 null 或 undefined。而在TypeScript中啟用嚴格的空校驗（--strictNullChecks）特性，就可以使得null 和 undefined 只能被賦值給 void 或本身對應的類型，示例代碼如下：

①啟用 --strictNullChecks，錯誤寫法

// 啟用 --strictNullChecks
let x: number;
x = 1; // 編譯正確
x = undefined;    // 編譯錯誤
x = null;    // 編譯錯誤

②啟用 --strictNullChecks，正確寫法

// 啟用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 編譯正確
x = undefined;    // 編譯正確
x = null;    // 編譯正確

3、never 類型

（1）never 是其它類型（包括 null 和 undefined）的子類型，代表從不會出現(xiàn)的值。這意味著聲明為 never 類型的變量只能被 never 類型所賦值，在函數(shù)中它通常表現(xiàn)為拋出異常或無法執(zhí)行到終止點（例如無限循環(huán)），示例代碼如下

①數(shù)字類型不能轉(zhuǎn)為 never 類型

let x: never;
// 編譯錯誤，數(shù)字類型不能轉(zhuǎn)為 never 類型
x = 123;

②never 類型可以賦值給 never、數(shù)字類型

let x: never;
let y: number;// 運行正確，never 類型可以賦值給 never類型
x = (()=>{ throw new Error('exception')})();// 運行正確，never 類型可以賦值給 數(shù)字類型
y = (()=>{ throw new Error('exception')})();// 返回值為 never 的函數(shù)可以是拋出異常的情況
function error(message: string): never {throw new Error(message);
}// 返回值為 never 的函數(shù)可以是無法被執(zhí)行到的終止點的情況
function loop(): never {while (true) {}
}

四、every循環(huán)

let list = [1,2,3]
list.every((val,idx,array)=>{// val：當前值  idx：當前index  array：Arrayconsole.log(val,idx,array);return true;
})

五、函數(shù)

1、函數(shù)返回值

在使用 return 語句時，函數(shù)會停止執(zhí)行，并返回指定的值

（1）格式模板

function function_name():return_type { // 語句return value; 
}

function_name 函數(shù)名稱
return_type 返回值的類型
return 關鍵詞后跟著要返回的結果
一般情況下，一個函數(shù)只有一個 return 語句
返回值的類型需要與函數(shù)定義的返回類型(return_type)一致

（2）實例1

function test():number{return 3
}
console.log(test());

（3）實例2

// 函數(shù)定義
function greet():string { // 返回一個字符串return "Hello World" 
} function caller() { var msg = greet() // 調(diào)用 greet() 函數(shù) console.log(msg) 
} // 調(diào)用函數(shù)
caller()

2、帶參函數(shù)

（1）格式模板

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

param1、param2 為參數(shù)名
datatype 為參數(shù)類型

（2）實例1

function add(x: number, y: number): number {return x + y;
}
console.log(add(1,2))

（3）實例2

function test(x:number,y:string):boolean{if(typeof(x) == 'number'){return true}else{return false}
}
console.log(test(1,'2'));

3、可選參數(shù)和默認參數(shù)

（1）可選參數(shù)

①參數(shù)不可缺失，不可過多

function test(x:string,y:string){return x + '' + y
}
let result1 = test("Bob");                  // 錯誤，缺少參數(shù)
let result2 = test("Bob", "Adams", "Sr.");  // 錯誤，參數(shù)太多了
let result3 = test("Bob", "Adams");         // 正確

②參數(shù)可確實，不可過多

function test(x:string,y?:string){if(y)return x + '' + yelsereturn x
}
let result1 = test("Bob");  // 正確
let result2 = test("Bob", "Adams", "Sr.");  // 錯誤，參數(shù)太多了
let result3 = test("Bob", "Adams");  // 正確

③注意：可選參數(shù)必須跟在必需參數(shù)后面

如果上例想讓 firstName 是可選的，lastName 必選，那么就要調(diào)整它們的位置，把 firstName 放在后面，如果都是可選參數(shù)就沒關系

（2）默認參數(shù)

①作用：可以設置參數(shù)的默認值，這樣在調(diào)用函數(shù)的時候，如果不傳入該參數(shù)的值，則使用默認參數(shù)

②模板

function function_name(param1[:type],param2[:type] = default_value) { 
}

③注意：參數(shù)不能同時設置為可選和默認?

④實例

function calculate_discount(price:number,rate:number = 0.50){var discount = price * rateconsole.log("價格為：",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.3)

4、剩余參數(shù)

①作用：當不知道要向函數(shù)傳入多少個參數(shù)，可以使用剩余參數(shù)來定義，允許我們將一個不確定數(shù)量的參數(shù)作為一個數(shù)組傳入

②實例1

function test(x:string,...y:string[]){return x + '' + y.join("")
}
let testValue = test("Zhangsan"," and ","Lisi"," and ","Wangwu"," and ","Zhaoliu")
console.log(testValue);

函數(shù)的最后一個命名參數(shù) y 以 ... 為前綴，將成為一個由剩余參數(shù)組成的數(shù)組，索引值從0（包括）到 y.length（不包括）

②實例2

function addNumbers(...nums:number[]){var i;var sum:number = 0;nums.forEach((item)=>{sum = sum + item})console.log("和為：",sum);
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)

?5、構造函數(shù)

（1）模板

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

arg1, arg2, ... argN：參數(shù)列表
functionBody：一個含有包括函數(shù)定義的 JavaScript 語句的字符串

（2）實例

var test = new Function("x","y","return x * y")
var testValue = test(3,4)
console.log(testValue);

6、遞歸函數(shù)

實例：

function factorial(number){if(number <= 0){//停止執(zhí)行return 1;}else{return (number * factorial(number - 1))//調(diào)用自身}
}
console.log(factorial(6));

7、函數(shù)重載

（1）介紹：重載是方法名字相同，而參數(shù)不同，返回類型可以相同也可以不同。每個重載的方法（或者構造函數(shù)）都必須有一個獨一無二的參數(shù)類型列表

①參數(shù)類型不同：

function disp(string):void; 
function disp(number):void;

如果參數(shù)類型不同，則參數(shù)類型應設置為?any

②參數(shù)數(shù)量不同：

function disp(n1:number):void; 
function disp(x:number,y:number):void;

參數(shù)數(shù)量不同可以將不同的參數(shù)設置為可選?

③參數(shù)類型順序不同：

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

（2）實例1

function disp(s1:string):void;
function disp(n1:number,s1:string):void;function disp(x:any,y?:any):void{console.log(x);console.log(y);
}
disp("abc")
disp(1,"xyz")

（3）實例2

①定義函數(shù)重載需要定義重載簽名和一個實現(xiàn)簽名

②重載簽名定義函數(shù)的形參和返回類型，沒有函數(shù)體

③一個函數(shù)可以有多個重載簽名(不可調(diào)用)

let suits = ["hearts","spades","clubs","diamonds"]
// 定義重載簽名
function greet(person:string):string;
function greet(persons:string[]):string[];
// 定義實現(xiàn)簽名
function greet(person:unknown):unknown{if(typeof person === 'string'){return `Hello,${person}！`;}else if(Array.isArray(person)){return person.map(name => `Hello,${name}！`);}throw new Error('Unable to greet');
}
console.log(greet(suits[0]));
console.log(greet(suits));