ts 学习笔记

陌路散爱 提交于 2019-11-27 22:35:11

基础

  • 原始数据类型
  • 任意值
  • 类型推论
  • 联合类型
  • 接口
  • 数组
  • 函数
  • 类型断言
  • 申明文件
  • 内置对象

原始数据类型

Javascript 的类型分为两种: 原始数据类型(Primitive data types)和对象类型(Object types)。

原始数据类型包括: 布尔值、数字、字符串、null、undefined、以及ES6中的新类型 Symbol。

布尔值

布尔类型,使用 boolean 定义

let isDone: boolean = false
// or
let createByBoolean: boolean = Boolean(1)

布尔对象, 使用Boolean 构造函数

let createByNewBoolean: Boolean = new Boolean(1)

数字

数字类型, 使用 number 定义

let digital: number = 6
let notANumber: number = NaN
let infinityNumber: number = Infinity

数字对象, 使用Number构造函数

let six: Number = new Number(6)

字符串

字符串类型,使用string定义:

let myName: String = 'Tao' // 这里不用 name 是因为 在ts name  已经被声明过,这里不能使用
// 模板字符串
let sentence: string = `Hello, my name is ${myName}`

字符串对象, 使用String定义

let myName: String = new String('Tao')
console.log(myName)
// 模板字符串
let sentence: String = new String(`Hello, my name is ${myName}`)  ;
console.log(sentence)

空值

JavaScript 没有空值(Void)的概念,在 TypeScirpt 中,可以用 void 表示没有任何返回值的函数:

function alertName(): void {
  alert('My name is Tao')
}

声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null:

let unusable: void = undefined

Null 和 Undefined

在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型:

let u: undefined = undefined
let n: null = null

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

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

let num: number = undefined
let str: string = null
// 这些都是允许的, 不会报错

任意值

  • 如果是一个普通类型,在复制过程中改变类型是不背允许的,但如果是 any 类型,则云讯被赋值为任意类型
  • 任意值(Any) 用来表示允许赋值为任意类型
  • 在任意值上访问任何属性都是允许的,也允许调用任何方法
  • 声明一个变量为任意值之后面对它的任何操作,返回的内容的类型都是任意类型
  • 变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型
let myFavoriteNumber: any = 'six'
myFavoriteNumber = 7
let anyThing: any = 'hello'
console.log(anyThing.myName)
anyThing.setName('Tao').sayHello()

类型推论

如果没有明确的指定类型, 那么 Typescript 会依照类型推论(Type Inference)的规则推断出一个类型

Typescript 2.1 中,编译器会考虑对 myFavoriteNumber 的最后一次赋值来检查类型。

let myFavoriteNumber = 'six'
// 等价于 let myFavoriteNumber: string = 'six'

联合类型

  • 联合类型(Union Types)表示取值可以为多种类型中的一种。
  • 联合类型使用 | 分隔每个类型
let myFavoriteNumber: string | number
myFavoriteNumber = 'six'
myFavoriteNumber = 6

这里的 string | number 的含义是, 允许 myFavoriteNumber 的类型是 string 或者 number, 但是不能是其他类型。

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

function getString( someThing: string |number ): string {
  // 这里的 函数 getString 中的第二个 : string  代表返回值类型
  return someThing.toString()
}

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型

接口

Typescript 中的接口是一个非常灵活的概念, 除了可以用于对类的一部分行为进行抽象以外, 也常用于对 「 对象的形状(Shape) 」进行描述。

interface Person {
  name: sting,
  age: number
}

使用接口类型赋值时, 变量的形状必须和接口保持一致,属性数量和类型保持一致,不允许添加未定义的属性。

可选属性,有时候我们希望不要完全匹配一个形状,那么可以用可选属性。 使用 ?

interface Person {
  name: string,
  age?: number,
}
let tao: Person = {
  name: 'Tao'
}

任意属性,有时候我们希望一个借口允许有任意属性

interface Person {
  name: string,
  age?: number,
  [propName: string]: any, // 使用任意属性后, 将不会对对象的任意属性长度进行限制
}
let tao: Person = {
  name: 'Tao',
  sex: 'male'
}

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

interface Person {
  name: string,
  age?: number,
  [porpName: string]: string
}

let tao: Person = {
  name: 'Tao',
  age: 26, // err 25 是number类型, 不是string的子属性
  sex: 'male'
}
// 所以通常情况下我们会将 任意属性定位 any(任意值)

只读属性,对象中的一些字段只能在创建的时候被赋值,用 readonly 定义只读属性。

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

interface Person {
  readonly id: number
}
// 第一次给对象赋值, 激活只读约束
let tao: Person = {
  id: 89757, // success
}

tao.id = 9527 // err 这里会抛出异常, 因为此处已经不属于第一个个对象赋值

数组

定义数组有多种定义方式

  1. 「 类型 + 方括号 」表示法

    let fibonacci: number[] = [1, 1, 2, 3, 5]
    // 这里的数组 不允许出现其他类型
    fibonacci.push('8') // err
    let fibonacci: number[] = [1, '1', 2, 3, 5]  //err
  2. 使用数组泛型(Generic)Array 来表示数组

    let fibonacci: Array<number> = [1, 1, 2, 3, 5]
  3. 用接口表示数组

    interface NumberArray {
      [index: number]: number
    }
    let fibonacci: NumberArray = [1, 1, 2, 3, 5]
  4. any表示数组中允许出现任意类型

    let list: any[] = ['tao', 26, { sex: 'male' }]
  5. 类数组(Array-like Object)不是数组类型, 比如 arguments:

    事实上常见的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection等:

    function sum() {
      let args: IArguments = arguments
    }

函数

函数是 javascript 中的一等公民

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!