欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一起來學習TypeScript的類型

 更新時間:2022年02月16日 14:16:23   作者:Edison?Dont  
這篇文章主要為大家詳細介紹了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"任意字符串
booleantrue,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ù)組
enumenum{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)容! 

相關文章

  • javascript刪除Table中的一行的腳本代碼

    javascript刪除Table中的一行的腳本代碼

    用js實現(xiàn)的刪除table中一行數(shù)據(jù)的代碼
    2008-06-06
  • js將圖片轉(zhuǎn)base64的兩種實現(xiàn)方法

    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ā)之實現(xiàn)食堂點餐系統(tǒng)

    這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的食堂點餐系統(tǒng),文中的示例代碼講解詳細,感興趣的小伙伴可以和小編一起學習一下
    2023-01-01
  • Javascript?promise.all的用法介紹(簡潔易懂)

    Javascript?promise.all的用法介紹(簡潔易懂)

    這篇文章主要給大家介紹了關于Javascript?promise.all用法的相關資料,Promise.all()方法是一個Promise對象方法,可以將多個Promise實例包裝成一個新的Promise對象,最終返回一個數(shù)組,需要的朋友可以參考下
    2023-07-07
  • 小程序選項卡以及swiper套用(跨頁面)

    小程序選項卡以及swiper套用(跨頁面)

    這篇文章主要為大家詳細介紹了小程序選項卡以及swiper套用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • JavaScript動態(tài)檢驗密碼強度的實現(xiàn)方法

    JavaScript動態(tài)檢驗密碼強度的實現(xiàn)方法

    平時我們會在某些網(wǎng)站的注冊頁面或者更改密碼的頁面發(fā)現(xiàn)當我們輸入密碼時,會有一個類似于進度條的長條進行提示用戶輸入的密碼強度。那么這種效果怎么實現(xiàn)的呢?下面小編給大家介紹下js動態(tài)檢驗密碼強度的實現(xiàn)方法,一起看看吧
    2016-11-11
  • JavaScript中使用Object.prototype.toString判斷是否為數(shù)組

    JavaScript中使用Object.prototype.toString判斷是否為數(shù)組

    這篇文章主要介紹了JavaScript中使用Object.prototype.toString判斷是否是數(shù)組,本文講解了Object.prototype.toString相關知識,并給出了判斷數(shù)組的實現(xiàn)代碼,使用本文方法同樣可以判斷javascrpty的其它數(shù)據(jù)類型,需要的朋友可以參考下
    2015-04-04
  • JS模擬簡易滾動條效果代碼(附demo源碼)

    JS模擬簡易滾動條效果代碼(附demo源碼)

    這篇文章主要介紹了JS模擬簡易滾動條效果代碼,可模擬出滾動條拖動顯示的效果,涉及JavaScript鼠標事件的響應及頁面元素運算的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-04-04
  • vant倒序年月日期組件封裝實例詳解

    vant倒序年月日期組件封裝實例詳解

    這篇文章主要介紹了vant倒序年月日期組件封裝實例詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • js智能獲取瀏覽器版本UA信息的方法

    js智能獲取瀏覽器版本UA信息的方法

    下面小編就為大家?guī)硪黄猨s智能獲取瀏覽器版本UA信息的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08

最新評論