typescript学习笔记

发表于
字数统计 1k 字 | 阅读时长 4 分钟

什么是 Typescript

typescript 是一个 javascript 的超集。在传统的 javascript 中，整个语言都是若类型的，而 typescript 提供了一种强类型的规范,并且实现了接口，模块化，等功能。语法上 es6 和它比较接近，如果你之前比较熟悉 es6 的话可以轻松上手。

基本类型

在 javascript 中类型一共有，number,string,boolean,null,undefined,object。在 typescript 中又新增了一些类型

元组 Tuple

元组类型允许表示一个已知类型和元素的数组，各元素类型不必相同
tuple 在赋值时必须按照定义的类型，如果不符合就会报错。

1
2
let x: [number, string]
x = [123, 'a']

tuple 可以通过索引来找到元素

1
2
console.log(x[0].substr(1)) // OK
console.log(x[1].substr(1)) // Error, 'number' does not have 'substr'

当访问一个越界的元素会用联合类型替代

1
x[3] = '1' //ok 赋值的类型可以是number||string

枚举 enum

enum 可以给一组数值定义一些友好的编号。同时提供了 value => key 的映射关系

1
2
3
4
5
6
7
8
// 从一开始编号
enum Color {
  Red = 1,
  Green,
  Blue
}
let c: Color = Color.Green
let a: Color = Color[2] //Green

Void

它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

1
2
3
function warnUser(): void {
  console.log('This is my warning message')
}

any

表示任意类型。编程时有些时候并不清楚类型，any 这时候是个好的选择。Object 有相似的作用，但是 Object 类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。有时我们并不确定数据类型，但确实需要调用一些方法，比如 tostring，这时 typescript 会报错

1
2
3
4
5
6
7
8
9
10
11
12
function getLength(something: string | number): number {
  if (something.length) {
    return something.length
  } else {
    return something.toString().length
  }
}

// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.
// index.ts(3,26): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

这时我们可以使用类型断言去强制转换他的类型，可以使用尖括号和 as 两种方法

1
2
;(<string>something).length
;(something as string).length

定义类型

typescript 允许给变量或函数返回值定义类型，如果不符合报错就会报错，这使得 js 变成强类型语言

1
2
3
4
5
6
7
8
let a:string = ''//a必须是string类型
let b:number = 0
let c:number[] = [1,2,3]//数字数组

function(a:string,b:number):string{
    return a+b
}
//接受数字和字符类型的参数，返回一个字符类型

##接口
typescript 的接口可以规定你的代码遵守的一个规则

1
2
3
4
5
6
7
8
interface Person {
    name:string;
    age:number
}
let renkosky:Person = {
    name:'renko';
    age:18
}

Person 会约束创建的变量二者的形状必须一致，也就是必须包含 name,age 两个属性，并且类型保持一致

如果需要定义不确定的属性，可以使用问号

1
2
3
4
5
6
7
8
9
interface Person {
    name:string;
    age:number;
    sex?:string
}
let renkosky:Person = {
    name:'renko';
    age:18
}

接口约束函数类型

1
2
3
4
5
6
7
8
interface SearchFunc {
  (source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function(source: string, subString: string) {
  let result = source.search(subString)
  return result > -1
}

接口约束类

1
2
3
4
5
6
7
8
interface ClockInterface {
  currentTime: Date
}

class Clock implements ClockInterface {
  currentTime: Date
  constructor(h: number, m: number) {}
}

泛型

当你不确定具体的类型时，我们会想到使用 any 来约束类型，但是有时这也满足不了我们的要求,例如我想写一个输入和返回类型都相同的函数：

1
2
3
function identity(arg: any): any {
  return arg
}

any 是任意类型，所以不能保证前后的一致性，这时我们可以使用泛型

1
2
3
4
5
function identity<T>(arg: T): T {
  return arg
}
let output = identity<string>('myString')
let output = identity('myString') //利用类型推论

typescript+react

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import * as React from 'react'

interface HelloProps {
  compiler: string
  framework: string
}

interface HelloState {
  inital: string
}

export class Hello extends React.Component<HelloProps, HelloState> {
  state: HelloState = {
    inital: '123'
  }
  render() {
    return (
      <h1>
        Hello from {this.props.compiler} and {this.props.framework}!
      </h1>
    )
  }
}