一起來學習TypeScript的類型
前言
TypeScript學習筆記第一部分,關于TS的類型聲明以及基本類型。
一、類型聲明
- 類型聲明
- 類型聲明是TS非常重要的一個特點
- 通過類型聲明可以指定TS中變量(參數(shù)、形參)的類型
- 指定類型后,當為變量賦值時,TS編譯器會自動檢查值是否符合類型聲明,符合則賦值,否則報錯
- 簡而言之,類型聲明給變量設置了類型,使得變量只能存儲某種類型的值
- 語法:
let 變量: 類型; let 變量: 類型 = 值; function fn(參數(shù): 類型, 參數(shù): 類型): 類型{ ... }
- 自動類型判斷
- TS擁有自動的類型判斷機制
- 當對變量的聲明和賦值是同時進行的,TS編譯器會自動判斷變量的類型
- 所以如果變量的聲明和賦值同時進行時,可以省略掉類型聲明
//先聲明類型再賦值 let a: string; a = 'Hello'; //聲明類型并賦值 let b: number = 123; //聲明變量和賦值同時進行 let c = false; c = true; //編譯器自動判斷變量c為boolean
二、類型
類型 | 例子 | 描述 |
---|---|---|
number | 1,-33, 2.5 | 任意數(shù)字 |
string | 'hi', "HI" | 任意字符串 |
boolean | true,false | 布爾值true或false |
字面量 | 其本身 | 限制變量的值就是該字面量的值 |
any | * | 任意類型 |
unknown | * | 類型安全的any |
void | 空值(undefined) | 沒有值(或undefined) |
never | 沒有值 | 不能是任何值 |
object | {name: "Alice"} | 任意的JS對象 |
array | [1, 2, 3] | 任意JS數(shù)組 |
tuple | [4, 5] | 元素,TS新增類型,固定長度的數(shù)組 |
enum | enum{A, B} | 枚舉,TS中新增類型 |
1.number
let a: number; a = 10; a = 33; //a = 'hello'; 變量a的類型是number, 不能賦值字符串
2.string
let b: string; b = 'hello'; //b = 123; 變量b的類型是字符串, 不能賦值number
3.boolean
let c: boolean; c = true;
4.字面量
let d: 10; // 此時d只能等于10 //let d = 11; 則會報錯,限制了該變量就是字面量的值(有點類似常量)
5.聯(lián)合類型
let A: boolean | string; // 變量A既可以是布爾類型也可以是字符串類型 A = true; A = "Hello"; A = false; A = "World"; // 字面量的聯(lián)合類型限制變量B只能是"male"或"female" let B: "male" | "female"; B = "male"; B = "female"; // B = "trans" 錯誤
6.any
任意類型,相當于關閉了TS對類型的限制(盡量不要用)。
let a: any; a = true; a = "hi"; a = 123; // 如果聲明變量不指定類型,則TS解析器會自動判斷變量的類型為any let b; b = true; b = "hi"; b = 123;
注意any類型的變量可以賦值給任意變量,容易出現(xiàn)問題。
// any 任意類型,相當于關閉了ts對類型的限制(盡量不要用) let B: any; B = 10; B = 'string'; B = true; let S: string; S = B; // any類型可以賦值給任意類型變量,容易出現(xiàn)問題。
7.unknown
類型安全的any,不能直接賦值給其他變量。
let a: unknown; a = 10; a = "string"; a = true; let b: string; // b = a; 賦值時編譯器會報錯,不能將“unknown”類型分配給“string”。
如果一定要賦值,可以賦值前類型判斷或者使用斷言。
let a: unknown; a = 10; a = true; a = "string"; let b: string; /* * 斷言: * 1. 變量 as 類型 * 2. <類型> 變量 */ b = a as string; b = <string> a; /* * 賦值前類型判斷 */ if (typeof c === 'string'){ b = a; }
8.void
沒有返回值 => 返回的是空值 / undefined
function foo(): void { } console.log(typeof foo()); // => undefined function foo1(): void{ return undefined; } function foo3(){ // 不寫void默認為void } // 寫了返回值不寫返回值類型 => 自動判斷返回值類型 function foo4(){ return 1; } console.log(typeof foo4()); // => number
9.never
沒有值,不能是任何值(連undefined都沒有)
function foo(): never{ throw new Error('raise'); }
10.object
let o: {name: string, age: number}; o = { name: "Edison", age: 25 } // 定義可選參數(shù) // [propName: string]: any 任意類型的屬性 let a: {name: string, [propName: string]: any}; b = { name: 'Edison', age: 24, gender: "female" } // 定義函數(shù)結(jié)構(gòu) let foo: (a: number, b: number) => number; foo = function (n1, n2) { return n1 + n2; }
11.array
/* * 元組: 長度和類型還有順序必須與儲存元素一一對應 * [類型,類型] */ let a = [string, number]; a = ["hello", 123]; //以下報錯 a = [123, "hello"]; a = [123]; a = ["hello"]; a = ["hello", 123, 456];
12.tuple
/* * 元組: 長度和類型還有順序必須與儲存元素一一對應 * [類型,類型] */ let a = [string, number]; a = ["hello", 123]; //以下報錯 a = [123, "hello"]; a = [123]; a = ["hello"]; a = ["hello", 123, 456];
13.枚舉enum
enum Gender { Male = 0, Female = 1 } let person: {name: string, gender: Gender}; person = { name: "Edison", gender: Gender.Male }
14.其他
// & 同時滿足 let i: {name: string} & {age: number} & {gender: Gender}; i = person; // i = b; Error // 類型別名 type myType = typeof i; let person1: myType; let person2: myType;
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法
這篇文章主要給大家介紹了關于js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法,Base64是網(wǎng)絡上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個可打印字符來表示二進制數(shù)據(jù)的方法,需要的朋友可以參考下2023-07-07微信小程序開發(fā)之實現(xiàn)食堂點餐系統(tǒng)
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的食堂點餐系統(tǒng),文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學習一下2023-01-01Javascript?promise.all的用法介紹(簡潔易懂)
這篇文章主要給大家介紹了關于Javascript?promise.all用法的相關資料,Promise.all()方法是一個Promise對象方法,可以將多個Promise實例包裝成一個新的Promise對象,最終返回一個數(shù)組,需要的朋友可以參考下2023-07-07JavaScript動態(tài)檢驗密碼強度的實現(xiàn)方法
平時我們會在某些網(wǎng)站的注冊頁面或者更改密碼的頁面發(fā)現(xiàn)當我們輸入密碼時,會有一個類似于進度條的長條進行提示用戶輸入的密碼強度。那么這種效果怎么實現(xiàn)的呢?下面小編給大家介紹下js動態(tài)檢驗密碼強度的實現(xiàn)方法,一起看看吧2016-11-11JavaScript中使用Object.prototype.toString判斷是否為數(shù)組
這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數(shù)組,本文講解了Object.prototype.toString相關知識,并給出了判斷數(shù)組的實現(xiàn)代碼,使用本文方法同樣可以判斷javascrpty的其它數(shù)據(jù)類型,需要的朋友可以參考下2015-04-04