前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TypeScript 学习笔记(一)

TypeScript 学习笔记(一)

作者头像
前端老鸟
发布2020-05-18 16:50:27
2.7K0
发布2020-05-18 16:50:27
举报
文章被收录于专栏:front-end technology

前言

TypeScript 是 JavaScript 的一个超集,主要提供了 类型系统 和对 ES6 的支持,由 Microsoft 开发。 目前应用:vue3.0,angular2.0,vscode, react ....

  • 编译型语言:编译为 js 后运行,单独无法运行;
  • 强类型语言;
  • 面向对象的语言;

优势

  • 类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用;
  • 可以在编译阶段就发现大部分错误,这总比在运行时候出错好;
  • 增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等;

总结:TypeSctipt增加了代码的可读性和可维护性。

安装

需要有node环境,通过npm安装

代码语言:javascript
复制
npm install -g typescript

编码

使用 .ts 文件扩展名, 使用 typescript 编写使用 React 时,使用 .tsx 扩展名。使用 : 指定变量的类型,: 的前后有没有空格都可以;

代码语言:javascript
复制
function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

编译

使用tsc 命令可编译 .ts 文件, 生成一个同名 .js 文件;编译的时候即使报错了,还是会生成编译结果(.js),可通过 tsconfig.json 文件配置

代码语言:javascript
复制
tsc demo.ts

基础类型

  • 布尔值
代码语言:javascript
复制
let isDone: boolean = false;

注意,使用构造函数 Boolean 创造的对象不是布尔值

代码语言:javascript
复制
let newBool: boolean = new Boolean(true);
// 编译报错: 不能将类型“Boolean”分配给类型“boolean”。“boolean”是基元,但“Boolean”是包装器对象。如可能首选使用“boolean”。ts(2322)

  • 数字 number
代码语言:javascript
复制
let number: number = 6;
let notANumber: number = NaN;
  • 字符串 string
代码语言:javascript
复制
let  string: string = 'Tom';
let sentence: string = `my name is ${aString}`;
  • 空值 void

void 类型的变量只能赋值为 undefined 和 null

代码语言:javascript
复制
let unusable: void = undefined;

可以用 void 表示没有任何返回值的函数

代码语言:javascript
复制
function alertName(): void {
  alert('My name is Tom');
}

  • null 和 undefined

undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null

代码语言:javascript
复制
let u: undefined = undefined;
let n: null = null;

与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:

代码语言:javascript
复制
let u: undefined;
let num: number = u;
let num2:number = undefined;
// 编译合法 undefined是number的子类型

let unm2: void;
let num3: number = unm2;
// => 不合法 (void不是number的子类型)

  • 任意值 any
代码语言:javascript
复制

let anyType:any = 'seven';
anyType = 7;

在任意值上访问任何属性和方法都是允许的,即不做类型检查

代码语言:javascript
复制
let anyType:any = 'seven';
console.log(anyType.name().age) 
// => 允许编译,但是js执行会报错

变量如果在声明的时候,未指定其类型, 也没有赋值, 那么它会被推断(类型推论)为任意值类型而完全不被类型检查

代码语言:javascript
复制
let something; 
// 等价于 let something: any;
something = 'seven';
something = 7;

  • 数组

可理解为相同类型的一组数据,数组类型有多种定义方式

1,类型 + 方括号( type [ ] )

这种方式定义的数组项中不允许出现其他的类型

代码语言:javascript
复制

let list: number[] = [1, 2, 3];

2,数组泛型 Array < type >

代码语言:javascript
复制
let list: Array<number> = [1, 2, 3];

  • 元祖 Tuple

元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同,简单理解为可定义一组不同类型的数据:

代码语言:javascript
复制
let arr:[string, number] = ['name', 20];
console.log(arr[0]); 
// => 'name' 

越界元素:当访问超出元祖长度的元素时,它的类型会被限制为元祖中每个类型的联合类型

代码语言:javascript
复制
let arr:[string, number] = ['name', 20];
arr[0] = 'age';
arr[2] = 'string';
arr[3] = 40;
arr[4] = true; // 编译报错

  • 枚举 enum

