前端进阶（十六）TypeScript

曾经终败给现在 2022-01-17 06:25 354阅读 0赞

一、背景

TypeScript是微软开发的开源编程语言，对javascript功能做了增强（是js的超集），目的是为了解决javascript的弱类型，不适合开发大型软件的问题。

二、特性

1、类型批注和编译时类型检查

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用JavaScript 常规的动态类型。

React中，可对父组件传入的props做类型检查（Link组件的父组件传入四个属性）：

Link.propTypes = {
      active: PropTypes.bool.isRequired,
      children: PropTypes.node.isRequired,
      onClick: PropTypes.func.isRequired,
      onInit: PropTypes.func.isRequired,
    };

2、类

TypeScript 支持集成了可选的类型批注支持的 ECMAScript 6 的类。class中包括constructor，super、public和private关键字，如下为一个ts中最简单的类：

//--这个是简单的 class
    class Employee {
        fullName: string;
    }
    var employee = new Employee();
    employee.fullName = "CoolSummer";//赋值

ts文件编译为js文件后：

var Employee = (function () {
        function Employee() {
    }
        return Employee;
    })();
    var employee = new Employee();
    employee.fullName = "CoolSummer"; //赋值

3、接口

常见接口定义调用：

/**--声明一个接口，这个接口不会在 js 上面出现，只会在显示一个 user 对象在 getUserInfo*/
    interface IUserInfo{
        age : any;//定义一个任何变量的 age.
        userName :string;//定义一个 username.
    }
    /*********获取用户信息*******/
    function getUserInfo(user : IUserInfo):string{
        return user.age+"======"+user.userName;
    }
    //用一个数组对象作为一个 user 对象传值过 getUserInfo 函数方法..参数必须要以接口
    IUserInfo 对应上.
    //少传一个参数，typescript 会自动帮你检测报错,如果用纯 javascript 去写的话，不会报错，
    ts 大大减少检查 js 问题
    //如：var userObj={userName:'CoolSummer'};//若调用此对象则会error, 少了age属性定义
    
    var userObj={userName:'CoolSummer', age:100};
    $(function()
        var userInfo:string= getUserInfo(userObj);
        console.log(userInfo);
    });

4、泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

如在react源码中react-reconciler的ReactFiberHooks.js中Dispatcher就是用了泛型编程，泛型编程在C++语言中很常见也叫template编程。

export type Dispatcher = {
      readContext<T>(
        context: ReactContext<T>,
        observedBits: void | number | boolean,
      ): T,
      useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>],
      useReducer<S, I, A>(
        reducer: (S, A) => S,
        initialArg: I,
        init?: (I) => S,
      ): [S, Dispatch<A>],
      useContext<T>(
        context: ReactContext<T>,
        observedBits: void | number | boolean,
      ): T,
      useRef<T>(initialValue: T): {current: T},
      useEffect(
        create: () => (() => void) | void,
        deps: Array<mixed> | void | null,
      ): void,
      useLayoutEffect(
        create: () => (() => void) | void,
        deps: Array<mixed> | void | null,
      ): void,
      useCallback<T>(callback: T, deps: Array<mixed> | void | null): T,
      useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T,
      useImperativeHandle<T>(
        ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
        create: () => T,
        deps: Array<mixed> | void | null,
      ): void,
      useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
    };

5、函数

ypeScript 3.1提供了在函数声明上定义属性的能力，还支持`const`声明的函数。只需要在函数直接给属性赋值就可以了。 这样我们就可以规范JavaScript代码，不必再借助于`namespace`。

function readImage(path: string, callback: (err: any, image: Image) => void) {
        // ...
    }
    
    readImage.sync = (path: string) => {
        const contents = fs.readFileSync(path);
        return decodeImageSync(contents);
    }

6、lambda函数

最后，当你写完typescript代码之后，需要将代码编译成js代码

如果直接引入js文件，需要

tsc greeter.ts

如果使用webpack打包工具，需要引入loader处理ts文件