TypeScript - 使用筆記 (2)

1. Array

  • 在前面寫基本類型 + [ ]，表示陣列內的值都會是這個類型
const arrString : string[] = ['hello','world']const arrBoolean : boolean[] = [true, false, true]const arrNumber : number[] = [1, 2, 3, 4]// 宣告空陣列const names: string[] = [];names.push('data1')names.push(1) // error: Argument of type 'number' is not assignable to parameter of type 'string'
  • 使用陣列泛型（Array Generic） Array<elemType> 來表示陣列
// 宣告陣列內的值都是number型別const arrNumber2 : Array<number>

2. Tuple

  • Tuple通常是指一個資料結構，可儲存多個不同型別項目
  • 所指定的型別跟給予的資料型別與個數必須相等
  • 當陣列長度不變時可以使用
// example1const tuple : [ boolean , number , string ] = [ true , 10 , "ABC" ] ;// example2const tup : [string, number, boolean] = ['Fin', 77, false]tup[0] = 'Bill'tup[1] = 44tup[3] = 123 // error Tuple type '[string, number, boolean]' of length '3' has no element at index '3'. // example3let student: [string, number]student = ['Ken', 99]
  • with spread operator
  • 必須先用tuple宣告陣列內哪個東西是哪個類型
let values: [string, string, number];  values = [tofrom.value, details.value, amount.valueAsNumber];  if (type.value === 'invoice') {    doc = new Invoice(...values);  } else {    doc = new Payment(...values);  }

3. Object

  • 在{ } 內指定物件中可以包含哪些屬性
let songList: objectsongList = {type:'JPOP', num: 88 }let movies: {    name: string,    year: number,    type: string}
  • 無法新增一開始沒有宣告的屬性
let ninja = {    name: 'mario',    hat: 'red',    age:30}ninja.skills = ['flying', 'jumping'] // error
  • 在屬性名稱加上? 表示可選屬性
let dog: {name:string, color?:string}dog = {name: 'dodge'} // ok
  • 可以擴充任意類型的值
let a: {name:string, [propName: string]: any}a = {name:'Ben', age: 28, gender: 'secret' }

4. Function

  • 可以定義參數的類型
  • 可以定義回傳值的類型
  • 參數如果要放?或是預設值（可選），要放在最後面
let greet: Functiongreet = 'hello' //errorgreet = () => {    console.log('hello')}
const add = (a:number, b:number, c: number | string = 10) => {    console.log(a + b)} add(5, 10)const minus = (a: number, b: number) => {    return a - b}// 會自動鎖定型別成數字let result = minus(10,7)result = 'str' // error
  • 規定回傳值的型別，可以在()後加上:
const nothingHere = ():void => {    console.log('沒有回傳值')}
const add(a:number, b:number):number {    return a + b}
// example 1let greet: (a: string, b: string) => void;greet = (name: string, greeting:string) => {    console.log(`${name} says ${greeting}`)}
// example 2let calc: (a: number, b: number, c: string) => numbercalc = (numOne:number, numTwo: number, action: string) => {    if(action === 'add'){        return numOne + numTwo    }else {        return numOne - numTwo    }}
// example 3let logDetails: (obj: {name: string, age: number}) => voidtype person = {name: string, age: number}logDetails = (ninja: person) => {    console.log(`${ninja.name} is ${ninja.age} years old`)}const myNinja: person = {name: "John", age: 25};logDetails(myNinja);

void

  • 表示函式沒有回傳值
function myFn():void {    return}

函式作為參數時

  • callback函式接受一個string參數，沒有回傳值
function request(callback: (result: string) => void){    callback('success')}request((result) => console.log(result))// 使用type 簡化type RequestCallback = (result: string) => void;function request(callback: RequestCallback){    callback('success')}

5. Enums

  • 用來新增同系列的常數（不可修改的變數）
  • 在多個固定值之間選擇時使用
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
enum Gender {    Male,    Female}let i : {name: string, gender: Gender}i = {    name: 'Andy',    gender: Gender.Male}

列舉數字

  • 可以自行手動賦值，未手動賦值的列舉項會接著上一個列舉項遞增
enum CardinalDirections {  North = 1,  East,  South,  West}// logs 1console.log(CardinalDirections.North);// logs 4console.log(CardinalDirections.West);
  • 可以自行指定特定數字
enum StatusCodes {  NotFound = 404,  Success = 200,  Accepted = 202,  BadRequest = 400}// logs 404console.log(StatusCodes.NotFound);// logs 200console.log(StatusCodes.Success);

列舉字串

enum CardinalDirections {  North = 'North',  East = "East",  South = "South",  West = "West"};// logs "North"console.log(CardinalDirections.North);// logs "West"console.log(CardinalDirections.West);
  • 在ResourceType加入enum
enum ResourceType {  BOOK,  AUTHOR,  FILM,  DIRECTOR,  PERSON,}interface Resource<T> {  uid: number;  resourceName: ResourceType;  data: T;}const docTwo: Resource<object> = {  uid: 0,  resourceName: ResourceType.BOOK,  data: { name: 'Hear the Wind Sing' },};const docThree: Resource<object> = {  uid: 1,  resourceName: ResourceType.PERSON,  data: { name: 'Yong' },};

常數列舉

  • 使用 const enum 定義的列舉型別
  • 會在編譯過程中被完全擦除，並且會將所有使用到 const enum 成員的地方用其實際值替代

example1:

//比直接使用0和1更好理解const enum DIRECTION {  UP,  DOWN}const direction = ref<DIRECTION>()direction.value = DIRECTION.UP// 編譯後var direction = 0;

example2:

const enum Directions {    Up,    Down,    Left,    Right}let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];//編譯後var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];
# TypeScript