typescript 入门介绍

开始阶段 推荐使用 线上[Playground]https://www.typescriptlang.org/play

基础数据类型

  1. 布尔值
let isDone:boolean = false
let hasDone: boolean = Boolean(1)
  1. 数值型
let age: number = 23
  1. 字符串
let name: string = 'zhansan'
  1. null 和 undefined
let u: null = null
let un: undefined = undefined

默认情况下,unll 和 undefined 是所有类的子类, 也就是他可以赋值给其他的类型
例如

let num: number = undefined

如果在 tsconfig 中指定了 strictNullCheck 标记,null 和 undefined 只能赋值给 void 和各自的类型
5. any 类型
any 类型可以被赋值为任何类型的值,
可以访问任何属性
申明变量的时候没有指定类型,会给一个 any 类型
6. unknown
unknown 是 any 类型对应的安全类型
所有类型也都可以赋值给 unknown 类型
unknown只能赋值给 any 类型和 unknown 类型本身

在使用unknown 的时候, 我们需要 对他进行 type guard

function foo (x: unknown) {
  if (typeof x == 'string') {
    .....
  }
  if (typeof x == 'number') {
    .....
  }
}
  1. void 表示没有任何类型
    通常用在 方法中 表示没有返回值
function alertName (): void {
  alert('name')
}
  1. never 表示的是永不存在的类型
    比如 抛出错误, 后面就不会执行了
function error (message: string): never {
  throw new Error(message)
}
  1. 数组
    定义的写法
let array: number[] = [1,2,3,4,5]
let array1: Array<number> = [1,2,3,4,5]
  1. 元组 和数组相比
    它的长度是有限的,
    各个位置上类型是确定的,而且可以不同
let tom: [string, number] = ['tom', 25]

对类型和长度都有限定

  1. 枚举
    取值限定在一定范围内的类型
enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST
}
let dir: Direction = Direction.WEST

默认情况下初始值是 0 ,其余的会自增长 加 1
也可以指定枚举值

enum Direction {
  NORTH = 'NORTH',
  SOUTH = 'SOUTH',
  EAST = 'EAST',
  WEST = 'WEST'
}
  1. 接口类型 interface 比较重要的一个类型
    定义一个对象的内容格式
interface Person {
  name: string,
  age: number
}
let zhansan: Person = {
  name: 'zhansan',
  age: 34
}

定义的变量属性 不能多余或者少于 interface 定义的 个数

let zhansan: Person = {
  name: 'zhansan',
  age: 34,
  gender: 'male'
}

多了一个 gender 属性, 但是在 Person 类中没有定义, 会报错
定义类的时候,可以使用 添加 ? 来定义 一个属性 可以出现, 也可以不出现

interface Person {
  name: string,
  age?: number
}

上面定义的 age 属性 添加 ? 后, 在这个类中 age 属性 可以出现, 也可以不出现, 出现的时候 名字一定还是 age
只读属性
在属性的前面 添加 readonly

interface Person {
  readonly id: number,
  name: string,
  age?: number
}
  1. 函数
  • 定义函数参数和返回值类型
function add(x: number, y: number): number {
  return x + y
}

定义了一个函数, 有两个参数,类型都是 number , 返回值是 number

  • 函数的参数中 定义可选参数 使用? 定义在必选参数的后面
function add(x: number, y?: number): number {
  if (y) {
    return x + y
  } else {
    return x
  }
}
  • 剩余参数
function push (array: number[], ...items: number[]) {
  items.forEach(function (item) {
    array.push(item)
  })
}
let a = []
push(a, 1,2,3,4)
  • 函数表达式
let idGenerator: (charts: string, number: number) => string
function createUserId (name: string, id: number): string {
  return name + id
}

IdGenerator = createUserId
// 等效于 
let idGenerator: (charts: string, number: number) => string = (name: string, id: number): string {
  return name + id
}
  • 函数重载 允许函数接受不同数量或者类型的参数,做出不同的处理
function add (a: number, b: number): number
function add (a: string, b: string): string
function add (a: string, b: number): string
function add (a: number, b: string): string
function add (a: string | number, b: string | number) {
  if (typeof a == 'string' || typeof b == 'string') {
    return a.toString() + b.toString()
  }
  return a + b
}
  • 静态属性,静态方法 static
    静态属性和方法是存在 类上面的, 不是在实例上的。
class Animal {
  readonly name;
  public constructor (name) {
    this.name = name
  }
  static isAnimal (a) {
    return a.instanceof Animal
  }
}
let a = new Animal('tom')
Animal.isAnimal(a) // true
a.isAnimal(a) // error
  • public 定义的公共方法属性
  • private 定义的属性,只能在类中调用和访问,子类中也不能访问
  • protected 相对宽松些, 在子类中能够调用
class Animal {
  protected name;
  public constructor (name) {
    this.name = name
  }
}
class Cat extends Animal {
  constructor(name) {
    super(name)
    console.log(this.name)
  }
}
  • readonly 是一个定义属性 为只读, 不能修改
  • 抽象类 abstract
    抽象类不能被实例化
    抽象类中的抽象方法,在必须在子类中实现
abstract class Animal {
  public name;
  public abstract sayHi()
}
class Cat extends Animal {
  public sayHi() {
    console.log('99' + this.name)
  }
}

下一篇将继续介绍 进阶类型

下面是我的小程序体验码,希望能和大家共同学习进步





原文地址:http://www.cnblogs.com/buxiugangzi/p/16914267.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性