亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

斷言

實例

聯合和交叉類型

區別

別名

函數類型的聯合類型和交叉類型試驗結果如下：

對于交叉類型：函數參數列表取并集，函數返回值列表取交集。

對于聯合類型：直接取第一個聯合前的函數類型，后面的函數類型均無效，所以沒有意義。

另外，對象/接口的聯合/交叉類型也會增加復雜度，個人感覺通常情況下不適合使用，希望老師能給點例子說明適合使用的具體場景。

const?products?=?{
1:?{
name:'nick',
price:200
},
2:{
name:?'adidas',
price:300
}
}

interface?Product?{
name:string
price:?number
}

//索引類型
interface?Products?{
[id:number]:Product
}

//映射類型
type?Keys?=?keyof?Product;
type?Tp?=?typeof?products;

//接口--類型的結構
interface?User?{
name:string
age:?number
}

//類型別名
type?UserType?=?{
name:string
age:?number
}

function?fun(params:User):User{
return?params
}

//?接口可擴展，類型不能
interface?Person?extends?User{
email:string
}
//接口可以被類實現，type不能
class?ManC?implements?User{
name:string;
age:?number;
email:?string;
constructor(name:string,?age:number,email:string){
this.name?=?name;
this.age?=?age;
this.email?=?email
}
}

interface?Woman{
age:?number
}

interface?Man{
name:string
}
//type支持聯合類型和交叉類型，interface不支持
type?People?=?Man?|?Woman;??//聯合類型????Man?&?Woman?交叉類型（兩個都得有）
const?p:People?=?{
name:?'zyw',
age:?34
}
//兩種都可以用時，首選interface
//首字母大寫
//有些公司，interface前加I，type前加T。不建議

表驅動

//?枚舉
enum?OrderStatus1{
Pending,
Shipped,
Completed,
Cancelled,
Unknown
}
//-------0?1?2?3?4

//?數字枚舉
enum?OrderStatus2{
Pending=3,
Shipped,
Completed=8,
Cancelled,
Unknown
}
//---------3?4?8?9?10

//?字符串枚舉
enum?OrderStatus3{
Pending='Pending',
Shipped='Shipped',
Completed='Completed',
Cancelled='Cancelled',
Unknown='Unknown'
}

//?異構枚舉
enum?OrderStatus4{
Pending,
Shipped,
Completed='Completed',
Cancelled='Cancelled',
Unknown='Unknown'
}
//------0?1??Completed?Cancelled?Unknown

js和ts類型

//?數組
const?arr1:string[]?=?['a','b','c'];
const?arr2:Array<number?|?string>?=?['a',3,5];

//?元祖--嚴格按照順序，一一對應
const?tuple:?[string,number]?=?['a',3]

//?函數
//?1.箭頭函數
type?Fun?=?(params:string)=>boolean;
const?fun1:Fun?=?()=>false;
//?2.函數語句
function?fun2(params:string):boolean{
return?false;
}
//?沒有返回值--void
const?v=():void?=>{}

//?對象
interface?Obj?{a:string,b:string}
const?obj:Obj?=?{
a:'1',
b:'2'
}

mkdir foldName 命令行新建文件夾

1

如何搭建TypeScript環境：

1. 在線網頁版編輯器地址：https://www.typescriptlang.org/，選擇Playground進入在線編輯區。

2. npm構建包環境：

   1）先創建一個空文件

   2）打開vscode，打開剛創建的空文件

   3）終端中輸入：npm init,之后一直回車，則會創建出一個package.json文件

   4）新建src文件夾，在該文件中新建index.ts文件

   5）全局安裝typescript：終端輸入命令---npm i typescript -g

   6)? 查看是否安裝和查看版本：tsc -v

   7）輸入tsc --init 自動創建出tsconfig.json配置文件

   8）在配置文件中輸入調試運行語句："build":"tsc"

   9)? 終端中輸入npm run build

3. 構建前端項目

   1）打開cmd，進入想要創建前端項目地址，輸入命令：npm create vite@latest

   2）選擇是否創建，輸入：y

   3)? 輸入創建的文件名

   4）選擇語言：vue

   5)? 選個腳本語言： typescript

   6) 創建成功，根據提示，進入項目目錄下，輸入：npm install安裝依賴，輸入：npm run dev運行成功打開網址即可

定義數組、函數

四個范式