TypeScript 笔记（一）

1. TypeScript 的介绍

• 完整教程TypeScript 入门教程
• TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准，由微软开发的自由和开源的编程语言
• 通俗的说，TypeScript 在 JavaScript 的基础上添加了类型支持，可以在代码编写阶段就发现代码的错误
• 浏览器本身不支持直接运行 TypeScript 代码，需要将其编译成 JavaScript 代码
• TypeScript 代码的语法更为严格，因此会引申出一系列相关语法（全局变量声明，可选）
• 在编译的 TypeScript 代码过程中，会展示错误信息会并移除 TypeScript 的相关代码，只保留原始的js代码
• 总的来说，TypeScript 可以帮助程序员在代码编写的阶段提早发现其代码错误，但是 TypeScript 本身需要一系列的声明才能正常工作，这些声明的语法也带来了一定的学习成本

2.编译 TypeScript 的工具包（VScode）

• 全局安装将ts代码编译成js代码的工具包

npm install -g typescript

• 输出版本号，查看是否安装成功

tsc -v

• 执行编译：tsc ts文件路径,之后会在当前目录下生产同名的js文件

tsc demo01.ts

3.node环境中直接运行ts文件

• 插件安装

cnpm i -g ts-node

• 运行命令

ts-node demo01.ts

4.类型声明

• 语法：var [变量名] : [类型] = 值
• 基本类型

//声明字符串
var str : string = "Hello World!"
//声明数字
var num : number = 123
//声明任意类型
var x : any = ""
//声明布尔类型
var flag : boolean = true
//声明null
var y : null = null
//声明undefined
var z : undefined = undefined
//函数类型包含2个部分，返回值类型和参数类型
function hello(): void {
    console.log("Hello Today")
}

• 数组：除了声明当前数据类型是数组类型，还需要声明数组元素的类型

//声明数组 数组元素的数据类型不限制
var arr : any[] = []
//声明数组 数组元素只能是数字
var arr2 : number[] = []

• 对象：所有属性必须初始化时定义好，不能后期追加，属性值的类型后期也不能改

var p1 = {
    id: 1,
    name: "张三",
    age: 20
}

//报错 不能修改数据类型
p1.id = '2'
//报错 不能新增属性
p1.hobby = 666

• 类型推论：当初始化一个变量时，ts会根据右边的值来自动设定其数据类型，一旦确定了变量的数据类型，就不能将其他类型的数值赋值给他，也不能调其他类型的方法

var str : string = "Hello World!"
//等价于
var str = "Hello World!"

5.多类型与类型别名

• 一个数据声明时允许有2种以上的数据类型

//既可以是字符串，也可以是数字
var width : string|number = '100px'
//数组元素既可以是字符串也可以是数字
var arr : (string|number)[] = [1,'a']
//可以是字符串，也可以是数组
var data : string|any[] = 'hello'

• 类型别名:定义一个类型名称来代替类型声明，一来可以被多处引用，而来直观简练，也方便统一管理

//类型别名(多类型)
type Arr_S_N = (string|number)[]
//以下写法是等价的
var arr3 : (string|number)[] = [1,'a']
var arr4 : Arr_S_N = [1,'a']

//类型别名（对象类型）
type Person = {
    name:string
    age:number
}

var p1:Person = {
    name:"kyo",
    age: 20
}

6.interface 接口

• 可以使用 interface 接口来规范一个对象类型的数据，除了定义属性值的类型，还能定义属性是否可读，是否可选
• 注意：不得中途添加属性，已经定义的属性必须要有初始值，除非属性定义成可选

//定义一个类
interface Person {
    //只读属性
    readonly id: number
    name: string
    age: number
    sayHi: ()=>void
    sayHello(word:string): void
    friend?:string
    //定义任意属性
    [propName: string]: any;
}

//创建基于类的对象
var boy : Person = {
    id: 1,
    age: 20,
    name: "kyo",
    sayHi:function(){
        console.log('Hi')
    },
    sayHello:function(word = 'hello'){
        console.log(word)
    },
}

//添加任意属性
boy.hobby = "pc game"
boy.hobby2 = "pc game2"

//报错（id属性只读）
boy.id = 2

• 接口继承：通过extends让子类继承父类所有属性

//创建一个父类
interface Person {
    name:string
    age:number
}

//创建基于父类的子类
interface Student extends Person{
    school:string
}

//创建一个学生
var s1 = {
    name:"张三",
    age: 20,
    school:"unname"
}

7.class类

• 相当于js构造函数的语法糖，使用new来创建对象

class Person {
    name: string
    age: number
    //构造函数
    constructor(name:string='',age:number=0){
        //接收并赋值
        this.name = name
        this.age = age
    }
    sayHello():void{
        console.log(`i am ${this.name} Hello`)
    }
}

var p1 = new Person('kyo',20)