Typescript 学习笔记1

//声明变量类型
let isTrue:boolean=false 
let num:number =1 
let str:string ='zard'
let myStr:string=`hello world ,my name is ${str},age is ${num+10}` 

let a:null= null    //尚未存在的对象
let b:undefined=undefined    //声明的变量还未被初始化
let num1:number = undefined;  //undefined 和 null 是所有类型的子类型

//用void表示没有返回值的函数
function xxx() :void{
    //
}

//任意值类型
let myAny:any='any'
myAny=4

//联合类型
let myStrNum:string|number;
function getLength(something:string|number):number{
    return something.length //length 不是 string 和 number 的共有属性，所以会报错
}
function getString(something: string | number): string {
    return something.toString();
}



//接口
interface IPerson{
    name:string
    age:number
}
//赋值的时候，变量的形状必须和接口的形状保持一致
let zard:IPerson={
    name:'zard',
    age:23
} 

interface IPerson2 {
    readonly name: string;  //只读属性
    age?: number;   //可选属性
    [propName: string]: any;    //任意属性
    //一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
}
let tom: IPerson2 = {
    name: 'Tom',
    gender: 'male'
};




//定义数组类型
let arr:number[]=[1,2,3]

//数组泛型
let fiArr:Array<number> =[1,2,3,4,5]

//用接口表示数组
interface NumberArray{
    [index:number]:number //只要索引的类型是数字时，那么值的类型必须是数字
}
let fiArr1:NumberArray=[1,2,3,4,5]




//函数声明
function sum(x, y) {
    return x + y;
}
function sum(x: number, y: number): number {
    return x + y;
}

//函数表达式
//TS中 => 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型
let mySum = function (x, y) {
    return x + y;
};
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};


//用？表示可选参数
//可选参数后面不允许再出现必需参数
function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

//参数默认值
function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');
let cat = buildName(undefined, 'Cat'); //此时就不受「可选参数必须接在必需参数后面」的限制了



//重载 一个函数接受不同数量或类型的参数时，作出不同的处理
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('');
    }
}
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('');
    }
}

//类型断言   <类型>值 / 值 as 类型
function getLength(something: string | number): number {
    return something.length;  //error
}
// 使用类型断言
// 断言成一个联合类型中不存在的类型是不允许的
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}


//声明文件
// declare var 声明全局变量
// declare function 声明全局方法
// declare class 声明全局类
// declare enum 声明全局枚举类型
// declare namespace 声明（含有子属性的）全局对象
// interface 和 type 声明全局类型
// export 导出变量
// export namespace 导出（含有子属性的）对象
// export default ES6 默认导出
// export = commonjs 导出模块
// export as namespace UMD 库声明全局变量
// declare global 扩展全局变量
// declare module 扩展模块
/// <reference /> 三斜线指令



//declare const使用全局变量
declare const jQuery:(selector:string)=>any;
jQuery('foo')

//声明文件
//通常把声明语句放在单独的文件中 xxx.d.ts  声明文件必需以 .d.ts 为后缀。
// src/jQuery.d.ts 
declare const jQuery: (selector: string) => any;
// src/index.ts
jQuery('#foo');


//export
// types/foo/index.d.ts
export const name: string;
export function getName(): string;
export class Animal {
    constructor(name: string);
    sayHi(): string;
}
export enum Directions {
    Up,
    Down,
    Left,
    Right
}
export interface Options {
    data: any;
}
//也可以使用 declare 先声明多个变量，最后再用 export 一次性导出
declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
interface Options {  //interface 前不需要 declare
    data: any;
}
export { name, getName, Animal, Directions, Options };
//对应的导入和使用
// src/index.ts
import { name, getName, Animal, Directions, Options } from 'foo';

console.log(name);
let myName = getName();
let cat = new Animal('Tom');
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let options: Options = {
    data: {
        name: 'foo'
    }
};


//export namespace 用来导出一个拥有子属性的对象
// types/foo/index.d.ts
export namespace foo {
    const name: string;
    namespace bar {
        function baz(): string;
    }
}
// src/index.ts
import { foo } from 'foo';
console.log(foo.name);
foo.bar.baz();


//export default
//只有 function、class 和 interface 可以直接默认导出
export default function foo(): string;
import foo from 'foo';
foo();


//es内置对象
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
//DOM 和 BOM 的内置对象
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});


//Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件
//npm install @types/node --save-dev