TypeScript学习笔记一、基础类型

90 阅读4分钟

1、基础类型

基础类型:boolean、number、string、null、undefined、Symbol(ES6)、BigInt(ES10)

1.1 字符串类型 string

// 普通声明
let s:string = "Hello world!";
// 模板声明
let s1:string = `hi, ${s}`;

1.2 数字类型 number

数字类型支持十六进制、十进制、八进制和二进制;不区分整数,负数,浮点数

let num:number = 1314.20;
let num2:number = 0b1010; // 二进制
let num8:number = 0o744; // 八进制s
let num10:number = 6; // 十进制
let num16:number = 0xf00d; // 十六进制
let numNan:number = NaN;
let numInfinity:number = Infinity; //无穷大

1.3 布尔类型 boolean

let b1:boolean = true;
let b2:boolean = false;

boolean与Boolean的区别:使用构造函数Boolean创造的是布尔对象不是布尔值

let boolObj: Boolean = new Boolean(0);
let bool:boolean = new Boolean(1); // Type 'Boolean' is not assignable to type 'boolean'.  'boolean' is a primitive, but 'Boolean' is a wrapper object. Prefer using 'boolean' when possible.

1.4 空值类型 void、null、undefined类型

// js没有空值void的概念,在ts中,可以用void表示没有任何返回值的函数
function Fn(): void{
    console.log("没有返回值的函数");
}
let a:undefined = undefined; // 定义
let b:null = null; // 定义

undefined、null是所有类型的子类型。 意思是undefined类型的变量,可以赋值给string类型的变量。

let v:void = undefined;
let u:undefined = undefined;
let n:null = null;
let s:string = "1";

s = v; //Type 'void' is not assignable to type 'string'.
s = n;
s = u;

void主要是用在不希望调用者关心函数返回值的情部分下,比如通常的异步回调整函数 void可以被赋值undefined,在ts宽松模式下,可以被赋值null

{
    "compilerOptions":{
        "strict": true
    }
}
let v:void = null; // strice:false可以
let o:void = undefined;

2、任意类型any、unknown顶级类型 unknown不知道类型

any类型任意类型,可以对any类型做任何操作,不需要检查类型,所有的类型的都可以赋给any变量的类型

let any:any = 888; 
any = "hello, tom.";
any = true;
any = null;
any = undefined;
// 声明变量时没有指定类型即默认是any类型
let anys1;
// ....

tips. 大量使用any类型,则ts失去的其类型检测的作用,还不如用js。部分情况下是需要使用到any类型的,如接口返回的数据,前端确实是不知道其类型,这时候就可以使用any类型。

ts3.0中引入unknown类型也被认为是顶级类型,unknown比any类型更安全,unknown与any类型一样,所有类型都可以赋值给unknown类型,unknown类型不能赋值给其他类型。

let v:unknown;
v = false;
v = 88;
v = "hell world";
v = null;
v = undefined;

// unknown是向下兼容的,但是不能越俎代庖 拿子类型去赋值unknown类型,unknown可赋值对像只有any、unknown
let un:unknown = "hello!";
let s:string = un; // Type 'unknown' is not assignable to type 'string'.

let any:any = 666.66;
any = un; // OK

// 区别2 any类型可以调用获取未定义的属性
let obj:any = {key: "value"};
console.log(obj.name); // undefined

// unknown则调用会报错
let objUn: unknown = {name: "test", fn:()=>void};
objUn.key; // Property 'key' does not exist on type 'unknown'.
objUn.fn(); // Property 'fn' does not exist on type 'unknown'.


// 1. any 顶级类型 可随意赋值和被赋值
// 2. unknown; 顶级类型 只能赋值给自身或any类型 无法读取属性性和方法
// 3. Object;
// 4. Number String Boolean
// 5. number string boolean null undefined
// 6. 88 "test" true
// 7. never

3、Object object {}类型

Object: 原型链的顶端是Object 相当于任意类型

let Obj:Object = [] | "¥¥" | 88.88 | {}; // OK

object: 泛型约束,可以赋值所有的引用类型

let obj:object = [] | {} | ()=>void;

{}:字面量 new Object

// 同Object
// 无法修改与扩展
let obj: {} = {name: "tom"};
obj.age = 16; // error

4、接口interface(定义一种约束)对象类型

在ts中定义对象的方式是要用关键字interface(接口)来定义对象的约束,让对象的结构满足约束的格式

// interface常规 不能多不能少 必需与接口高度一致
// 命名规则 首字母大写
interface Dog{
    name: string,
    color: string
};

const mydog:Dog = {
    name: "欧元",
    color: "yellow"
}

// interface重名 重合
interface Dog{
    sex: boolean
}
const youDog:Dog = {
    name: "币币",
    color: "while",
    sex: 0
}

// interface任意key 索引签名
interface Friend{
    name: string,
    age: number,
    [propName: string]: any // 类型需优先所有明确字段的类型
}

const grilFriend:Friend = {
    name: "小芳",
    age: 16,
    gender: 1
}

// interface ?可选 readonly只读
interface SelectReadonly{
    key1: string,
    key2: number,
    key3?: boolean,
    readonly key4: string
}

const obj: SelectReadonly = {
    key1: "tom",
    key2: 18,
    key4: "No.6688",
}

// obj.key3可以不赋值 
obj.key4 = "No.2255"; // Cannot assign to 'key4' because it is a read-only property.

// interface 接口继承 extends
interface SmallFriend extends Friend{
    contry: string
}

const smallFriend: SmallFriend = {
    name: "二狗",
    age: 6,
    contry: "粤"
}

// interface 定义函数类型
interface Fn{
    (name:string):number
}

const GetAge:Fn = (name:string)=>{
    return 6
}

5、数组类型

// 常规数组
let arr:string[] = ["a", "b", "c"];
// 泛型定义
let arr:Array<string> = ["a", "b", "c"];
// 对象数组
interface Arr{
    label: string,
    value: any
}
let arr: Arr[] = [{label: "", value: ""},{label: "", value: ""}];
let arr:Array<Arr> = [{label: "", value: ""},{label: "", value: ""}];

interface NumberArr{
    [index:number]:number
}
let arr2:NumberArr = [3,4,5,6,7,8];

// 二维数组
let arr2: number[][] = [[1,2,3], [4,5,6]]
let arr2: Array<Array<number>> = [[6,7,8],[9,0,1]];

// 元组类型数组
let arr:[string, number, boolean] = ["tom", 88, true];
let arr:any[] = ["tom", 88, true];

arguments类数组

function arr(...args:any):void{
    console.log(arguments); // [object Arguments]
    // arguments是类数组不能这样定义
    let arg:number[] = arguments; // Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 26 more.
    // IArguments是ts内置对象
    let arg1:IArguments = arguments;
}

arr(666,888,999);

//IArguments源码
interface IArguments{
    [index:number]:any;
    length: number;
    callee: Function;
}