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.类型推论

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

var age = 18
age = "19" //报错 不能将其他类型的数值赋值给他
age.push(0) //报错 数字类型不能调push()

• 数组：根据当前数组元素包含的数据类型，来决定以后数组元素只能存放哪些类型的数据

var arr = [1,2,3] //此数组内的元素只能是数字类型
var arr2 = [1,2,3,'5'] //此数组内的元素 可以是数字类型或者字符串类型

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

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

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

5.强制类型声明

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

//声明字符串
var str : string = "Hello World!"
//声明数字
var num : number = 123
//声明数组
var arr : any[] = []
//声明数组 数组元素只能是数字
var arr2 : number[] = []
//声明任意类型
var x : any = ""
//声明布尔类型
var flag : boolean = true
//声明null
var y : null = null
//声明undefined
var z : undefined = undefined
//声明没有返回值的函数
function hello(): void {
    console.log("Hello Today")
}

• 多类型(联合类型)

//既可以是字符串，也可以是数字
var a : string|number = 123
//数组元素既可以是字符串也可以是数字
var a_arr : (string|number)[] = [1,'a']
//可以是字符串，也可以是纯数字数组
var a_arr_1 : string|number[] = 'hello'

6.interface 接口

• 如果要声明多个同类型的对象，可以使用 interface 创建接口，统一管理这类对象
• 通过 interface 创建对象时，字段的 数据类型必须与定义时一致，定义的字段不能遗漏，除非定义成了可选，也不能添加多余的类型，除非声明了任意属性

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

//创建基于类的对象
var kyo : 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"

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

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

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

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

7.类型别名

• 可以定义一个类型名称来代替类型声明，他的优点为：当一个类型被多次引用时，1.方便书写，2.方便统一管理

//声明类型别名(数组类型，数组元素支持字符串和数字)
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
}

8.class类

• 类与接口类似，但是通过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)

9.函数类型

• 函数类型类型指的是：返回值的类型和参数的类型
• 一般情况下，调用函数时参数不可少，除非参数已经声明时可选，或者参数有默认值

//指定返回值类型和参数类型
function sum(num1:number = 0,num2:number = 0) : number{
    return num1 + num2
}
//不传参，有默认值
console.log(sum()) //0
//传参
console.log(sum(1,2))  //3

• 可选参数：参数名称后面 + ?，调用时可以不传递该参数

function sum(num1?:number = 0,num2?:number = 0) : number{
    return num1 + num2
}

10.外部变量声明

• 当一个ts文件中要调用其他文件中定义的全局变量或者方法时，需要对其进行声明，因为它并不知道这个数据的数据类型，此时编辑器会出现错误提示，要取消这提示有几种方法：
• (1)在编辑器中打开定义了此变量的那个文件
• (2)调用前进行声明

//title为其他js文件定义的全局变量
declare var title:string
console.log(title)

• (3)专门写一个声明文件，在引入这个声明文件，适合那些封装好的库，第三方库通常已经有写好的声明文件

//a.d.ts
//这个title属性是在a.ts中定义的
declare var title:string;

//b.ts引入这个文件

//填入相对路径
/// <reference path = "../a/a.d.ts" />
console.log(title)

10.导入与导出

• 导出：导出时用法基本与ES6一致，使用export或者export default进行导出

//导出一个字符串
export var title:string = "hello world"
//导出一个方法
export function sayHello():void{
    console.log('hello')
}
//导出一个interface接口
export interface Person{
    readonly id: Number
    age: Number
    name: String
    sayHi(): void
}

var title2 :string="hello world2"
export default title2

• 错误的导出：不能用这种形式导出，我也不清楚为什么，只为记录(export后面不能跟已经定义好的变量)

var title2 :string="hello world2"
export title2

• 导入：适应import进行导入，用于与ES6一致，文件路径填的是js文件而不是ts

//导入js文件 而不是ts
import { title, sayHello,Person } from "./a.js";

//根据Person接口创建对象
var kyo : Person = {
    id:1,
    age:20,
    name:"kyo",
    sayHi:function():void{
        console.log('Hi')
    }
}
console.log(title) //hello world
sayHello() //hello
kyo.sayHi() //Hi

11.个人总结

• 尽可能的使用ts自带的类型推论，可以加快开发效率
• TS的代码提示功能更加强大，能智能提示函数参数的类型
• 在一些后台框架的系统中，开发环境的代码与生产环境的代码是是同一套，本身没有编译的过程，这种环境不适合 TypeScript ，除非你每次都传两份代码，ts用于源码管理，js用于运行
• 在前后端分离的脚手架项目中，开发环境使用ts代码，生产环境使用编译后的js代码，这种环境给 TypeScript 提供了可能，但是据目前的项目经验来看，需要对源码进行编译的项目基本上都是基于node的脚手架项目