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

一起來(lái)學(xué)習(xí)TypeScript的類型

 更新時(shí)間:2022年02月16日 14:16:23   作者:Edison?Dont  
這篇文章主要為大家詳細(xì)介紹了TypeScript的類型,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

前言

TypeScript學(xué)習(xí)筆記第一部分,關(guān)于TS的類型聲明以及基本類型。

一、類型聲明 

  • 類型聲明
    • 類型聲明是TS非常重要的一個(gè)特點(diǎn)
    • 通過(guò)類型聲明可以指定TS中變量(參數(shù)、形參)的類型
    • 指定類型后,當(dāng)為變量賦值時(shí),TS編譯器會(huì)自動(dòng)檢查值是否符合類型聲明,符合則賦值,否則報(bào)錯(cuò)
    • 簡(jiǎn)而言之,類型聲明給變量設(shè)置了類型,使得變量只能存儲(chǔ)某種類型的值
    • 語(yǔ)法:
let 變量: 類型;
let 變量: 類型 = 值;
function fn(參數(shù): 類型, 參數(shù): 類型): 類型{
    ...
}
  • 自動(dòng)類型判斷
    • TS擁有自動(dòng)的類型判斷機(jī)制
    • 當(dāng)對(duì)變量的聲明和賦值是同時(shí)進(jìn)行的,TS編譯器會(huì)自動(dòng)判斷變量的類型
    • 所以如果變量的聲明和賦值同時(shí)進(jìn)行時(shí),可以省略掉類型聲明
//先聲明類型再賦值
let a: string;
a = 'Hello';
//聲明類型并賦值
let b: number = 123;
//聲明變量和賦值同時(shí)進(jìn)行
let c = false; 
c = true; //編譯器自動(dòng)判斷變量c為boolean

二、類型

類型例子描述

number

1,-33, 2.5任意數(shù)字
string'hi', "HI"任意字符串
booleantrue,false布爾值true或false
字面量其本身限制變量的值就是該字面量的值
any*任意類型
unknown*類型安全的any
void空值(undefined)沒(méi)有值(或undefined)
never沒(méi)有值不能是任何值
object{name: "Alice"}任意的JS對(duì)象
array[1, 2, 3]任意JS數(shù)組
tuple[4, 5]元素,TS新增類型,固定長(zhǎng)度的數(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; // 此時(shí)d只能等于10
//let d = 11; 則會(huì)報(bào)錯(cuò),限制了該變量就是字面量的值(有點(diǎn)類似常量)

 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" 錯(cuò)誤

 6.any

任意類型,相當(dāng)于關(guān)閉了TS對(duì)類型的限制(盡量不要用)。

let a: any;
a = true;
a = "hi";
a = 123;
// 如果聲明變量不指定類型,則TS解析器會(huì)自動(dòng)判斷變量的類型為any
let b;
b = true;
b = "hi";
b = 123;

注意any類型的變量可以賦值給任意變量,容易出現(xiàn)問(wèn)題。

// any 任意類型,相當(dāng)于關(guān)閉了ts對(duì)類型的限制(盡量不要用)
let B: any;
B = 10;
B = 'string';
B = true;
let S: string;
S = B; // any類型可以賦值給任意類型變量,容易出現(xiàn)問(wèn)題。
 

 7.unknown

類型安全的any,不能直接賦值給其他變量。

let a: unknown;
a = 10;
a = "string";
a = true;
let b: string;
// b = a; 賦值時(shí)編譯器會(huì)報(bào)錯(cuò),不能將“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

沒(méi)有返回值 => 返回的是空值 / undefined

function foo(): void {
}
console.log(typeof foo()); // => undefined
function foo1(): void{
    return undefined;
}
function foo3(){
    // 不寫(xiě)void默認(rèn)為void
}
// 寫(xiě)了返回值不寫(xiě)返回值類型 => 自動(dòng)判斷返回值類型
function foo4(){
    return 1;
}
console.log(typeof foo4()); // => number

 9.never

沒(méi)有值,不能是任何值(連undefined都沒(méi)有)

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

/*
*  元組: 長(zhǎng)度和類型還有順序必須與儲(chǔ)存元素一一對(duì)應(yīng)
*    [類型,類型]
*/
let a = [string, number];
a = ["hello", 123];
//以下報(bào)錯(cuò)
a = [123, "hello"];
a = [123];
a = ["hello"];
a = ["hello", 123, 456];

12.tuple

/*
*  元組: 長(zhǎng)度和類型還有順序必須與儲(chǔ)存元素一一對(duì)應(yīng)
*    [類型,類型]
*/
let a = [string, number];
a = ["hello", 123];
//以下報(bào)錯(cuò)
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.其他

// & 同時(shí)滿足
let i: {name: string} & {age: number} & {gender: Gender};
i = person;
// i = b; Error 
// 類型別名
type myType = typeof i;
let person1: myType;
let person2: myType;

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

相關(guān)文章

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

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

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

    js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法

    這篇文章主要給大家介紹了關(guān)于js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法,Base64是網(wǎng)絡(luò)上最常見(jiàn)的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法,需要的朋友可以參考下
    2023-07-07
  • 微信小程序開(kāi)發(fā)之實(shí)現(xiàn)食堂點(diǎn)餐系統(tǒng)

    微信小程序開(kāi)發(fā)之實(shí)現(xiàn)食堂點(diǎn)餐系統(tǒng)

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

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

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

    小程序選項(xiàng)卡以及swiper套用(跨頁(yè)面)

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

    JavaScript動(dòng)態(tài)檢驗(yàn)密碼強(qiáng)度的實(shí)現(xiàn)方法

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

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

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

    JS模擬簡(jiǎn)易滾動(dòng)條效果代碼(附demo源碼)

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

    vant倒序年月日期組件封裝實(shí)例詳解

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

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

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

最新評(píng)論