typescript 入門介紹

開始階段 推薦使用 線上[Playground]https://www.typescriptlang.org/play

基礎數據類型

1. 布爾值

let isDone:boolean = false
let hasDone: boolean = Boolean(1)

2. 數值型

let age: number = 23

3. 字符串

let name: string = 'zhansan'

4. null 和 undefined

let u: null = null
let un: undefined = undefined

默認情況下，unll 和 undefined 是所有類的子類， 也就是他可以賦值給其他的類型
例如

let num: number = undefined

如果在 tsconfig 中指定了 strictNullCheck 標記，null 和 undefined 只能賦值給 void 和各自的類型
5. any 類型
any 類型可以被賦值為任何類型的值，
可以訪問任何屬性
申明變量的時候沒有指定類型，會給一個 any 類型
6. unknown
unknown 是 any 類型對應的安全類型
所有類型也都可以賦值給 unknown 類型
unknown只能賦值給 any 類型和 unknown 類型本身

在使用unknown 的時候， 我們需要 對他進行 type guard

function foo (x: unknown) {
  if (typeof x == 'string') {
    .....
  }
  if (typeof x == 'number') {
    .....
  }
}

7. void 表示沒有任何類型
   通常用在 方法中 表示沒有返回值

function alertName (): void {
  alert('name')
}

8. never 表示的是永不存在的類型
   比如 拋出錯誤， 后面就不會執行了

function error (message: string): never {
  throw new Error(message)
}

9. 數組
   定義的寫法

let array: number[] = [1,2,3,4,5]
let array1: Array<number> = [1,2,3,4,5]

10. 元組 和數組相比
    它的長度是有限的，
    各個位置上類型是確定的，而且可以不同

let tom: [string, number] = ['tom', 25]

對類型和長度都有限定

11. 枚舉
    取值限定在一定范圍內的類型

enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST
}
let dir: Direction = Direction.WEST

默認情況下初始值是 0 ,其余的會自增長 加 1
也可以指定枚舉值

enum Direction {
  NORTH = 'NORTH',
  SOUTH = 'SOUTH',
  EAST = 'EAST',
  WEST = 'WEST'
}

12. 接口類型 interface 比較重要的一個類型
    定義一個對象的內容格式

interface Person {
  name: string,
  age: number
}
let zhansan: Person = {
  name: 'zhansan',
  age: 34
}

定義的變量屬性 不能多余或者少于 interface 定義的 個數

let zhansan: Person = {
  name: 'zhansan',
  age: 34,
  gender: 'male'
}

多了一個 gender 屬性， 但是在 Person 類中沒有定義， 會報錯
定義類的時候，可以使用 添加 ？ 來定義 一個屬性 可以出現， 也可以不出現

interface Person {
  name: string,
  age?: number
}

上面定義的 age 屬性 添加 ? 后, 在這個類中 age 屬性 可以出現， 也可以不出現， 出現的時候 名字一定還是 age
只讀屬性
在屬性的前面 添加 readonly

interface Person {
  readonly id: number,
  name: string,
  age?: number
}

13. 函數

• 定義函數參數和返回值類型

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

定義了一個函數， 有兩個參數，類型都是 number , 返回值是 number

• 函數的參數中 定義可選參數 使用? 定義在必選參數的后面

function add(x: number, y?: number): number {
  if (y) {
    return x + y
  } else {
    return x
  }
}

• 剩余參數

function push (array: number[], ...items: number[]) {
  items.forEach(function (item) {
    array.push(item)
  })
}
let a = []
push(a, 1,2,3,4)

• 函數表達式

let idGenerator: (charts: string, number: number) => string
function createUserId (name: string, id: number): string {
  return name + id
}

IdGenerator = createUserId
// 等效于 
let idGenerator: (charts: string, number: number) => string = (name: string, id: number): string {
  return name + id
}

• 函數重載 允許函數接受不同數量或者類型的參數，做出不同的處理

function add (a: number, b: number): number
function add (a: string, b: string): string
function add (a: string, b: number): string
function add (a: number, b: string): string
function add (a: string | number, b: string | number) {
  if (typeof a == 'string' || typeof b == 'string') {
    return a.toString() + b.toString()
  }
  return a + b
}

14. 類

• 靜態屬性，靜態方法 static
  靜態屬性和方法是存在 類上面的， 不是在實例上的。

class Animal {
  readonly name;
  public constructor (name) {
    this.name = name
  }
  static isAnimal (a) {
    return a.instanceof Animal
  }
}
let a = new Animal('tom')
Animal.isAnimal(a) // true
a.isAnimal(a) // error

• public 定義的公共方法屬性
• private 定義的屬性，只能在類中調用和訪問，子類中也不能訪問
• protected 相對寬松些， 在子類中能夠調用

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

• readonly 是一個定義屬性 為只讀， 不能修改
• 抽象類 abstract
  抽象類不能被實例化
  抽象類中的抽象方法，在必須在子類中實現

abstract class Animal {
  public name;
  public abstract sayHi()
}
class Cat extends Animal {
  public sayHi() {
    console.log('99' + this.name)
  }
}

下一篇將繼續介紹 進階類型

下面是我的小程序體驗碼，希望能和大家共同學習進步