TypeScript基礎練習

// 一、原始數據類型
var str1: string = '我是小明';

var num1: number = 1;
var nan: number = NaN;

var bool1: boolean = true;

// undefined和null是所有類型的子類型
// 所以undefined和null類型的變量，可以賦值給其他類型的變量
var u: undefined = undefined; 
var n: null = null; 

var num2: number = u;
var num3: number = n;


// 二、空值 (void)
var v : void = undefined;
// function fun1(): void {
//     console.log(121)
// }

// 三、任意值 (any)
// 變量若未定義類型，則類型爲任意值
var a2: any = 1;
a2 = 'ssd';

// 四、對象類型--接口
interface Obj {
    name: string,
    age: number
}
var objh: Obj = {
    name:'小紅',
    age: 12
}
// 可選屬性
interface Obj1 {
    name: string,
    age?: number
}
var obj1: Obj1 = {
    name:'kdd'
}
// 任意屬性
interface Obj2 {
    name: string,
    age?: number,
    [propsName: string]: any
}
var obj2: Obj2 = {
    name: 'kdd',
    age: 23,
    work: true
}
// 只讀屬性
interface Obj3 {
    readonly name: string,
    age?: number
}
var obj3: Obj3 = {
    name: 'kdd',
    age: 23
}
// obj3.name = 'sdksld'; //報錯

// 五、數組
// 寫法一：類型+方括號
var arr1: number[] = [1,2,3];
// 寫法二：數組泛型
var arr2: Array<number> = [1, 2, 3];
// 寫法三：接口(類數組只能用這種方式)
interface Arr {
    [index: number]: number
}
var arr3: Arr = [1, 2, 3];


// 六、函數
// 寫法一：普通函數
function sum(x:number,y:number) :number {
    return x + y;
}
// 寫法二：函數表達式
var sum2:(x: number, y: number) => number = function (x: number, y: number) :number {
    return x + y;
}
// 寫法三:接口
interface Sum3 {
    (x: number, y: number):number;
}
var sum3: Sum3 = function (x: number, y: number) {
    return x+y;
}
// 可選參數：需放在最後
function sum4(x: number, y?: number): number {
    if(y) {
        return x + y;
    } else {
        return x;
    }
} 
// 參數默認值
function sum5(x: number = 2, y: number ): number {
    if (y) {
        return x + y;
    } else {
        return x;
    }
} 
sum5(undefined,1)
// 剩餘參數
function sum6(x: number,...nums:number[]): number[] {
   return nums.map((item, index) => {
        return x + item;
   })
} 
sum6(1,2,3);

// 重載
function reverse(x:number): number;
function reverse(x: string): string;
function reverse(x: string | number): string | number {
    return x;
}

// 斷言:將一個聯合類型斷言爲其中一個類型
// 寫法一: 值 as 類型
interface Cat {
    name: string,
    run: void
}
interface Fish {
    name: string,
    swim: void
}
function getName(animal:Cat|Fish):boolean {
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    } else {
        return false;
    }
}

// 寫法二:  <類型>值
function getName1(animal: Cat | Fish): boolean {
    if (typeof (<Fish>animal).swim === 'function') {
        return true;
    } else {
        return false;
    }
}

// 七、類型別名
type Name = string;
type Resolver = () => string;
type NameORResolver = Name | Resolver;
function getName2(n:NameORResolver) : NameORResolver {
    return n;
}

// 八、字符串字面量類型
type EventNames = "click" | "mousemove";
function handleEvent(event: EventNames):string {
    return event;
}
handleEvent("click")


// 九、元組：合併不同的對象
var person1: [string,number] = ['小明', 12];

var person2: [string, number];
person2[1] = 11;

// 當添加元素時，它的類型會被限制爲元組中每個類型的聯合類型：
var person3: [string, number] = ['小明', 12];
// person3[2] = 1; //報錯
person3.push('小紅');
person3.push(11);
// person3.push(true); //報錯


// 十、枚舉
// （一）普通枚舉（常數項和計算所得項）
// 1.常數項的值 默認從0開始逐一增加
enum Days { Sun, Mon, Tue };
console.log(Days["Sun"]); // 0
console.log(Days["Mon"]); // 1

// 2.定義時手動賦值某個常數項後，後面的值跟着+1
enum Days2 { Sun, Mon=5, Tue};
console.log(Days2["Tue"]); // 6

// 3.計算所得項:只能放在最後
enum Color {red,blue="blue".length}

// （二）常數枚舉(const)：在編譯階段被刪除，並且不能包含計算成員
const enum Days3 {
    Sun, Mon, Tue
}
let days = [Days3.Sun, Days3.Mon, Days3.Tue];

// （三）外部枚舉(declare)
declare enum Days4 {
    Sun, Mon, Tue    
}


// 十一、類
// 1.修飾符：public\protected\private
class Animal1 {
    protected name: string;
    private age: number;
    public work: string;
    public constructor(name, age,work) {
        this.name = name;
        this.age = age;
        this.work = work;
    }
}
var a1 = new Animal1('小紅', 12, '學生');
// console.log(a1.name) //報錯：只能在類或子類中訪問
// console.log(a1.age) //報錯：只能在類中訪問
console.log(a1.work)

// 可讀屬性:readonly
class Animal2 {
    public readonly name: string
    public constructor(name) {
        this.name = name;
    }
}
var animal2 = new Animal2('小明');
console.log(animal2.name);

// 靜態屬性:只能通過類訪問，不能通過實例訪問
class Animal3 {
    public static name1:string
}
console.log(Animal3.name1)

// 抽象類：abstract
abstract class Animal4 {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public eat() {
        console.log('eat');
    }
}
class Cat1 extends Animal4 {
    public name: string;
    public eat() {
        console.log('cat eat');
    }
}
var cat = new Cat1('mm');

// 十二、接口
// 1.類實現接口
interface Alarm {
    alert() : void
}
class Car implements Alarm {
    alert() {
        console.log('car alert')
    }
}

// 2.接口繼承接口
interface Alarm1 {
    alert(): void
}
interface Light {
    lightOn(): void;
    lightOff(): void;
}
class Car1 implements Alarm1, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

// 3.接口繼承類
class Ponit {
    x:number
}
interface Point1 extends Ponit {
    y:number
}

// 十三、泛型：在定義函數、接口或類的時候，不預先指定具體的類型，而在使用的時候再指定類型的一種特性。
function create1<T>(val: T):T{
    return val;
}