typescript 前端面试 typescript 入门

typescript自从诞生以来，都是前端框架的热点，包括但不限于angular、vue3等热门框架都用ts作为代码的底层统一化处理方案。我个人觉得主要是它是代码可读性和可维护性的优点，让开发者喜爱，其实从长远来看，这个是它的利器，我们当然也得知道，它的开发成本是比较高的，而且它跟一些库结合有点瑕疵，主要的是程序员都是很忙的，学习成本这么高的typescript到底值不值得投入生产，确实需要评估。

一、安装 TypeScript

npm install -g typescript

全局安装typescript方式由上。这样一来，我们就可以在电脑上编写ts为扩展名的ts文件了。

而单个ts文件也是非常容易运行的，运行方式由下：

tsc hello.ts

比如 hello.ts 的代码这样写：

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

console.log( greeter(user));

那么控制台就会打印： Hello，Jane User。

二、基础

原始数据类型
布尔值
布尔值是最基础的数据类型，在 TypeScript 中，使用 boolean 定义布尔值类型：

let isDone: boolean = false;

// 编译通过
// 后面约定，未强调编译错误的代码片段，默认为编译通过

数值
使用 number 定义数值类型：

let decLiteral: number = 6;

字符串
使用 string 定义字符串类型：

let myName: string = 'Tom';

空值

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数：

function alertName(): void {
    alert('My name is Tom');
}

Null 和 Undefined
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：

let u: undefined = undefined;
let n: null = null;

任意值
在任意值上访问任何属性都是允许的：

let anyThing: any = 'hello';

其实这个时候，它就是未声明的变量。

let something;
something = 'seven';
something = 7;

类型推论

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

很容易理解，就是一个变量第一次赋值的时候，它就已经有声明它的类型了，比如例子中它就是声明了字符串，如果这个时候还将它再次赋值其它的基础类型，那么这个时候就会报错。

联合类型
联合类型（Union Types）表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

但是这里有个点需要注意，就是当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
    return something.length;
}

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

上述例子中，由于nunber是没有length的，所有就会报错提示。

三、高级

对象的类型——接口
TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。这个时候在属性的后边加上“?”表示这个属性是可选的，这里需要注意，可选属性必须在必选属性的后边，也就是说必选属性肯定不会在可选属性的后边。

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

数组的类型
在 TypeScript 中，数组类型有多种定义方式，比较灵活。

• 「类型 + 方括号」表示法
  最简单的方法是使用「类型 + 方括号」来表示数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];

• 数组泛型
  我们也可以使用数组泛型（Array Generic） Array 来表示数组：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

• any 在数组中的应用
  一个比较常见的做法是，用 any 表示数组中允许出现任意类型：

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

四、函数

函数声明
一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到，其中函数声明的类型定义较简单：

function sum(x: number, y: number): number {
    return x + y;
}

注意，输入多余的（或者少于要求的）参数，是不被允许的：

function sum(x: number, y: number): number {
    return x + y;
}
sum(1, 2, 3);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

function sum(x: number, y: number): number {
    return x + y;
}
sum(1);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

函数表达式
如果要我们现在写一个对函数表达式（Function Expression）的定义，可能会写成这样：

let mySum = function (x: number, y: number): number {
    return x + y;
};

这是可以通过编译的，不过事实上，上面的代码只对等号右侧的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型，则应该是这样：

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

用接口定义函数的形状
我们也可以使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

可选参数

与接口中的可选属性类似，我们用 ? 表示可选的参数：

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

剩余参数
ES6 中，可以使用 …rest 的方式获取函数中的剩余参数（rest 参数），而在typescript可以用数组的类型来定义它：

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

重载
联合类型如下：

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 reverse 的函数类型：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}