Typescript教程 - 基础部分

学习typescript

2019年6月21日11:22:22

阮一峰的书
阮一峰的typescript

安装typescript npm install -g typescript

tsc 是它一个命令 编译ts文件的
用法 tsc 文件名

基础部分

定义类型

js 类型有两种 原始数据类型boolean number String null undefined es6的Symbol 和对象类型

let isDone: boolean = false  //定义成其他数据类型时 编译报错
let myName: string = 'Tom';
let myAge: number = 25;
let u: undefined = undefined;
let n: null = null;

function noThing():void{
    console.log("just for consolelog something")
}
let unusable: void = undefined //也可以是null 

任意类型Any

let aa:string = 'aili'
aa = 7

let bb:any = '1231asdfa'
bb = false

//未来声明的变量
let cc;
cc = 'aili'
cc = 123

类型推论

没有指定类型 编译会报错 但是ts会推测出类型 any类型不被做类型检查

联合类型

let a:string | number;
// a = false
a = 'aili'
// a = 7

number类型没有length属性 报错
function getLength(something: string | number): string {
    return something.length
}
访问二者共有属性或者方法是可以的
function getLength(something: string | number): string {
    return something.toString()
}

对象的类型 -- 接口

定义对象类型 接口这部分是难点

对行为的抽象 具体如何行动由类实现 其实看了基础部分回过头再来看 就是 定义 形状 的

// 接口 定义了多少属性方法 定义变量的时候得一致 不然报错  不能多不能少
// 赋值的时候，变量的形状必须和接口的形状保持一致。
interface Person {
    name:String
    age:number
    sex:String
    hasJob:boolean
}

let aili: Person = {
    name: 'aili',
    age:25,
    sex:'male',
    hasJob:true
}

// 上述定义有点问题 如果少一个多一个就报错 有点死板 
// 可选属性
interface Person {
    name:String
    age:number
    sex?:String
    hasJob?:boolean
}

let aili: Person = {
    name: 'aili',
    age:25
}

// 任意类型
interface Person {
    [propName: string]:string | number | boolean
}

let aili: Person = {
    name: 'aili',
    age:25,
    hasJob:true
}

// 定义了三种类型 但是 定义变量的时候 给了any 这是会报错的
interface Person {
    [propName: string]:string | number | boolean
}

let aili: Person = {
    name: 'aili',
    age:25,
    hasJob:true,
    sex: any = {

    }
}

// 只读属性
interface Person {
    readonly id: number
    [propName: string]:any
}

let aili: Person = {
    id:1234,
    name: 'aili',
    age:25,
    hasJob:true,
    sex: {
        a:'male',
        b:'female',
        c:'unknown'
    }
}

数组类型

方法比较多

// 数组类型
let arr: number[] = [1,2,3,4,5]
let arr: string[] = ['1','2','3','4','5']
let arr: Array<number> = [1,2,3,4,5] //泛型
interface mineArr {
    [index: number]: string
}
let arr:mineArr = ['a','b','c','d','e']  //一下觉得好规范 严谨 慢慢感受到ts的类型检查的强大

let list:any[] = [1,'a',true,{name:'aili'}]

函数类型

函数可以看成跟数据类型一样 最灵活的
js函数式编程编程指南
这本书好像很牛皮的样子 一共10章

定义函数

• 函数声明

  function sum(x, y) {
      return x + y;
  }
  

• 函数表达式

  let mySum = function (x, y) {
      return x + y;
  };
  

// 函数类型
let mySum = function (x: number, y: number): number {
    return x + y;
};


// // 接口定义函数形状 你要对你将实现的函数 有个很明确具体的认识和实现思路 才可以把接口定义的很完美
interface Search {
    (a:string,b:string): boolean
}
let mysearch: Search;

mysearch = (a:string,b:string)=>{
    return a.search(b) !== -1
}

// 可选参数 还是跟类型定义一样 加个问号就可以了  
// 可选参数后面不允许再出现 必须 参数了
// 顺序 必选参数... 可选参数
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 = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

// 剩余参数  
// 用到了es6的rest参数 和析构
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}
let a = [];
push(a, 1, 2, 3);

声明文件

合理使用第三方库 不冲突 我是这么理解的 定义一些全局方法 属性 变量 类等
具体写法具体查

文章参考的链接
箭头函数
函数参数的默认值
Rest参考值
symbol

END