typeScript 之 基礎

工具: PlayGround

源碼： GitHub TypeScript


變量聲明

typeScript中變量聲明注意：

  • 開頭不能以數字開頭
  • 變量名稱可以包含數字和字母
  • 除了下劃線_和美元$符號外，不能包含其他任意特殊字符

聲明的結構： let 變量名： 類型 = 值

如果沒有聲明類型，則變量為any類型， 如果沒有賦值，則數值為undefined

let name: string = "name";// 沒有聲明類型，在賦值以后，編譯器會對類型進行推導
// 如果不能推導出類型，則被默認為any類型
let value = 10;// 沒有賦值表示為undefined
let data;

針對于沒有聲明的類型，TypeScritp會靜態編譯，注意警告：

let num = 2;
console.log("num type:", typeof(num));		// "num type:",  "number" 
console.log("num 變量的值為 "+num);				 // "num 變量的值為 2"// Type 'string' is not assignable to type 'number'
// 沒有報錯，但會有警告
num = "12"; console.log("num type:", typeof(num));    // "num type:",  "string" 
console.log(num);                         // "12"

基礎類型

在TypeScript中，內置的數據類型也被稱為原始數據類型，主要有：

  • number 雙精度64位浮點數，注意 TypeScript和JavaScript沒有整數
  • string 存儲UTF-16的字符串序列， 可以使用單引號(‘’)或雙引號(“”)來包含字符串，使用反引號(`)來格式化文本或內嵌表達式等
  • boolean 布爾類型， 使用true和false進行判定
  • void 表示不返回任意類型的函數返回類型
  • undefined 表示一個沒有設置數據的變量
  • null 表示一個空對象的引用
let data: number = null;// number
let value: number = 0.1;
let decLiteral: number = 6;    				// 十進制
let binaryLiteral: number = 0b1010; 	// 二進制
let octalLiteral: number = 0o744;    	// 八進制
let hexLiteral: number = 0xf00d;    	// 十六進制// string 
let name: string = "TypeScript";
let years: number = 5;
let words: string = `您好，今年是${name}發布${years + 1}周年`;// boolean
let flag: boolean = true;// void 
function Debug(index: number): void {}

在編寫程序的時候，可以通過console.log輸出日志，使用工具推薦: PlayGround

let dataList = [1, 2, 3];
console.log(dataList);										// [1, 2, 3] let value = 10;
console.log("value: ", value);						// "value: ",  10 let name: string = "TypeScript";
let years: number = 5;
let words: string = `您好，今年是${name}發布${years + 1}周年`;
console.log("Content:" + words);					// "Content:您好，今年是TypeScript發布6周年"

console.log的不僅支持基礎數據，也支持數組，Map相關； 不需要考慮是否存在Lua中的dump相關

// 數組
const numList = [1, 2, 3];
console.log(numList); 
// 輸出： [1, 2, 3] // Map列表
let myMap = new Map([["key1", "value1"],["key2", "value2"]
]); 
console.log(myMap);
// 輸出： Map (2) {"key1" => "value1", "key2" => "value2"} // String對象
console.log(String);
// 輸出： function String() { [native code] }

其他類型

  • const常量相關
const value = 10;
value = 11;						// Error:  Assignment to constant variable
  • any 表示類型不明確，可以通過賦值改變為不同的類型：
// any類型，表示類型不明確； 可以賦值為不同的類型
let data: any = null;
data = "hello";
data = false;
  • 數組相關， 類型后面有個[]
// 有類型的數組
let numList: number[] = [1, 2];
let strList: string[] = ["heloo", "typeScript"];
// 任意類型數據
let dataList: any[] = [1, false, "hello", 4];
// 泛型數組
let dataList: Array<number> = [1,2,3];
  • enum枚舉相關
enum kColor {RED,GREEN,BLUE,
}
let color: kColor = kColor.RED;
  • never類型， 相當于其他類型包含null和undefined的子類型，代表不會出現的值
let x: never;// 運行錯誤，數字類型不能轉為 never 類型
// Type 'number' is not assignable to type 'never'
x = 123;// 運行正確，never 類型可以賦值給 never類型
x = (()=>{ throw new Error('exception')})();
  • 注意，可以通過|支持不同的數據類型，比如：
let value: number | string = null;
let value: string | string[];

類型判定typeof

使用typeof可以對數據進行類型判定顯示，比如：

console.log(typeof(false));								// "boolean" 
console.log(typeof(1.0));									// "number" 
console.log(typeof(0XFFFF));							// "number" 
console.log(typeof("script"));						// "string"

其他一些有意思的特性：

// "object"
console.log(typeof(null));
console.log(typeof {});
console.log(typeof []); 									// "undefined"
console.log(typeof(undefined));				// "undefined"				
console.log(typeof(any));							// "undefined"
let data;
console.log(typeof(data));						// "undefined"// 函數相關
function getValue(): number {return 0;
}
console.log(typeof(function));					// "function" 
console.log(typeof(getValue));          // "function" 
console.log(typeof(getValue()));        // "number"// NaN相關
console.log(typeof(NaN));									// "number" 
console.log(typeof(Number.NaN));					// "number"

我們需要注意下：

  • NaN的類型雖然是number數字類型， 但它真正代表的 非數字數特殊值，用于表示非法的數值? 如果兩個NaN比較，他們并不相等, 數學運算中較為常見：
console.log(0/0);						// NaN 
console.log(Math.sqrt(-1)); // NaN
console.log(Math.log(-1)); 	// NaN
  • null和undefined 前者表示一個空的引用， 后者表示一個沒有設置數據的變量，因此他們的類型并不相同
console.log(typeof(null));				// "object"
console.log(typeof(undefined));		// "undefined"
  • object 它表示一個非原始類型(數字，字符串，布爾)的值，主要作用于數組，對象和函數等，它是一種泛指的類型，可以包括任意類型值。
const numObj = new Number(10);
const strObj = new String("");
console.log(typeof(numObj));        // "object" 
console.log(typeof(strObj));        // "object"

在TypeScript的語言中，如果我們單純的使用value === null或者!value 這種方式來判定數據的合法性，可能會存在不嚴謹性。

考慮到數字0、空字符串、false、null、undefined、NaN的情況存在， 我們可以使用Boolean()函數將值轉換為布爾值, 然后再進行判定。

const value_1 = Boolean(0);
const value_2 = Boolean("");
const value_3 = Boolean(null);
const value_4 = Boolean(undefined);
const value_5 = Boolean(NaN);
// 輸出均為false 
console.log(value_1, value_2, value_3, value_4, value_5);

boxing和unboxing

前面說到了一個Boolean類型的轉換，既然支持Boolean類型對象的轉換，當然也提供了Number和String類型的轉換。

他們支持數字或字符串調用相關的方法接口，以實現一些復雜的邏輯處理。

const numObj = new Number(10);
const strObj = new String("");

但在熟悉JavaScript/typeScript后，會發現類似這樣的一個情況：

const str = "hello TypeScript";
console.log(str.toUpperCase());			// "HELLO TYPESCRIPT" const strObj = new String(str);
console.log(strObj.toUpperCase());	// "HELLO TYPESCRIPT"

string基礎數據和String對象可以調用相同的函數來實現邏輯， 這個原因在于：

JavaScript/TypeScript允許將數字，字符串等值類型轉換為對應的封裝對象， 這個轉換的過程被稱為boxing裝箱， 而對應的將一個引用對象類型轉換為值類型則被稱為unboxing拆箱。

在這里簡要的說明下，有助于對后面的文章理解。


關鍵字

最后說下關鍵字相關，算是對typeScript有個大概的了解：

關鍵字描述
break/continue跳出循環， break用于跳出當前循環， continue用于跳出當前循環的剩余代碼
as類型斷言，用于將一個實體斷言為特定的類型
try/catch/finally用于捕獲和處理異常
switch/case/default條件語句相關，可使用break進行截止
if/else if / else條件語句相關
var/let聲明變量的關鍵字
throw
number/ string/enum基礎數據類型： 浮點數，字符串，枚舉
true/falseboolean類型值
void/null/any/return/function–
static/const靜態和常量，靜態類成員，可以直接訪問； 常量必須在聲明后初始化
for/do while循環語句
get/set用于對對象屬性變量的獲取或設置
module/namespacemodule用于定義一個模塊，用于組織和封裝相關代碼， 自TypeScript 2.7版本起，逐漸被namespace代替
type/typeoftype用來做類型別名， typeof用來獲取數據類型
instanceofJavaScript的運算符，用于檢查對象是否是指定類的實例
public/private可用于聲明類方法類型是公有還是私有
exportexport用于將模塊中的變量，函數，類等導出，使其可以被其他模塊使用
import用于導入變量，函數，類相關，與export配對使用
super用于派生類調用基類的構造函數，方法和屬性相關
this在類中使用，用于引用當前對象
extends用于類繼承相關
implements/interfaceinterface用于定義一個接口，通過implements來實現接口
yield用于定義**生成器(特殊函數，可以在執行過程中暫停和恢復)**函數的暫停點，可以將值返回給調用者

一些簡單的實例：

  • var/let 聲明變量的關鍵字
/*
var是ES5及之前的JavaScript的關鍵字，特點：
* 函數作用域，聲明的變量在整個函數體內， 而不僅是在塊作用域內
* 變量會提升，聲明的變量會提升到函數的頂部， 即可在聲明之前使用
* 允許重復聲明
*/
function example() {var x = 10;if (true) {var x = 20; // 在同一函數作用域內重復聲明變量xconsole.log(x); // 輸出：20}console.log(x); // 輸出：20
}
example();/*
let是ES6及之后的JavaScript和TypeScript引入的關鍵子，特點：
* 塊作用域， 比如if語句，循環語句，并不是整個函數體內
* 不存在變量提升，必須聲明之后才能使用
* 不允許崇明聲明，否則會報錯
*/
function example2() {let y = 10;if (true) {let y = 20; // 在塊級作用域內聲明變量yconsole.log(y); // 輸出：20}console.log(y); // 輸出：10
}
example2();
  • as 用于將一個實體斷言為特定的類型
let someValue: any = "hello";
let strLength: number = (someValue as string).length;
console.log(strLength);			// 5
  • try/catch 捕獲異常
try {// 可能引發異常的代碼throw new Error("Something went wrong!");
} catch (error) {// 異常處理邏輯console.log(error.message);
} finally {// 總是執行的代碼塊
}
// 輸出：Something went wrong!
  • 條件語句相關
// switch/case相關
let fruit = "apple";
switch (fruit) {case "apple":console.log("It's an apple.");break;case "banana":console.log("It's a banana.");break;default:console.log("It's something else.");
}// if/ else if / else相關
let num = 10;
if (num > 0) {console.log("Positive number");
} else if (num < 0) {console.log("Negative number");
} else {console.log("Zero");
}
// 輸出：Positive number
  • instanceof 用于檢查實例對象是否是特定類的實例
class Animal {// class implementation
}class Dog extends Animal {//
}const animal = new Animal;
const myDog = new Dog();
console.log(animal instanceof Animal);		// true
console.log(myDog instanceof Animal); 		// true
  • export/import
// 模塊導出
export const myVariable = 123;
export function myFunction() {// 函數實現
}
export class MyClass {// 類實現
}// 模塊導入
import { myVariable, myFunction, MyClass } from './myModule';
  • super 用于子類調用基類的構造函數和方法等
class Parent {private _value: number = 0;constructor(value: number) {// this用作類中對象的引用this._value = value;console.log("Parent constructor:", this._value);}parentMethod() {console.log("Parent parentMethod");}
}// extends 繼承
class Child extends Parent {constructor() {super(10); // 調用父類構造函數}childMethod() {super.parentMethod(); // 調用父類方法}
}const child = new Child();
child.childMethod();/*
Parent constructor: 10
Parent parentMethod
*/
  • get/set用于對對象屬性變量的獲取或設置
class MyClass {private _myProperty: string;get myProperty(): string {return this._myProperty;}set myProperty(value: string) {this._myProperty = value;}
}const myObj = new MyClass();
// 設置對象屬性值
myObj.myProperty = "Hello";
// 獲取對象屬性值
console.log(myObj.myProperty); // 輸出 "Hello"
  • interface/implements 定義并實現接口
// 定義接口
interface MyInterface {myMethod(): void;
}// 實現接口
class MyClass implements MyInterface {myMethod() {console.log("Implementing MyInterface");}
}const myObj = new MyClass();
myObj.myMethod(); // 輸出 "Implementing MyInterface"
  • yield 生成器函數暫停
function* myGenerator() {yield 1;yield 2;yield 3;
}const generator = myGenerator();
console.log(generator.next().value); // 輸出 1
console.log(generator.next().value); // 輸出 2
console.log(generator.next().value); // 輸出 3

編寫可能有誤，請您不吝指導。


本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/37648.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/37648.shtml
英文地址，請注明出處：http://en.pswp.cn/news/37648.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

面試經典150題——羅馬數字轉整數

面試經典150題——羅馬數字轉整數

羅馬數字包含以下七種字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 數值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如&#x…
閱讀更多...
docker 學習-- 01 基礎知識

docker 學習-- 01 基礎知識

docker 學習-- 01 基礎知識 文章目錄 docker 學習-- 01 基礎知識1.前言1.1 docker 是什么1.2 docker優點1.2.1 統一開發和生產環境:1.2.2 高性能:1.2.3 更輕松的維護和拓展&#xff1a;1.2.4 更輕松的遷移&#xff1a; 1.3 docker缺點1.3.1 運行環境受限1.3.2 文件管理和網絡端…
閱讀更多...
item_sku-獲取sku詳細信息

item_sku-獲取sku詳細信息

一、接口參數說明&#xff1a; item_sku-獲取sku詳細信息&#xff0c;點擊更多API調試&#xff0c;請移步注冊API賬號點擊獲取測試key和secret 公共參數 請求地址: https://api-gw.onebound.cn/taobao/item_sku 名稱類型必須描述keyString是調用key&#xff08;點擊獲取測試…
閱讀更多...
安全中間件的設計思路和簡單實踐

安全中間件的設計思路和簡單實踐

rasp 的侵入式特性和攔截特性導致開發和運維普通不太愿意配合&#xff0c;當生產環境出現問題時往往第一時間先把責任推給 rasp&#xff0c;逐漸的安全部門普遍只能把 rasp 設置為告警模式&#xff0c;而且越是大的集群攔截開的就越少&#xff0c;所以字節的 elkeid 和某外賣大…
閱讀更多...
P13-CNN學習1.3-ResNet(神之一手~)

P13-CNN學習1.3-ResNet(神之一手~)

論文地址:CVPR 2016 Open Access Repository https://arxiv.org/pdf/1512.03385.pdf Abstract 翻譯 深層的神經網絡越來越難以訓練。我們提供了一個殘差學習框架用來訓練那些非常深的神經網絡。我們重新定義了網絡的學習方式&#xff0c;讓網絡可以直接學習輸入信息與輸出信息…
閱讀更多...
Python-OpenCV中的圖像處理-圖像直方圖

Python-OpenCV中的圖像處理-圖像直方圖

Python-OpenCV中的圖像處理-圖像直方圖 圖像直方圖統計直方圖繪制直方圖Matplotlib繪制灰度直方圖Matplotlib繪制RGB直方圖 使用掩膜統計直方圖直方圖均衡化Numpy圖像直方圖均衡化OpenCV中的直方圖均衡化CLAHE 有限對比適應性直方圖均衡化 2D直方圖OpenCV中的2D直方圖Numpy中2D…
閱讀更多...
代碼隨想錄算法訓練營20期|第七天|哈希表part02|454.四數相加II ● 383. 贖金信 ● 15. 三數之和 ● 18. 四數之和 ● 總結

代碼隨想錄算法訓練營20期|第七天|哈希表part02|454.四數相加II ● 383. 贖金信 ● 15. 三數之和 ● 18. 四數之和 ● 總結

454.四數相加II 比較巧思的解法&#xff0c;先把nums1 和nums2的數兩兩相加&#xff0c;并存儲sum和次數 再在nums3和nums4里找對應和sum和為0的數值i,j Time: N^2 Space:N^2, 最壞情況下A和B的值各不相同&#xff0c;相加產生的數字個數為 n^2 class Solution {public int fo…
閱讀更多...
Spring AOP實踐：如何通過aop記錄日志？

Spring AOP實踐：如何通過aop記錄日志？

目錄 一、依賴 二、自定義注解 三、切面 一、依賴 以SpringBoot工程為例&#xff0c;導入aop的依賴。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency> 二…
閱讀更多...
為什么要自動化Web測試？

為什么要自動化Web測試？

Web自動化是更快地實現所需結果的較佳方式。自動化測試在市場上引起了巨大的轟動。此軟件測試過程可以讓您使用正確的自動化測試工具和技術集自動執行測試過程。我們執行它是為了檢查軟件應用程序是否具有完全按照我們希望它執行的方式執行的勇氣。 比以往更快地獲得反饋 自動化…
閱讀更多...
基于Promise.resolve實現Koa請求隊列中間件

基于Promise.resolve實現Koa請求隊列中間件

本文作者為360奇舞團前端工程師 前言 最近在做一個 AIGC 項目&#xff0c;后端基于 Koa2 實現。其中有一個需求就是調用兄弟業務線服務端 AIGC 能力生成圖片。但由于目前兄弟業務線的 AIGC 項目也是處于測試階段&#xff0c;能夠提供的服務器資源有限&#xff0c;當并發請求資源…
閱讀更多...
kafka和rabbitmq之間的區別以及適用場景

kafka和rabbitmq之間的區別以及適用場景

Kafka 和 RabbitMQ 都是流行的消息傳遞系統&#xff0c;用于實現分布式系統中的消息傳遞、事件處理和數據流。它們在設計和適用場景上有一些不同&#xff0c;下面詳細介紹它們之間的區別和適用場景。 Kafka 特點和優勢&#xff1a; 高吞吐量&#xff1a; Kafka 的設計目標是實…
閱讀更多...
【Java】數據交換 Json 和 異步請求 Ajax

【Java】數據交換 Json 和 異步請求 Ajax

&#x1f384;歡迎來到邊境矢夢的csdn博文&#xff0c;本文主要講解Java 中 數據交換和異步請求 Json&Ajax 的相關知識&#x1f384; &#x1f308;我是邊境矢夢&#xff0c;一個正在為秋招和算法競賽做準備的學生&#x1f308; &#x1f386;喜歡的朋友可以關注一下&#…
閱讀更多...
go mod 添加私有庫GOPRIVATE

go mod 添加私有庫GOPRIVATE

私有地址 形式倉庫域名/組織名形式倉庫域名形式*倉庫域名 示例私有地址&#xff1a; gitee.com/takujo_admin 或者igitlab.com 多個私有地址,分割&#xff0c;示例&#xff1a; gitee.com,igitlab.com 修改env go env -w GOPRIVATE"私有地址" go env -w …
閱讀更多...
conda創建虛擬環境

conda創建虛擬環境

創建虛擬環境是在計算機上設置一個獨立的空間&#xff0c;用于安裝和運行特定版本的軟件和依賴項&#xff0c;以避免與系統其他部分的沖突。 創建虛擬環境&#xff1a; conda create --name myenv python3.8 這將創建一個名為myenv的虛擬環境&#xff0c;并安裝Python 3.8版本。…
閱讀更多...
pwm接喇叭搞整點報時[keyestudio的8002模塊]

pwm接喇叭搞整點報時[keyestudio的8002模塊]

雖然現在查看時間很方便&#xff0c;但是其實好像我的時間觀念卻越來越差。于是決定搞一個整點報時&#xff0c;時常提醒自己時光飛逝&#xff0c;不要老是瞎墨跡。 這篇主要講一下拼裝方式和配置&#xff0c;就差不多了。不涉及什么代碼。3針的元器件&#xff0c;去掉正負接線…
閱讀更多...
day3 STM32 GPIO口介紹

day3 STM32 GPIO口介紹

GPIO接口簡介 通用輸入輸出接口GPIO是嵌入式系統、單片機開發過程最常用的接口&#xff0c;用戶可以通過編程靈活的對接口進行控制&#xff0c;實現對電路板上LED、數碼管、按鍵等常用設備控制驅動&#xff0c;也可以作為串口的數據收發管腳&#xff0c;或AD的接口等復用功能使…
閱讀更多...
網絡安全--iptables（待更新，累了）

網絡安全--iptables（待更新，累了）

總結&#xff1a; iptables 的關鍵概念和功能&#xff1a; 規則&#xff08;Rules&#xff09;&#xff1a; iptables 使用規則來定義特定的操作&#xff0c;例如允許或拒絕特定類型的網絡流量。每條規則都由條件和操作組成。條件可以是源 IP 地址、目標 IP 地址、端口號等&a…
閱讀更多...
thinkphp:對數據庫減少增加某個字段的值（dec、inc的用法）

thinkphp:對數據庫減少增加某個字段的值（dec、inc的用法）

例子&#xff1a;當字段po_num的值等于數組list_info中的po_num的值時修改數據庫表po_rcv_receipt_line中某些信息&#xff1a; 1、數據庫delivery_quantity字段的值 數據庫中delivery_quantity的值變量$list_info[write_quantity] ->inc(delivery_quantity, $list_info[…
閱讀更多...
【設計模式——學習筆記】23種設計模式——狀態模式State（原理講解+應用場景介紹+案例介紹+Java代碼實現）

【設計模式——學習筆記】23種設計模式——狀態模式State（原理講解+應用場景介紹+案例介紹+Java代碼實現）

文章目錄 案例引入介紹基本介紹登場角色應用場景 案例實現案例一類圖實現 案例二&#xff1a;借貸平臺源碼剖析傳統方式實現分析狀態修改流程類圖實現 案例三&#xff1a;金庫警報系統系統的運行邏輯偽代碼傳統實現方式使用狀態模式 類圖實現分析問題問題一問題二 總結文章說明…
閱讀更多...
國內芯片廠商創新突破，助力國產替代持續加速

國內芯片廠商創新突破，助力國產替代持續加速

近日&#xff0c;中商產業研究院發布最新研究報告顯示&#xff0c;今年1~5月份中國進口集成電路為1865億件&#xff0c;同比下降19.6%&#xff0c;同比去年5個月累計少進口了455億顆&#xff0c;平均每天少進口3億顆。與此同時&#xff0c;英特爾、AMD、美光、三星、SK海力士等…
閱讀更多...
最新文章

Copyright @ 2022~2023