TypeScript 學(xué)習(xí)總結(jié) (二)
前言：TypeScript 內(nèi)容，會(huì)分 3 篇文章來(lái)寫(xiě)，可以持續(xù)關(guān)注喲～，如果文章對(duì)您有用，大佬可以關(guān)注我的公眾號(hào)【前端常見(jiàn)面試題】，預(yù)祝大家元旦愉快哦～
本章主要內(nèi)容
- 1，ts 函數(shù)
- 2，ts 數(shù)組
- 3，ts 對(duì)象
- 4，ts 接口
1，ts 函數(shù)
ts 函數(shù) 和 Js函數(shù)的區(qū)別：
- 1，ts有類型，Js無(wú)類型
- 2，ts有函數(shù)類型，Js無(wú)函數(shù)類型
- 3，ts含箭頭函數(shù)，Js也有箭頭函數(shù)(ES2015)
- 4，ts必填和可選參數(shù)，Js所有參數(shù)都是可選的
- 5，都有默認(rèn)參數(shù)和剩余參數(shù)
- 6，ts函數(shù)重載，Js無(wú)函數(shù)重載
1.1，參數(shù)類型和返回類型
function func(name: string, id: number): string {
return name + id
}
// 函數(shù)名后的: string 是返回值的類型的定義
1.2，函數(shù)類型
let personGenerator: (username: string, nums: number) => string
function person(name: string, id: number): string {
return name + id
}
personGenerator = person
1.3，箭頭函數(shù)
// 普通函數(shù)
function func() {
let _t = this;
_t.name = 'xiaowang';
setInterval(function () {
console.log(_t.name)
}, 1000)
}
// 箭頭函數(shù)
function func() {
this.name = 'xiaowang';
setInterval(() => {
console.log(this.name)
}, 1000)
}
1.4，可選參數(shù)和默認(rèn)參數(shù)
// 可選參數(shù)
function person(name: string, id: number, age?: number): string {
return name + id
}
// 默認(rèn)參數(shù)
function person(
name: string = "semlinker",
id: number,
age?: number
): string {
return name + id
}
在聲明函數(shù)時(shí)，可以通過(guò) ? 號(hào)來(lái)定義可選參數(shù)，比如 age?: number 這種形式
，需要注意的是可選參數(shù)要放在普通參數(shù)的后面，不然會(huì)導(dǎo)致編譯錯(cuò)誤
1.5，剩余參數(shù)
function func(arr, ...items) {
items.forEach(i => {
arr.push(i)
})
}
let a = []
func(a, 1, 2, 3, 4, 5, 6)
1.6，函數(shù)重載
函數(shù)重載或者方法重載是使用相同的名稱和不同的參數(shù)數(shù)量或者類型創(chuàng)建多個(gè)方法的一種能力
function attr(name: string): string
function attr(age: number): number
function attr(nameorage: any): any {
if (nameorage && typeof nameorage === 'string') {
console.log('name')
} else {
console.log('age')
}
}
attr('xiaowang') // name
attr(10) // 10
2，ts 數(shù)組
2.1，數(shù)組解構(gòu)
var x;
var y;
var z;
var arr = [1, 2, 3, 4, 5, 6];
[x, y, z] = arr;
console.log(x, y, z); // 1 2 3
2.2, 數(shù)組展開(kāi)運(yùn)算符
let arr = [1,2,3]
let five_arr = [...arr, 3,4,5,6]
console.log(five_arr) // [1, 2, 3, 3, 4, 5, 6]
2.3, 數(shù)組遍歷
let arr: string[] = ["xiaowang", "Jerry", "Lisa"];
for (let i of arr) {
console.log(i); // xiaowang Jerry Lisa
}
3，ts 對(duì)象
3.1，對(duì)象解構(gòu)
let person = {
name: 'xiaowang',
age: 18
}
let {userName: name, userAge: age} = person;
console.log(userName, userAge) // xiaowang 18
3.2，對(duì)象展開(kāi)運(yùn)算符
let person = {
name: 'xiaowang',
age: 18
}
// 組裝對(duì)象
let personWithAddress = {...person, address: '北京'}
// 獲取除了某些項(xiàng)外的其他項(xiàng)
let {name, ...reset} = personWithAddress
console.log(name) // xiaowang
console.log(reset) // {age: 18, address: '北京'}
4，ts 接口
接口：是對(duì)行為的抽象，而具體如何行動(dòng)需要由類去實(shí)現(xiàn)，ts中，我們使用接口(Interface)來(lái)定義對(duì)象的類型，可用于對(duì)類的行為進(jìn)行抽象以外，也常用于對(duì) 對(duì)象的形狀 進(jìn)行描述
ts的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查，在 ts 里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約，因?yàn)?Interface 這個(gè)概念在 js 中沒(méi)有，所以 Interface 編譯后 并不會(huì)呈現(xiàn)在 js 中，只會(huì)進(jìn)行靜態(tài)的類型檢查
4.1，對(duì)象的形狀
interface Person {
name: string;
age: number;
}
// 賦值的時(shí)候，變量的形狀必須和接口的形狀保持一致
const p1: Person = {
name:'xiaowang';
age: 18
}
4.2，可選 ｜ 只讀屬性
interface Person {
readonly name: string
age?: number
}
只讀屬性用于限制只能在對(duì)象剛剛創(chuàng)建的時(shí)候修改其值, 此外 ts 還提供了 ReadonlyArray<T> 類型，它與 Array<T> 相似，只是把所有可變方法去掉了，因此可以確保數(shù)組創(chuàng)建后再也不能被修改
let arr: number[] = [1,2,3,4,5,6]
let readonlyArr: ReadonlyArray<number> = arr
readonlyArr[0] = 100 // Error
readonlyArr.push(10) // Error
readonlyArr.length // Error
arr = readonlyArr // Error
4.3，任意屬性
有時(shí)候我們希望一個(gè)接口中除了包含必選和可選屬性之外，還允許有其他的任意屬性，這時(shí)我們可以使用 索引簽名 的形式來(lái)滿足上述要求
interface Person {
name: string;
age?: number;
[propName: string]: any;
}
const p1 = { name: "xiaowang" };
const p2 = { name: "Jerry", age: 18 }
const p3 = { name: "Lisa", sex: '女' }
4.4，接口與類型別名的區(qū)別
- 4.4.1，Objects/Functions
接口和類型別名都可以用來(lái)描述對(duì)象的形狀或函數(shù)簽名：
接口:
interface Point {
x: number;
y: number;
}
interface SetPoint {
(x: number, y: number): void;
}
類型別名：
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
- 4.4.2, Other Types
與接口類型不一樣，類型別名可以用于一些其他類型，比如原始類型、聯(lián)合類型和元組：
// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string]
- 4.4.3，Extend
接口和類型別名都能夠被擴(kuò)展，但語(yǔ)法有所不同。此外，接口和類型別名不是互斥的。接口可以擴(kuò)展類型別名，而反過(guò)來(lái)是不行的
// Interface extends interface
interface PartialPointX { x: number; }
interface Point extends PartialPointX {
y: number;
}
// Type alias extends type alias
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
// Interface extends type alias
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
// Type alias extends interface
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
- 4.4.4，Implements
類可以以相同的方式實(shí)現(xiàn)接口或類型別名，但類不能實(shí)現(xiàn)使用類型別名定義的聯(lián)合類型：
interface Point {
x: number;
y: number;
}
class SomePoint implements Point {
x = 1;
y = 2;
}
type Point2 = {
x: number;
y: number;
};
class SomePoint2 implements Point2 {
x = 1;
y = 2;
}
type PartialPoint = { x: number; } | { y: number; };
// A class can only implement an object type or
// intersection of object types with statically known members.
class SomePartialPoint implements PartialPoint { // Error
x = 1;
y = 2;
}
- 4.4.5，Declaration merging
與類型別名不同，接口可以定義多次，會(huì)被自動(dòng)合并為單個(gè)接口
interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };
如果文章對(duì)您有用，大佬可以關(guān)注我的公眾號(hào)【前端常見(jiàn)面試題】，預(yù)祝大家元旦愉快哦～