枚举类型用于取值被限定在一定范围内的场景,如一周只有7天,一年只有4季等。

  • 枚举初始化

枚举初始化可以理解为给枚举成员赋值。每个枚举成员都需要带有一个值,在未赋值的情况下, 枚举成员会被赋值为从 0 开始, 步长为 1 递增的数字:

代码语言:javascript
复制
enum Weeks {Mon, Tue, Wed, Thu, Fri, Sat, Sun};

console.log(Weeks['Mon']); // => 0
console.log(Weeks[0]); // => 'Mon'
console.log(Weeks.Tue); // => 1

手动赋值时, 未赋值的枚举成员会接着上一个枚举项递增(初始化):

代码语言:javascript
复制
enum Weeks {
    Mon, Tue, Wed, Thu = 2, Fri, Sat = -1.5, Sun
};

console.log(Weeks['Mon']); // => 0
console.log(Weeks.Wed); // => 2
console.log(Weeks.Thu); // => 2
console.log(Weeks.Fri); // => 3
console.log(Weeks.Sun); // => -0.5

上例中,未手动赋值的 Wed 和手动赋值的 Thu 取值重复了,但是 TypeScript 并不会报错,该种情况可能会引起取值错误,所以使用的时候最好避免出现取值重复的情况。

TypeScript 支持 数字 的和基于字符串的枚举。

  • 数字枚举
代码语言:javascript
复制
enum Weeks {
    Sun, Mon, Tue, Wed, Thu, Fri, Sat
};

  • 字符串枚举
代码语言:javascript
复制
enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

  • 异构枚举(Heterogeneous enums)
代码语言:javascript
复制
enum Gender {
    Male = 0,
    Female = "1",
}

  • never
代码语言:javascript
复制
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

  • symbol

自ECMAScript 2015起,symbol成为了一种新的原生类型,就像 number 和 string 一样。

symbol类型的值是通过Symbol构造函数创建的。

代码语言:javascript
复制
let sym1 = Symbol();

Symbols是不可改变且唯一的。

代码语言:javascript
复制
let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3; // false, symbols是唯一的

  • object

object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。

代码语言:javascript
复制
function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

  • 内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。

  • ECMAScript 的内置对象

Boolean、Error、Date、RegExp 等。更多的内置对象,可以查看 MDN 的文档。

代码语言:javascript
复制
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

  • DOM 和 BOM 的内置对象
代码语言:javascript
复制
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

  • 类型推论

变量申明如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型

代码语言:javascript
复制
let string = 'seven';
// 等价于 let string: string = 'seven';
string = 4;
// 编译报错: error TS2322: Type 'number' is not assignable to type 'string'

变量声明但是未赋值,会推论为 any

代码语言:javascript
复制
let x;
x = 1;
x = 'aaa'

  • 联合类型

表示取值可以为多种类型中的一种,使用 | 分隔每个类型

代码语言:javascript
复制
let stringOrNumber:string | number;
stringOrNumber = 'seven';

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候, 我们只能访问此联合类型的所有类型里共有的属性或方法

代码语言:javascript
复制
function getString(something: string | number): string {
  // toString 是 string类型 和 number类型 的共有属性
  return something.toString();
}

function getLength(something: string | number): number {
  return something.length;
  // => 编译报错: length 不是 string类型 和 number类型 的共有属性, 所以报错
}

  • 类型断言

1.<类型>值 ( 尖括号语法 )

代码语言:javascript
复制
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

2.值 as 类型 ( as 语法 )

当使用 tsx 时,只有 as语法断言是被允许的

代码语言:javascript
复制
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

在上述 联合类型 的例子中, getLength 方法会编译报错,此时我们可以使用类型断言,将 something 断言成 string 就不会报错了:

