TypeScript学习笔记

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');

个人小结

个人感觉ts和js基本区别不大，过了一遍目前认识到的就是ts的类型检测以及增加了元祖、枚举等数据类型，以及接口的印象比较深一些（接口部分还需深入了解，笔记还需要完善），至于有些比如类、模块、箭头函数等都与ES6基本一致，刚好现在整理学习笔记，后续过ES6的时候巩固一下。

现在技术更新迭代很快，只有不断学习提升自身能力才不会落后。工作以来自己掌握的技术很杂乱也算不得精通，学习也是想到什么学什么。体系化学习的重要性不言而喻，平时工作学习还是要多思考，善于总结记录。

现在开始体系化地重新学习整理巩固前端知识，在这边作个记录以便随时回顾，2021冲。

书山有路勤为径，学海无涯苦作舟。为了更美好的明天而学习。

最后简单附一张网上找的前端学习阶段图，激励下自己吧。


前端阶段学习.PNG
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,088评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,715评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,361评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,099评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,987评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,063评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,486评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,175评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,440评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,190评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,550评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2赞 335