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;
}

 

命名空间：避免一堆全局变量

namespace Home {
    // 仅空间内部能调用
    class Person {
        constructor() {
            console.log('Person');
        }
    }

    // 空间内外部都能调用
    export class Student {
        constructor() {
            console.log('Student');
        }
    }
}

console.log(new Home.Student());

 

模块化：使用import时，不能直接在浏览器运行，需要引入require.js

Person.ts:

export class Person {
    constructor() {
        console.log('person');
    }
}

Student.ts

import {Person} from './2'
class Student {
    constructor() {
        console.log('student');
        new Person();
    }
}

console.log(new Student());