? ?戳藍字「前端技術優選」關注我們哦！

作者：慕晨同學

原文地址：https://github.com/USTB-musion/fee-skills/issues/19

寫在前面

ts是擁有類型系統的js的超集，近年來非常火熱。可以這么說，ts才是真正意義上的js。雖然ts的官方文檔非常全面，但是對于原來沒有接觸過ts的同學來說，全篇通讀下來需要耗掉不少時間，這篇文章旨在為嘗試入門ts的同學使用。

本文將從以下幾部分進行總結：

TypeScript的優勢

強類型與弱類型的區別

動態類型與靜態類型的區別

基礎類型

接口類型

函數

類

泛型

TypeScript的優勢

1.幫助更好地重構代碼

一個好的代碼習慣是常常對自己寫的代碼進行小的重構，使得代碼可維護性更強。但是對于很多線上運行的代碼，代碼測試覆蓋率往往不是很高，有時候哪怕一個變量名的改動，都會牽一發而動全身。而對于使用ts編寫的項目就不會有這種擔心。ts的靜態檢查特性會幫助找出代碼中有錯誤的部分。

2.vscode等IDE的提示更加智能

js是一門動態弱類型解釋語言，變量聲明后可以改變類型，而且類型需要在運行時才能確定。而ts的報錯提示是在編譯時，不是在運行時。所以使用ts帶來的靜態類型檢查等特性將使得IDE的提示更加完善。

3.類型聲明本身就是非常好的文檔

當你接手一個有歷史包袱的項目時，肯定會頭疼于文檔和代碼注釋的缺失，而對于ts來說，是可以做到代碼即文檔的，通過聲明文件可以知道哪些字段的含義以及哪些字段是必填和選填的。舉個簡單例子，當封裝一個button的組件時：

export interface ButtonProps {
style?: React.CSSProperties
className?: string
label?: React.ReactNode
type?: 'primary' | 'default' | 'search'
size?: 'sm' | 'md' | 'lg' | 'mini'
disabled?: boolean
title?: string
onClick?: ((e: React.MouseEvent) => void)
}

通過這些聲明文件可以知道，當使用這個button文件時，style是一個可選值，表示一個可以自定義樣式的style字段。type也是一個可選值，表示按鈕的顏色類型，可以選擇'primary','default','mini'其中的一種。disabled也是一個可選值，傳入的值必須是boolean類型。所以就可以看出類型聲明本身就是非常好的文檔。

強類型與弱類型的區別

強類型語言：?強類型語言不允許改變變量的數據類型，除非進行強制類型轉換。

例如：如果定義了一個字符串變量str,如果沒有進行強制類型轉換，是把str不能當作布爾值，整型等非字符型進行處理的。c，c++，Java等都是強類型語言。

弱類型語言：?定義與強類型語言相反，一個變量可以被賦予不同數據類型的值。

var a = '111';
var b = 222;
a = b;
console.log(a) // 222

如以上的js代碼所示，a是一個字符串變量，b是一個整型變量，但是卻可以把b賦值給a，把a打印出來的值是222。

強類型的嚴謹性能有效地避免很多錯誤。

動態類型與靜態類型的區別

動態類型語言:?在執行階段才做類型檢查。

例如：js/python等就是屬于動態類型語言，對類型檢查非常寬松，bug可能隱藏很久才被發現。

靜態類型語言:?在編譯階段就做類型檢查

例如: c++/Java等屬于靜態類型語言，對類型檢查非常嚴格，bug在編譯階段就會被發現。能做到代碼即文檔。

基礎類型

ES6的類型可以分為Boolean，Number，String，Array，Function，Object，Symbol，undefined，null。而TypeScript的數據類型則在ES6的基礎上加上void，any，never，元組，枚舉，高級類型。

基本語法

: type

TypeScript的基本類型語法是在變量之后使用冒號進行類型標識，這種語法也揭示了TypeScript的類型聲明實際上是可選的。

boolean

boolean是最基礎的數據類型，在ts中，使用boolean來定義布爾值

let isDone: boolean = false;

number

在ts中，使用number來定義數值類型

let num: number = 123

string

在ts中，使用string來定義字符串類型

let name: string = 'jarod'

array

在ts中，定義數組方式有兩種: 一種是在可以在元素類型后面接上[]，表示由此元素組成的一個數組:

let arr1: number[] = [1, 2, 3]

還有一種是使用數組泛型，Array?:

let arr2: Array = [1, 2, 3]

元組

如果想在數組內表示不同元素怎么辦？這時候就需要使用元組類型了。元組類型允許表示一個已知元素數量和類型的數組，各元素的類型不必相同。比如，你可以定義一對值分別為number和string類型的元組。

let hello: [number, string] = [0, 'hello']

枚舉

enum類型是對JavaScript標準數據類型的一個補充。像C#等其它語言一樣，使用枚舉類型可以為一組數值賦予友好的名字。

enum Month {
Jan,
Feb,
Mar
}
let month = [Month.Jan, Month.Feb, Month.Mar]