代码语言:javascript
复制
function getLength(something: string | number): number {
    if ((<string>something).length) {
        // 将 something 断言为 string类型
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

注意 : 类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的:

代码语言:javascript
复制
function toBoolean(something: string | number): boolean {
    return <boolean>something;
    // => 报错
}

  • 类型别名 type

类型别名用来给一个类型起个新名字,多用于联合类型:

代码语言:javascript
复制
type Name = string;
type GetName = () => string;
type NameOrGetter = Name | GetName;
function getName(n: NameOrGetter): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

type 声明可以定义联合类型,基本类型等多种类型,而 interface 只能定义对象类型

  • 字符串字面量类型
代码语言:javascript
复制
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错,event 不能为 'dbclick'

  • 接口 Interfaces

接口(Interfaces)是一个很重要的概念,可以理解为一种规范或者约束,用来描述 对象(object) 的形状 或者对 类(class) 的行为 进行抽象。对类的行为抽象将在后面 类与接口 一章中介绍,下面主要介绍对对象的形状进行描述。

  • 接口定义

使用 interface 定义接口, 接口名称一般首字母大写,定义接口的时候,只定义声明即可,不包含具体内容:

代码语言:javascript
复制
// 定义一个接口 Person
interface Person {
  name: string;
  age: number;
}

// 定义一个个变量,它的类型是 Person
let tom: Person = {
  name: 'Tom',
  age: 25
};

实现接口的时候,要实现里面的内容,定义的变量比接口少了或多了属性都是不允许的:

代码语言:javascript
复制
let tom: Person = {
  name: 'tom'
}
// => 编译报错,少了age属性

  • 可选属性

使用 ? 代表可选属性, 即该属性可以不存在, 但不允许添加未定义的属性

代码语言:javascript
复制
interface Person {
  name: string;
  age?: number;
}
let tom: Person = {
  name: 'tom'
}
// age是可选属性

  • 任意属性

定义了任意属性后可以添加未定义的属性,并可以指定属性值的类型

代码语言:javascript
复制
interface Person03 {
  name: string;
  age?: number;
  [propName: string]: any;
}
let tom04: Person03 = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};

定义了任意属性,那么确定属性和可选属性都必须是它的子属性

代码语言:javascript
复制
interface Person {
  name: string;
  age?: number;
  [propName: string]: string;
}
// 编译报错:Person定义了一个任意属性,其值为string类型。则Person的所有属性都必须为string类型,而age为number类型

  • 只读属性 readonly
代码语言:javascript
复制
interface Person {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候

代码语言:javascript
复制
let person: Person = {
  id: 100,
  name: 'tom',
}
person05.id = 90;
// => 编译报错:id为只读, 不可修改

let person2: Person = {
  name: 'welson',
  age: 2
}
// => 编译报错:给对象 person2 赋值,未定义只读属性id
person2.id = 1;
// => 编译报错:id为只读, 不可修改

  • 函数类型接口
代码语言:javascript
复制
// 只有参数列表和返回值类型的函数定义, 参数列表里的每个参数都需要名字和类型
interface SearchFunc {
  (source: string, subString: string): boolean;
}

  • 函数
代码语言:javascript
复制
function sum(x: number, y: number): number {
    return x + y;
}

相关概念

  • 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
  • 对象(Object):类的实例,通过 new 生成
  • 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  • 存取器(getter & setter):用以改变属性的读取和赋值行为
  • 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

存取器

代码语言:javascript
复制
class Animal {
        name:string;
    constructor(name) {
        this.name = name;
    }
    get name() {
        return 'Jack';
    }
    set name(value) {
        console.log('setter: ' + value);
    }
}

let a = new Animal('Kitty'); // setter: Kitty
a.name = 'Tom'; // setter: Tom
console.log(a.name); // Jack

复制代码

静态属性和方法

代码语言:javascript
复制
// ts
class Animal {
    static num = 42;
    static isAnimal(a) {
        return a instanceof Animal;
    }
}

console.log(Animal.num); // 42
let a = new Animal('Jack');
Animal.isAnimal(a); // true
a.isAnimal(a); // TypeError: a.isAnimal is not a function

访问修饰符

public 公有属性或方法,可以在任何地方被访问到,默认所有的属性和方法都是 public的

private 私有属性或方法,不能在声明它的类的外部访问,也不可以在子类中访问

protected 受保护的属性或方法,它和 private 类似,区别是它可以在子类中访问

代码语言:javascript
复制
class Person {
    public name:string;
    private idCard:number;
    protected phone:number;
    constructor(name,idCard,phone) {
        this.name = name;
        this.idCard = idCard;
        this.phone = phone;
    }
}

let tom = new Person('tom',420000,13811110000);
console.log(tom.name) // tom

console.log(tom.idCard) 
// error:Property 'idCard' is private and only accessible within class 'Person'.

console.log(tom.phone)
// error:Property 'phone' is protected and only accessible within class 'Person' and its subclasses

class Teacher extends Person {
    constructor(name,idCard,phone) {
        super(name,idCard,phone);
        console.log(this.name)
        console.log(this.phone)
                console.log(this.idCard)
                // error:Property 'idCard' is private and only accessible within class 'Person'.
    }
}

多态

代码语言:javascript
复制
class Person {
  eat(){ console.log('eat') }
}
class A extends Person {
  eat(){ console.log('A eat') }
}
class B extends Person {
  eat(){ console.log('B eat') }
}

复制代码

抽象类/抽象方法 abstract

abstract 用于定义抽象类和其中的抽象方法。

抽象类是提供给其他类继承的基类(父类),是不允许被实例化 抽象方法只能包含在抽象类中 子类继承抽象类,必须实现抽象类中的抽象方法

代码语言:javascript
复制
abstract class Animal {
    abstract eat(); // 抽象方法
    // 普通方法
    sleep(){
      console.log('sleep')
    }
}

let a = new Animal(); // 报错,抽象类不能被实例化

class Cat extends Animal {
    eat(){ 
        // 父类的eat方法必须被实现
      console.log('eat')
    }
}

复制代码

类与接口

前面介绍了 接口 可以用来描述 对象(object)的形状,这一章主要介绍 接口 对 类(class)的行为 进行抽象。

类实现接口 implements

实现(implements)是面向对象中的一个重要概念。一个类只能继承自另一个类,不同类之间可能会有一些共有特性,提取多个类的共有特性,作为一个接口,再用 implements 关键字来实现就可以大大提高面向对象的灵活性。

举例: 人是一个类,人需要吃东西。动物是一个类,动物也需要吃东西。这种情况就可以把 吃东西 提取出来作为一个接口:

代码语言:javascript
复制
interface Ieat {
   eat();
}

class Person implements Ieat{
  eat(){}
}

class Animal implements Ieat {
  eat(){}
}

复制代码

一个类可以实现多个接口

代码语言:javascript
复制
interface Ieat {
   eat();
}

interface Isleep {
    sleep();
}

class Person implements Ieat, Isleep{
  eat(){}
  sleep() {}
}

复制代码

泛型类

代码语言:javascript
复制
class arrayList<T> {
  name: T;
  list: T[] = [];
  add(val:T):void {
    this.list.push(val)
  }
}

var arr = new arrayList<number>();
arr.add(1)
arr.add(2)
console.log(arr.list)

泛型接口

代码语言:javascript
复制
interface Iadd<T> {
  (x:T,y:T):T;
}

var add:Tadd<number> = function(x:number,y:number):number {
  return x + y
}

泛型约束

在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法

获取一个参数的长度:

代码语言:javascript
复制
function getLength<T>(arg:T):T {
    console.log(arg.length) // error: Property 'length' does not exist on type 'T'
  return arg;
}

上例中,泛型 T 不一定包含属性 length,所以编译的时候报错了,这时候就可以使用泛型约束,使用 extends 约束泛型 必须符合 Ilength 的形状,也就是必须包含 length 属性:

代码语言:javascript
复制
interface Ilength {
  length: number
}

function getLength<T extends Ilength>(arg:T):T {
    console.log(arg.length)
  return arg;
}

getLength('abcd') // 4

getLength(7) // error: Argument of type '7' is not assignable to parameter of type 'Ilength'.

多个参数间也可以互相约束:

代码语言:javascript
复制
function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id]; 
    }
    return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };
copyFields(x, { b: 10, d: 20 })

未完待续 。。。。。。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年05月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 优势
  • 安装
  • 编码
  • 编译
  • 基础类型
  • 相关概念
  • 存取器
  • 静态属性和方法
  • 访问修饰符
  • 多态
  • 抽象类/抽象方法 abstract
  • 类与接口
  • 类实现接口 implements
  • 泛型类
  • 泛型接口
  • 泛型约束
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档