Typescript入门关键几点 🔥

最近公司项目开始统一使用Typescript了，所以自己也是开始认真的学习了一下typescript,还是很有收获的！下面分享给大家

基础知识

1. 基础

let isDone: boolean = false;

let decimal: number = 6;

let color: string = "blue";

// 数组，有两种写法
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

// 元组(Tuple)
let x: [string, number] = ["hello", 10];
// 元组类型是一个不可变的数组，长度、类型是不可变的。

// 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型
x.push('123')
x.push(123)
x.push(true)   // error, 不能添加非字符串和 number 的值

// 枚举  通过enum则不能修改定义好的值了 
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
//  const Color1 = { Red: 1, Green: 2, Blue : 4}
//  上面Color1可以修改里面的值 例如Color.Red = 5; 枚举就无法修改了

//枚举的成员从0开始递增，并且key 和 value 会互相映射
enum Colors { Red, Yellow, Blue }
Colors['Red'] === 0 // true  从0开始递增
Colors[0] === 'Red' // 相互映射

// 枚举事实上会编译成如下
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Yellow"] = 1] = "Yellow";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));


// 不确定的可以先声明为any
let notSure: any = 4;

// 声明没有返回值
function warnUser(): void {
    alert("This is my warning message");
}

let u: undefined = undefined;

let n: null = null;

// 类型永远没返回
function error(message: string): never {
    throw new Error(message);
}

// 类型主张，就是知道的比编译器多，主动告诉编译器更多信息，有两种写法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;

1. 封装

private/protected/public

1. interface 接口

interface SystemConfig {
      attr1: string;
      attr2: number;
    func1(): string;
    func2(): void;
}
<!-- 我们给软件定了一个系统参数的配置接口，他定义了系统配置的形状，有两个属性attr1和attr2，两个方法func1和func2，这样如果定义了const systemConfig: SystemConfig = {},那systemConfig就不能随意修改了，他有形状了。 -->

也可以用implements来实现接口，这样可以实现类似更为灵活的继承，如：

class A extends BaseClass implements BaseInterface1, BaseInterface2 {}

<!-- 类A继承了BaseClass，并且继承了BaseInterface1和BaseInterface2两个接口 -->

// 接口也是可以继承接口的
interface Fa {
  surname: string
}

interface Son extends Fa {
  name: string
}

const obj: Son = {
  surname : 'z',
  name: 'zc'
}

class Fa {
  constructor() {}
  suck(){

  }
}

interface Son extends Fa {
  suck():void;
  name: string;
}

1. 命名空间 module/namespace

namespace Module1 {
  export interface SubModule1 {}
  
  export interface SubModule2 {}
}
const module: Module1.SubModule = {}

1. 声明文件 declare

declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。

假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：

$('#foo');
// 或
jQuery('#foo');

但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：

jQuery('#foo');

// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.

这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：

declare var jQuery: (selector: string) => any;

jQuery('#foo');

declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：

jQuery('#foo');

声明文件
声明文件以 .d.ts 为后缀，例如：

runoob.d.ts
声明文件或模块的语法格式如下：

declare module Module_Name {
}
TypeScript 引入声明文件语法格式：

/// <reference path = " runoob.d.ts" />

1. 泛型

function makeState<S>() {
  let state: S
  function getState() {
    return state
  }
  function setState(x: S) {
    state = x
  }
  return { getState, setState }
}


// 限制它就只能输入输出number和string类型
function makeState<S extends number | string>() {
  let state: S
  function getState() {
    return state
  }
  function setState(x: S) {
    state = x
  }
  return { getState, setState }
}
// 如果我传入boolean类型
const boolState = makeState<boolean>()

// 泛型的默认类型
function makeState<S extends number | string = number>()



// https://segmentfault.com/a/1190000021219586

泛型其实可以当作普通函数在声明时的一个参数，这个参数代表类型。
我们可以给函数值参数设置默认值，
也可以通过typescipt的泛型给函数类型参数设置默认值。

function regularFunc(x = 2)
regularFunc()

function genericFunc<T = number>()
genericFunc()

其实上面已经涉及到泛型约束了，我们再来看一下更具体的泛型约束

//泛型无法知道具体的类型，所以无法操作它的属性和方法
function Test<T> (a:T):void {
  console.log(a.length);  // error
}
Test<string>('1')

interface hasLengthProp {
    length : number;
}
function Test<T extends hasLengthProp>(a:T):void {
    console.log(a.length);
}

1. 别名

type strAria = string; // 给 string 类型定义了 strAria别名
const str: strAria = 'abc';

type fnAria = () => string;
function (callback:fnAria):void {
    callback();
}

// 我们使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种
type EventName = 'xm' | 'xh' | 'xb';
const str : EventName = 'xb'
const elseStr : EventName = 'xf' // error, 不在这几个名字当中

1. 声明合并

就是说声明两个同样的接口、类或者函数，会进行合并操作。

合并的属性的类型必须是唯一的

interface Alarm {
    price: number;
     alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}
//===> 相当于
interface Alarm {
    price: number;
    weight: number;
       alert(s: string, n: number): string;
}

demo

我们可以先做一个简单的 demo 来感受一下 TypeScript 的魅力。首先在 src/page 新建一个 Demo.tsx.
在其中定义一个无状态组件 Hello。

import React from 'react';

const Hello = ({ name }) => <div>Hello,{name}</div>;

接下来我们使用它，

const App = () => <Hello />;

export default App;

我们发现他抛出了如下错误 :

不能将类型“{}”分配给类型“{ name: any; }”。类型“{}”中缺少属性“name”。

因为我们使用了 name，Typescript 认为他是必填参数。如果不存在便认为程序错误，并造成编译失败。这可以帮助我们避免很多低级错误。

我们也可以使用 Class 语法来声明组件，代码如下：

class Message extends React.Component<{
  message: string;
}> {
  public render() {
    return <div>{this.props.message}</div>;
  }
}

我们可以通过 <> 的第一个参数来指定 props 的类型。通过第二个参数来指定 state 的类型
代码如下：

class Message extends React.Component<
  {
    message: string;
  },
  {
    count: number;
  }
> {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  public render() {
    return (
      <div>
        {this.props.message}
        {this.state.count}
      </div>
    );
  }
}

在这里，我们定义了一个 包含 count 的 state ，count 的类型为 number。然后在类 constructor 内部初始化 state。其余使用方式与 javascript 中相同。

我们可以自行修改 count，

public increment = () => {
  const { count } = this.state;
  this.setState({
    count: count + 1
  });
};

interface IProps {
  aProps: string;
  bProps: string;
}
interface IState {
  aState: string;
  bState: string;
}

class App extends React.PureComponent<IProps, IState> {
  state = {
    aState: '',
    bState: '',
  };
}

TS 对 类装饰器的静态解析还不支持, 建议React 和 Redux 的绑定函数 connect 用函数写法

const mapStateToProps = (state: {}, ownProps: IProps) => {};
const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(App);

以上是自己的一点点对typescript的基础知识的了解，当然以上肯定会存在很多不足的地方，我会继续更加深入的学习，欢迎各位提出宝贵的意见或建议，也希望能帮助到你从中获得一些知识！

后记：今年计划刷一遍mdn,有兴趣的可以一起啊，巩固一下基础。下面是刷mdn的公众号，感兴趣的可以关注一下！