0
点赞
收藏
分享

微信扫一扫

Ts 的基础知识

悲催博士僧 2022-03-11 阅读 41
typescript

Ts 的基础笔记

原始数据类型

  • 原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt。
定义变量;
let isDone: boolean = false; // 布尔值变量
let decLiteral: number = 6; // 纯数字
let myName: string = "Tom"; // 字符串
let u: undefined = undefined; //undefined
let n: null = null; //null
function alertName(): void {
  //定义一个函数且返回值是空
  alert("My name is Tom");
}
// Ts中定义变量就限制了 该变量只能保存该类型的值

联合类型

  • 联合类型(Union Types)表示取值可以为多种类型中的一种。
    语法格式:
let 变量:类型1 | 类型2
 `也可直接字面量直接赋值`

    列子:
let myFavoriteNumber: string | number;
    myFavoriteNumber = true;  //报错
// myFavoriteNumber 类型指定了 只能是string 和 number 类型 直接赋予布尔值是不准予的

类型断言

  • 类型断言(Type Assertion)可以用来手动指定一个值的类型。
   语法格式:
值 as 类型  或  <类型>值

   案列:
//unknown 类型的不能直接复制 需要进行类型断言(类型检查) 直接赋值的话会报错
let num1:unknown = 234
let num2 = 234

    js类型断言

if ( typeof num2 === Number){
       num1 = num2
}

// if 判断等价于 下面的写法
num1 = num2 as number

        ||  等价于

num1 = <number> num2

`三种写方都是一样的`

接口 ( interface )

  • 在 TypeScript 中,我们使用接口(Interfaces)来定义对象或函数参数的类型。

   语法格式:

interface Person {
    name: string;
    age?: number;
   [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

// 我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。 属性必须得是跟接口是一致的不能多 不能少 不然会报错

// name : string             必须值    有一个 name 为字符串的属性
// age? : number             age可选值 表示这个属性可有可没有
// [propName:string] : any   任意属性  一般都定义在接口的最后一个属性 接口定义这个属性后 tom就可以增加任意属性

泛型

  • 泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
function createArray<T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = value;
  }
  return result;
}

createArray < string > (3, "x");

// 函数中 <T> 表示 声名泛型T 就跟声名变量一样(名字可以自定义。<> 里可以自定义多个泛型以检测不同的参数类型) 泛型只能用作于指定类型 。T 表示使用泛型检测
//  默认情况下 在你调用该函数时传递参数是什么类型 那么此时的T就是什么类型 就这是泛型的自动检测。
//  <string> 表示这次调用该函数指定T是string

        泛型约束

在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length);  //arg 中不一定有length属性
    return arg;
}

   下面是对泛型进行了约束

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
 extends 继承 T 继承了lengthwise 接口。 就是指T继承了lengthwise接口 此时的T中就含有一个必须属性length。 这个时后在调用该函数时就必须传length属性

函数

  • 在 ts 中函数 输入多余的(或者少于要求的)参数,是不被允许的

   语法格式:

(参数:类型):函数返回值的类型=>{}

     案列:

function buildName(firstName: string, lastName: string = 'Cat', lastName?: string):string{
    return firstName + ' ' + lastName;
}

let tomcat = buildName('Tom', 'Cat','Dog');       //  报错 多了一个参数
let tom = buildName('Tom');                       //  报错 少了一个参数

// lastName?: string ----- 加了问号的表示可选参数非必填 但后面不允许再出现必需参数了
// lastName: string = 'Cat' -----设置参数默认值并限制了类型


     `重载`
// 重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。

     案列:

function reverse(x: number | string): number | string | void {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}
reverse(123)          //321
reverse('hello')      //olleh

数组

  语法格式:

let 变量:类型[]

      ||   等价于

let 变量:Array<类型>

元组

  • 简单理解就是固定长度的数组
  语法格式:
let tom: [string, number];
tom[0] = "Mike"   // 可以只赋值其中一项
tom = ['Tom'];    // 报错
//  元组在声名时 数组的长度就规定了 在赋值时数量需要一致 单个赋值不会报错
//  任何修改数组结构的方法都是不可以的 如:push splice

枚举

  • 枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0);  // true
console.log(Days["Mon"] === 1);  // true

console.log(Days[0] === "Sun");  // true
console.log(Days[1] === "Mon");  // true
// 反向映射 根据值(依次递增)得到键名 根据键名得到值

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Tue"] === 2); // true
// 即使中途修改了值 那么它也会重最后的一个值 往下进行反向映射

声名合并

  • 如果定义了两个相同名字的函数、接口或类,那么它们会合并成一个类型
   接口合并

interface Alarm {
    price: number;
}
interface Alarm {
    weight: number;
}

     相当于:

interface Alarm {
    price: number;
    weight: number;
}

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

    函数合并(重载)

重载允许一个函数接受不同数量或类型的参数时,作出不同的处理

      案列:

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('');
    }
}

// 前面个两个erverse函数表示调用时限制 如果传入的时string那么返回的就是string 传入的nunber返回的就是number 。 在调用reverse时不同数量或类型的参数时,作出不同的处理

官方学习文档 查看详情内容

举报

相关推荐

TS基础知识

基础知识

编程的基础知识

less 的基础知识

树的基础知识

vue 的基础知识

0 条评论