大型真香现场之 typeScript 基本语法使用

前端开发张小七
176 阅读4分钟

<一>、背景了解：不知道小伙伴们想没想过为什么要选择typeScript?下面简单介绍一下，废话不多说，赶快上车。。。。

js是一门动态弱类型语言，对变量类型非常宽容，而且不会对这些变量和他们的调度者直接建立结构化的契约 于是 出现了ts。ts是js的超级。

ts的好处： 1.接口定义代替文档

2.ide提升开发效率，降低维护成本

3.重塑类型思维，对类型极度严格

4.立即发现错误

5.运行时性能好

<二>、学习基础：好了,当我们了解了为什么选择强类型语言ts去代替js啦，那么我们继续学习一下基本概念吧，follow me。。。 先来看一张基础脑图，耐心看，他可能比面条还长。。。

1.搭建typeScript环境

本地 compiler 将typeScript转换成javaScript 运行在浏览器和node

安装

 sudo npm install -g typescript

检查安装是否成功

 tsc --version

1字符串新特性：

多行字符串：

const data = `aaa
bbb
ccc`;

字符串模版：

let today:string = "day";
const data = `aaa  ${today}`;

定义一个数组 (两种方式)： 特点 ：1.元素类型固定 2.数组长度不限制

var array: string[] = ['xiang', 'wiw', 'aaa'];
let array2: Array<number> = [1, 2, 3];
console.log(array, array2);

定义一个元组 因为ts 的数组中规定每个元素类型一致，因此 如需不同类型，就使用 元组 特点： 1声明时指定元素个数 2 为每个元素规定类型


let tup1: [string, number, boolean] = ["aaa", 1, true]

console.log(tup1)

枚举

enum Gender {
    Boy = 1,
    Girl = 2,
    Unknow = 3,

}

//使用枚举值
let useSex: Gender = Gender.Boy;
console.log('useSex', useSex)

接口：

接口：就是函数的一个参数的类型罢了（对象类型接口），函数类型接口 就是定义一个函数，然后类型是函数类型的接口

  1. 通过变量声明：
let add: (x: number, y: number) => number
  1. 通过接口声明：
interface Add {
     (x: number, y: number): number
 }
  1. 通过类型别名声明：
type Add = (x:number , y: number) => number

混合接口

声明：

interface Lib {
    (): void;
    version: string;
    doSomeThing(): void;
}

构造器：

function getLib() {
    let lib: Lib = (() => {}) as Lib
    lib.version = '1.0'
    lib.doSomeThing = () => {}
    return lib;
}

使用：

let lib1 = getLib();
lib1();
lib1.doSomeThing();
let lib2 = getLib();

type和interface 多数情况下有相同的功能，就是定义类型。但有一些小区别： type：不是创建新的类型，只是为一个给定的类型起一个名字。type还可以进行联合、交叉等操作，引用起来更简洁。 interface：创建新的类型，接口之间还可以继承、声明合并。 如果可能，建议优先使用 interface。

混合接口一般是为第三方类库写声明文件时会用到，很多类库名称可以直接当函数调用，也可以有些属性和方法。例子你可以看一下@types/jest/index.d.ts 里面有一些混合接口。

用混合接口声明函数和用接口声明类的区别是，接口不能声明类的构造函数（既不带名称的函数），但混合接口可以，其他都一样。

抽象类和多态：

抽象类：好处，抽离事物共性，有利于代码复用和扩展

多态：父类中定义一个抽象方法，多个子类中对这个方法有不同的实现，在程序运行的时候，根据不同的对象，对程序进行不同的操作，这样就实现了运行时的绑定

泛型：

泛型：不预先确定的数据类型，具体的类型在使用的时候才确定

好处：

  1. 函数和类可以轻松地支持多种类型，增强程序的扩展性。
  2. 不必写多条函数重载，冗长的联合类型声明，增强代码可读性。
  3. 灵活控制类型之间的约束。
  • 泛型函数：
// 定义
function log<T> (value:T):T{
    console.log(value);
    return value;
}
// 调用 
log<string[]>(['a','b'])
log(['a','b'])

// 使用类型别名 定义一个泛型 函数类型
type Log = <T>(value:T)=>T
let myLog :Log=log;
  • 泛型接口：
interface Log <T> {
    (value:T):T
}
let myLog:Log=log;
myLog('1');
  • 泛型类： // 泛型类 不能约束类的静态成员 static
class Log<T>{
    run(value:T){
        console.log(value);
        return value;
    }
}

let log1 = new Log<number>()
log1.run(1);
let log2 = new Log();
log2.run('1');

interface length{
    length:number
}

function log<T extends Length>(value:T):T{
    console.log(value,value.length);
    return value;
}

关于ts面试问题 链接分享 www.srcmini.com/3507.html

avatar
文章
阅读
粉丝