前端进阶（十六）TypeScript

一、背景

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文件