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'.
类型断言
有时候,你比编译器更确信某些值的使用场景,或用途。编译器会假设你写的时候已做过类型校验
- as 语法
- 尖括号语法
(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;