never

如果一個函數永遠沒有返回值時，我們可以聲明其為void類型：

function example(): never {
throw new Error('never');
}

any

any是ts的一個特殊類型，一旦聲明為any，則意味著關閉來ts的類型檢查，

let x: any = 0;
x = [];
x = false;
x = '';

對于any類型的變量，可以賦予任何類型的值。使用any對遷移js的項目是很友好的。但是在真正開發中，盡量還是少用any為好。

void

在ts中，void表示函數沒有返回值。

function example(): void {
console.log('this is void type');
}

undefined和null

在TypeScript里，undefined和null兩者各自有自己的類型分別叫做undefined和null。和 void相似，它們的本身的類型用處不是很大：

let u: undefined = undefined;
let n: null = null;

readonly

一些對象屬性只能在對象剛剛創建的時候修改其值。你可以在屬性名前用 readonly來指定只讀屬性,在結合react使用的過程中的例子:

interface Props {
readonly name: string;
}
interface State {
readonly color: string;
}
export class Child extends React.Component {
childMethod() {
this.props.name = 'jarod'; // ERROR: (props are immutable)
this.state.color = 'red'; // ERROR: (one should use this.setState)
}
}

接口類型

在 TypeScript 中，我們使用接口(Interfaces)來定義對象的類型。

對象接口

賦值的時候，變量的形狀必須和接口的形狀保持一致。

interface Name {
first: string;
second: string;
}

var personName:Name = {
first: '張三'
} // Property 'second' is missing in type '{ first: string; }' but required in type 'Name'

ts會對每一個字段做檢查，如果沒有對接口中聲明的字段進行定義(非可選),可以看出，定義的變量比接口少一些屬性則會拋出錯誤。

函數接口

接口能夠描述JavaScript中對象擁有的各種各樣的外形。除了描述帶有屬性的普通對象外，接口也可以描述函數類型

interface Lib {
(): void;
version: string;
doSomething(): void;
}

function getLib() {
let lib = (() => {}) as Lib
lib.version = '1.0.0'
lib.doSomething = () => {}
return lib;
}

函數

函數聲明

function sum(x: number, y: number) {
return x + y
}

函數表達式

let sum = (x: number, y: number): number => x + y

可選參數

對于參數，我們可以聲明其為可選參數，即在參數后面加"?"

function buildName(firstName: string, lastName?: string) {
// ...
}

函數重載

重載允許一個函數接受不同數量或類型的參數時，作出不同的處理。

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}

類

抽象類

抽象類只能在實例中使用，不能直接被實例化。

abstract class Animal {
eat() {
console.log('eat')
}
abstract sleep(): void
}

class Dog extends Animal {
constructor() {
super()
}
sleep() {
console.log('Dog sleep')
} // 在子類中實現父類中的抽象方法
}

public, private和protected

TypeScript 可以使用三種訪問修飾符(Access Modifiers)，分別是 public、private 和 protected。

public

public 修飾的屬性或方法是公有的，可以在任何地方被訪問到，默認所有的屬性和方法都是 public 的

class Animal {
public name;
public constructor(name) {
this.name = name;
}
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';
console.log(a.name); // Tom

private

private 修飾的屬性或方法是私有的，不能在聲明它的類的外部訪問

class Animal {
private name;
public constructor(name) {
this.name = name;
}
}

let a = new Animal('Jack');
console.log(a.name); // Jack
a.name = 'Tom';

// index.ts(9,13): error TS2341: Property 'name' is private and only accessible within class 'Animal'.
// index.ts(10,1): error TS2341: Property 'name' is private and only accessible within class 'Animal'.

protected

protected 修飾的屬性或方法是受保護的，它和 private 類似，區別是它在子類中也是允許被訪問的

class Animal {
protected name;
public constructor(name) {
this.name = name;
}
}

class Cat extends Animal {
constructor(name) {
super(name);
console.log(this.name);
}
}

泛型

定義：不預先確定的數據類型，具體的類型需要在使用的時候才能確定

例子：
聲明一個打印函數，實現把傳入的字符串打印出來：

function log(value: string): string {
console.log(value)
return value
}

但是這時，加一個需求，要實現能把字符串數組也打印出來：

function log(value: string): string
function log(value: string[]): string[]
function log(value: any): {
console.log(value)
return value
}

如上所示，可以用之前的函數重載來實現。

如果這時，再加一個需求，要實現能把任何類型的參數打印出來。泛型就派上用場了:

function log(value: T): T {
console.log(value);
return value;
}

軟件工程中，我們不僅要創建一致的定義良好的API，同時也要考慮可重用性。組件不僅能夠支持當前的數據類型，同時也能支持未來的數據類型，這在創建大型系統時為你提供了十分靈活的功能。

后續

Typescript實踐中的進階即將到來～

在看點這里

總結

以上是生活随笔為你收集整理的typescript利用接口类型声明变量_TypeScript入门指南(基础篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。