TypeScript的认识
- 是JavaScript的超集，是加强版的JavaScript，可以编译成JavaScript代码
- 新增类型约束，包含一些语法的扩展（枚举类型、元祖类型等）
数据类型
变量声明赋值基本写法：let/const a: 数据类型 = 值；
注意：
(1) 这边的数据类型都为小写
(2) 变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名。可将ts文件作为模块导出解决
1.1 js数据类型
- number / string / boolean / undefined / null
const num: number = 3; //数字
const str: string = "abc" ; //字符串
const bool: boolean = true; //布尔类型
const und: undefined = undefined;
const nul: null = null;
- 数组array（两种方式）
const arr1: number[] = [1,2,3];
const arr2: Array<number> = [1,2,3]
const arr3: any[] = [1, "abc",true] //any为任意数据类型
- 对象object
const obj: object = {
name:"aaa",
title:"bbb"
}
注意:
object类型这样写，属性是不可以访问的，obj.name会报错
解决方法详见采坑记录（一）
- symbol类型(ES6)
let s1 = Symbol(); //可为空
let s2 = Symbol('aaa');
let s3 = Symbol('bbb');
let student = {
age: 18,
name: 'Jack'
}
student[s1] = 'mingming';
console.log(typeof s1) // => symbol
console.log(s1 === s2) // => false
console.log(s2 === s3) // => false
1.2 TypeScript新增数据类型
- enum枚举类型
enum test {
a,
b = 5,
c ,
d = "测试",
//e //报错 ，如果未赋值的上一个值的值是非数字,那么必须赋值
}
const n0: test = test.a
const n1: test = test.b
const n2: test = test.c
const n3: test = test.d
console.log(n0,n1,n2,n3) //输出为: 0 5 6 "测试"
console.log(test[5]) //输出为: b
注意：
(1) 如果未赋值的上一个值是数字那么这个未赋值的值的是上一个值的值+1；
(2) 如果未赋值的上一个值未赋值那么输出的就是它的下标；
(3) 如果未赋值的上一个值的值是非数字,那么必须赋值；
(4) 我们可以通过对应的值去获取对应的数据名称,如果存在相同值，取最后一个数据名称。
-
tuple元祖类型
可以定义每个元素的数据类型；
和数组类似，数组通常为相同类型的数据。
const person: [string, number, number] = ["mingming", 18, 1.88];
const p1 = person[0];
const p2 = person[1];
-
void类型
方法/函数类型，表示没有返回值return
function fun(): void {
console.log(1);
}
-
never类型
never 是其它类型（包括 null 和 undefined）的子类型，表示一种从来不会存在的值的类型 -
any任意类型
参数可以是任何一种类型
let a: any = "string";
a = true;
a = 1;
函数function
- 函数定义
function function_name():return_type {
// 语句
return value;
}
//return_type是返回值的类型
- 带参数函数
function getUserInfo(name: string, age?: number, height: number = 180) {
return `name:${name}--age:${age}--height:${height}`;
}
//？代表这个参数为可选参数，可传可不传，不传则为undefined
//默认参数，如果没有传值，则使用默认参数
//剩余参数，不知道传入参数的个数
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
-
函数重载
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
注意：
(1) 如果参数类型不同，则参数类型应设置为 any。
(2) 参数数量不同你可以将不同的参数设置为可选参数。
function disp(s1:string):void;
function disp(n1:number,s1:string):void;
function disp(x:any,y?:any):void {
console.log(x);
console.log(y);
}
disp("abc")
disp(1,"xyz");
接口interface
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。
-
接口定义
typescript接口定义如下：
interface interface_name {
}
//接口最好以大写的I开头
interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string,
age?: number; //可选参数
readonly hobby: string; //属性前面加readonly为只读属性，不可修改
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
console.log(customer.firstName)
console.log(customer.lastName)
console.log(customer.sayHi())
- 接口继承
和类相似，继承使用extends关键字
interface IBarkable {
barking(): void;
}
interface IShakable {
shaking(): void;
}
//可以同时继承多个接口，以逗号分隔
interface IPetable extends IBarkable, IShakable {
eating(): void;
}
实现接口使用implements关键字
class Dog implements Petable {
barking(): void {
console.log("汪汪叫");
}
shaking(): void {
console.log("摇尾巴");
}
eating(): void {
console.log("吃骨头");
}
}
模块
模块是在其自身的作用域里执行，并不是在全局作用域，所以外部无法访问模块内定义的变量、函数等，可以使用export导出模块、import导入模块。（参考es6语法）
命名空间
命名空间一个最明确的目的就是解决重名问题，作用类似于模块。使用namespace来定义。
namespace SomeNameSpaceName {
export interface ISomeInterfaceName { } //使用export导出里面的类或接口
export class SomeClassName { }
}
//如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：
/// <reference path = "SomeFileName.ts" />
//命名空间可以嵌套
namespace Runoob {
export namespace invoiceApp {
export class Invoice {
public calculateDiscount(price: number) {
return price * .40;
}
}
}
}
//使用.来访问内部成员
var invoice = new Runoob.invoiceApp.Invoice();
TypeScript 声明文件
TypeScript 引用第三方js库：
- 直接引用，但是无法使用typescript的特性功能；
- 可以将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件。
- 使用declare来定义类型
declare var jQuery: (selector: string) => any;
jQuery('#foo');
- 声明文件以
.d.ts为后缀 - 完整声明文件示例参考https://www.runoob.com/typescript/ts-ambient.html
个人小结
个人感觉ts和js基本区别不大，过了一遍目前认识到的就是ts的类型检测以及增加了元祖、枚举等数据类型，以及接口的印象比较深一些（接口部分还需深入了解，笔记还需要完善），至于有些比如类、模块、箭头函数等都与ES6基本一致，刚好现在整理学习笔记，后续过ES6的时候巩固一下。
现在技术更新迭代很快，只有不断学习提升自身能力才不会落后。工作以来自己掌握的技术很杂乱也算不得精通，学习也是想到什么学什么。体系化学习的重要性不言而喻，平时工作学习还是要多思考，善于总结记录。
现在开始体系化地重新学习整理巩固前端知识，在这边作个记录以便随时回顾，2021冲。
书山有路勤为径，学海无涯苦作舟。为了更美好的明天而学习。
最后简单附一张网上找的前端学习阶段图，激励下自己吧。
