TypeScript-1

Posted 2021-01-20 yuesu

一、基础

1. 原始数据类型：boolean,number,string,undefined,null,Symbol

let isDone:boolean=true;
let num:number=6;
let str:string=‘asd‘;
let u:undefined=undefined;
let n:null=null;
// 空值 ，用void表示没有任何返回值的函数
function test():void{
   alert(‘122‘);
}
// void 类型的变量只能赋值为 undefined 和 null
let unusable:void=undefined;

// undefined,null是所有类型的子类型，可以赋值给其他类型的变量
num=null;
console.log(num);//null

2.任意值

任意值用来表示允许赋值为任意类型

//1. any类型，允许被赋值为任意类型，
let num:any=7;
num=‘123‘;

// 2.声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

let obj:any={};
obj.name=‘11‘
console.log(obj.name);

// 3.变量如果在声明的时候，未指定其类型，会被识别为任意值类型
let a;
a=‘bbb‘;
a=1111;//success

let str=‘aaa‘;
str=123;//error 类型错误

 

3. 类型推论

   如果没有明确的指定类型，TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型。

let str=‘aaaaa‘;//等价于 let str:string=‘aaaaa‘;
str=123;//error

// 如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：
let num;
num=‘aaa‘;
num=111;//success

 4.联合类型

取值可以为多种类型的一种

// 1.联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：
let str:string|number;
str=‘abc‘;
console.log(str.length);//3
str=123;
console.log(str.length);//error: Property ‘length‘ does not exist on type ‘number‘

//2. 只能访问此联合类型的所有类型里共有的属性或方法：
function test(params:string|number):string{
    return params.toString();
}

 

 5.对象的类型--接口

使用接口来定义对象的类型

接口：可用于对类的一部分行为进行抽象，也用对 对象的形状进行描述

 

//1.接口一般首字母大写,赋值的时候，变量的形状必须和接口的形状保持一致
interface Person{
    name:string;
    age:number;
}
let test:Person={
    name:‘sy‘,
    age:12
}
// 2.可选属性 ?:属性可以不存在,但是不允许添加未定义的属性
interface Person{
    name:string;
    age?:number;
}
let test:Person={
    name:‘123‘,
    color:‘red‘//error ... ‘color‘ does not exist in type ‘Person‘.
}

// 3.任意属性
interface Person{
    name:string;
    age?:number;
    [propName:string]:any;

}
let test:Person={
    name:‘sy‘,
    color:‘red‘
}
// // 一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性：
interface Person1{
    name:string;
    age?:number;
    [propName:string]:string;//error:任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了

}

// 4.只读属性：readonly

interface Person{
    readonly id:number;
    name:string;
    age?:number;
    [prop:string]:any;
}
let test:Person={
    id:123,
    name:‘sy‘,
    sex:‘woman‘
}
test.id=11;//error:Cannot assign to ‘id‘ because it is a constant or a read-only property.

// 只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

let person:Person={
    name:‘aa‘,// error:Property ‘id‘ is missing in type ‘{ name: string }‘
}
person.id=11;//error:Cannot assign to ‘id‘ because it is a constant or a read-only property.

 6.数组的类型

//1. 使用「类型 + 方括号」来表示数组

let arr:number[]=[1,2,3];

// 数组中不允许出现其他类型
let arr1:number[]=[1,2,3,‘a‘];//error: Type ‘string‘ is not assignable to type ‘number‘.

let arr2:(number|string)[]=[1,2,3,‘a‘];//联合类型

// 2.使用数组泛型 Array<elemType> 来表示数组：

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

// 3.用接口表示数组

interface NumberArray{
    [index:number]:number;
}
let arr1:NumberArray=[1,2,3];

// 4.any 表示数组中允许出现任意类型
let list:any=[1,‘asas‘,{name:‘sy‘}];

// 5.类数组

// 常见的类数组都有自己的接口定义，如 IArguments, NodeList, htmlCollection 等：
function sum(){
    let args:IArguments=arguments;
    let arr:number[]=arguments;//error:Property ‘push‘ is missing in type ‘IArguments‘.
}