Typescript学习笔记：快速入门Typescript

Typescript

Javascript 的扩展，将Javascript变成关注类型语言

• 为什么要使用它？
  • 程序更容易理解
  • 效率更高
  • 更少的错误
• 不足
  • 增加了一些学习成本
  • 短期内的开发成本增加

安装和简单的使用

npm install -g typescript // 安装typescript

tsc -v // 查看版本号

tsc ts结尾的文件名称 // 运行ts文件

数据类型

• 原始数据类型

: boolean
: number
: string

// 所有类型的子类型
: undefined
: null

// 允许赋值为任意类型
: any

• 数组

: number[] // 原始类型[]
let arr : number[] = [1,123,3]

• 元组

: [string, number,....] // [原始数据类型1, 原始数据类型2,....]
let user :[string, number, boolean] = ['stirng',123,true]

元组的本质还是一个数组，可以使用数组相关的函数方法

• interface概念（对象）

对对象的形状进行描述

interface Person{
    readonly id : number; // 只读属性，一旦赋值则无法修改
	name : string;
	age ?: number; // 可选，赋值的时候可以跳过
}

let ming : Person = {
	id : 1;
    name : ming;
    age :20; // 可以跳过该属性
}

对类的结构进行抽象

interface eatSomething {
    eat(something: string): void;
}

interface washHand {
    washHand(something: string): void;
}

class person implements eatSomething,washHand{
    washHand(something: string): void {
        console.log('person ${something} washHand');
    }
    eat(something: string){
        console.log('person ${something} is eating');
    }
}

class monkey implements eatSomething{
    eat(something: string){
        console.log('monkey ${something} is eating');
    }
}

• Function函数

// 可选参数
function add(x: number, y: number, z?:number): number{
    return x + y;
}
let result = add (2,3)
// es6 语法
const add = (x: number, y: number, z?:number): number =>{
    return x + y;
}
// 函数返回值接收
let add2: (x: number, y: number, z?:number) => number = add

// 声明函数类型
interface ISum {
    (x: number, y: number, z?:number): number
}

• union types 联合类型

let numOrStr : number | string

• 类型断言

//类型断言
function getLength(input: string | number): number{
    const str = input  as string;
    if(str.length){
        return str.length;
    }else{
        const str = input as number;
        return str.toString().length;
    }
}

// type guard
function getLength2(input: string | number): number{
    if(typeof input === 'string'){
        return input.length;
    }else{
        return input.toString().length;
    }
}

• Class 类

// 跟Java类相差不大,支持继承，多态
// 类的权限控制：
//	public 
//	private
//	protectd
// 类的属性权限控制：
//	readonly 修饰属性名称 // 与Interface类似

• Enums 枚举

// 普通枚举
enums Direction{
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right',
}
// 常量枚举
const enums Direction{
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right',
}

// 字符串字面量
 const str: 'yes' = 'yes'
 const num: 1 = 1
 type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Up'