小白入手TS(二)---基本类型与定义interface

347 阅读4分钟

typescript 的基本类型

boolean,numbers,string,array,Tuple,Enum,Unkonw,Any,Void,null and undefined,never,Object,Type Assertions,

Boolean

let isDone: boolean = false;

numbers

所有ts中的数字都被认为是浮点类型或bigIntegers;除了十六进制和十进制文字,TypeScript还支持ECMAScript 2015中引入的二进制和八进制文字。

let decimal: number =6;
let hex: number = oxf00d;
let binary: number = 0b1010;
let octal: number 0o744;
let big :bigint = 100n;

string

let color: string = "red"
color = 'blue'

Array

array 有两种定义的方式

第一种 type[]

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

第二种 泛型

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

Tuple

元祖就是可用 “固定类型”的元素组合成一个数组的表达式。它限制了数组中每个的类型与数组的长度

let x: [string,number];
x = ['hello',1314]//OK
x = [1314,'hello']//error
报错:
Type 'number' is not assignable to type 'string'.
Type 'string' is not assignable to type 'number'.

// OK
console.log(x[0].substring(1));

console.log(x[1].substring(1));
Property 'substring' does not exist on type 'number'.

Try
Accessing an element outside the set of known indices fails with an error:

x[3] = "world";
Tuple type '[string, number]' of length '2' has no element at index '3'.

console.log(x[5].toString());
Object is possibly 'undefined'.
Tuple type '[string, number]' of length '2' has no element at index '5'.

Enum

枚举,能规范一组数据。在C#中,经常被用于数字型的枚举对象;枚举默认从下标0开始计数,当然可以手动更改;

enum Color{
Red = 1,
Blue,//2
Yellow//3
}

let c: Color = Color.Red

unknown

未知的属性,如动态传输的属性

let notSure: unkown = 4;
notSure = 'string'
notSure = false
declare const maybe: unknown

const aNumber: number = maybe;
Type 'unknown' is not assignable to type 'number'.

if(maybe == true){
	const aBoolean: boolean = maybe // right
    const aString: string = maybe //error
}

if(typeof maybe === 'string'){
	const aString: string = maybe;//right
    const aBoolean: boolean = maybe;//error
}

Any

有时,有些值我们需要不用类型检查,如三方库内的值,可使用any

declare function getVal(key: string): any;

const str: string = getVal('mystring')

any是一个强大的属性,以至于,你可以用any写ts像写js一样;和unknown不一样的是,TS不会对any类型的值校验其存在以及类型判断;


let anyType: any =4;
anyType.ifItExist(); // TS检查会通过,但编译就不能通过了;
anyType.toFiexed();//因为真实存在,可编译;但编译器就不会检查了;

let unknownType: unknown = 4;
unknownType.toFixed(); // 检查为number类型,所以通过

any 可通过对象传播

const anyObject: any = {}
let e = anyObject.a.b.c.d.e
//e 为 any

但毕竟所有的遍历都会以安全性作为代价,应该尽量避免

Void

有点和any相反,常用于函数的无返回

function Func(): void{
	console.log('func')
}

Null and Undefined

Null和undefined 都有自己独立的类型,但实际上他们代表的是没有值。默认情况下,他们是所有其他类型的子类,number类型可被复制null或undefined;

但在严格模式(--strictNullChecks)下他们只能被赋值给 Unknown和any;有一个例外,undefined 可以被复制给 被void定义的函数返回类型。Unions的声明方式是被推荐的。

Never

// Function returning never must not have a reachable end point
function error(): never{
	throw new Error('111')
}

Object

任何非js原始类型的类型可被定义为Object;如:非number,string,boolean,bigint,symbol,null,undefined;


declare function create(o: object|null): void;

create({prop:0})//ok
create(null)//ok


create(42);
Argument of type '42' is not assignable to parameter of type 'object | null'.
create("string");
Argument of type '"string"' is not assignable to parameter of type 'object | null'.
create(false);
Argument of type 'false' is not assignable to parameter of type 'object | null'.
create(undefined);
Argument of type 'undefined' is not assignable to parameter of type 'object | null'.

类型断言

有时候,你比编译器更确信某些值的使用场景,或用途。编译器会假设你写的时候已做过类型校验

  1. as 语法
  2. 尖括号语法
(window as any).Array
(<any>window).history

推荐使用小写版本;number,string,boolean,symbol,object

function reverse(s:String): String{
	return s.split("").reverse().join("")
}

//推荐

function reverse(s: string): string{
	return s.split("").reverse().join("")
}

function reverse(s: String): String {
  return s.split("").reverse().join("");
}

reverse("hello world");

Interface

抽象概念:定义一个值的形状。

可选属性

interface Student{
	name: string
    age?: number
}

只读属性

interface Student{
	name: string
    readonly sex: string
}

let arr: ReadonlyArray<number> = []

const vs readonly

定义变量时使用const,定义属性时 使用 readonly

接口含有其他任何类型的属性

interface Student{
	name: string
    [params: string]: any
}

函数类型

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

索引类型

interface StringArray{
	[index: number]: string
}

const arr: StringArray = ["str1","str2"]

class类型

interface People{
	age: number;
    setAge(ageNow: number): void
}

class Student implements People{
	age: number = 18;
   	setAge(age: number){
    	this.age = age
    }
    constructor(name: string,sex: string){}
}

extend

可拆分你的接口,可拷贝被extend 的interface中的成员属性

interface Vue{
	setup(props?: Record<string,any>,context?: unknown): void
}

interface VueVersion2 extends Vue{
	name: string
}

let vueInstance = {} as VueVersion2
vueInstance.setup()
vueInstance.name = 'vue'

Hybrid 混合式

interface Counter{
	(start: number): string
    interval: number;
    reset(): void
}

function createCounter(): Counter{
	let counter = function(start: number){} as Counter;
    counter.interval = 1
    counter.reset = function(){}
	return counter
}

let c = createCounter()
c(10)
c.reset();
c.interval = 5.0;