目录
参考网站
ts网站1-https://www.tslang.cn/docs/handbook/basic-types.html
ts网站2 -https://www.typescriptlang.org/docs/handbook/decorators.html
基础数据类型
布尔值
let isDone: boolean = false;
数字
let decLiteral: number = 6; // 10进制
let hexLiteral: number = 0xf00d; // 16进制
let binaryLiteral: number = 0b1010; // 2进制
let octalLiteral: number = 0o744; // 8进制
字符串
let name: string = "bob"; // 正常写法
let age: number = 37;
let sentence: string = `my name is ${ name }.
I'll be ${ age + 1 } years old.`; // 支持模版字符串
固定的字符串
let isDone: 'haha' = 'haha'; // 只能是这一个对应的字符串
数组
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // 泛型写法，Array<元素类型>
特殊的数据类型
any
包含所有的数据类型。
当数据类型不确定的时候，更多是因为想确定每个数据类型的时候太麻烦的时候，才使用这个。
这个最好不要频繁使用，会导致后面关联的数据也要写成Any或者使用断言之类的。
使用非常频繁，就没有使用ts的必要了。
let list: any[] = [1, true, "free"];
list[1] = 100;
unknown
和 any 相似，unKnown也表示任何值，同样属于「安全类型」，任何类型都可以赋给 unknown，但是TypeScript会要求再做检查，细化类型。unknown类型的值可以比较（使用==、===、||、&& 和 ?），与其它类型一样，可以使用JavaScript的typeof和instanceof运算符细化。
let a: unknown = 30 // unknown
let b = a === 123 // boolean
let c = a + 10 // Error: Object is of type 'unknown'
if (typeof a === 'number') {
let d = a + 10 // number
}
const getName = () => {
let x: unknown;
return x;
};
const name = getName();
console.log((name as string).toLowerCase());
TypeScript不会把任何值推导为unknown类型，必须显示注解。并且执行操作时不能假定unknown类型的值为某种特定的类型，必须先向TypeScript证明这个值确实是某个类型。
void
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。
一般使用在函数的返回值，函数没有给返回值的话，默认返回undefined。
相当于undefined ，但是不能把null赋值给它。
function warnUser(): void {
console.log("This is my warning message");
}
null 和 undefined
这两个没啥大用，一般用不上。
let u: undefined = undefined;
let n: null = null;
never
never类型表示的是那些永不存在的值的类型。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
interface A { type: 'a' }
interface B { type: 'b' }
type All = A | B
function handleValue(val: All) {
switch (val.type) {
case 'a':
return val // val 被收窄为 A
case 'b':
return val // val 在这里是 B
default:
const defaultValue: never = val; // val 在这里是 never
return defaultValue;
}
}
object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
使用object类型，就可以更好的表示像Object.create这样的API。
一般不要使用这个，有什么对应的键值对直接写出来。
可以替代的写法：
// 可以替代的写法
const obj: {
a: number;
[key: string]: any; //这里的key用任何的字符串都可以替代
} = {
a: 1,
b: true,
}
下面是object的使用方法:
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
let a: object = {
b: 'x',
};
a.b // Error: 类型“object”上不存在属性“b”。
Tuple 元组
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
let x: [string, number];
x = ['hello', 10]; // OK
// 这种eslint会爆红，说没有修改过的数据要用const声明
x = [10, 'hello']; // Error
当访问一个已知索引的元素，会得到正确的类型：
console.log(x[0].substr(1)); // OK
console.log(x[1].substr(1)); // Error
当访问一个越界的元素，会使用联合类型替代
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
类型断言
当你非常确认这个数据是什么类型的时候，可以使用这个断言。
比如这个数据原本是any的数据类型，但是你确定这里是一个字符串，你要使用字符串的方法这里会报错，就可以使用断言。
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
第一种使用尖括号的方法：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
第二种使用as的方法：
let someValue: number | string = "this is a string";
let strLength: number = (someValue as string).length;
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。
enum 枚举
感觉就像js中声明了一个对象一样
enum Color {
pink, // 0 默认第一个对应0
Red = 'a', // 'a' 这个手动分配了字符串，下一个必须手动分配
Green = 1, // 1 因为上一个对应的不是数字，不手动分配会报错
Blue, // 2 因为上一个对应的是数字，默认分配上一个数字 +1
orange = 1，// 1 可以重复分配，但是获取的是最后一个
black, // 2 因为上一个对应的是数字，默认分配上一个数字 +1
pink = 10, // Error 这里的名字和上面重复了，会导致上面也会报错
'Red' = 10,// Error 这里的名字和上面重复了，会导致上面也会报错
123 = 5， // Error 这里的名字是数字
'123' = 5, // Error 这里的名字也会判断为是数字
}
// 去掉报错的不看
let c: Color = Color.Green;
console.log(c) // 1
c = Color[1]
console.log(c) // orange 如果是拿对应的值，会拿最后一个对应上的
接口(interface)
我理解这个相当于一个object的一种写法，但是这个不等于object
这个接口不是从后端拿数据的接口,是定义数据类型的一个集合。
/**
* @description 这里写参数的解释
* @type 这里写参数的数据类型
*/
正常情况
这上面的注释只是写项目的时候最好写，不写也行，因为ts一般是造轮子的时候用，写这个可以让后面接收项目的人知道这个参数是干嘛的。
// 这里DialogConfig相当于这个接口的名字，首字母要大写
interface DialogConfig {
/**
* @description 弹框的颜色
* @type String
*/
color: string;
/**
* @description 弹框的宽度
* @type Number
*/
width: number;
}
let prop: DialogConfig = {
color: 'red',
width: 20,
};
一些特殊字符和字符串的使用
interface DialogConfig {
name: undefined | 'Dialog' | number;
// 这里的 '|' 表示这个属性可以是那些数据类型
color?: string;
// 这里的问号表示这个属性“可以不存在”，相当于写了一个undefined的数据类型(string | undefined)
readonly width: number | string;
// 这里的readonly表示这个属性是“只读”的，不能修改
}
let prop: DialogConfig = {
width: 20，
};
prop.width = 5; // error! “只读”的，不能修改
函数类型
interface Onclick {
(value: boolean): boolean;
}
interface DialogConfig {
onclock: Onclick;
color?: string;
width?: number;
}
let prop: DialogConfig = {
onclock: (value) => {
return value
}，
};
在项目中发现的一种函数写法：
interface DialogConfig {
onclock?: (value: boolean) => boolean;
color?: string;
width?: number;
}
let prop: DialogConfig = {
onclock: (value) => {
return value
}，
};
可索引的类型
与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap[“daniel”]。 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。
interface StringArray {
[index: number]: string; // 这里的index改成任何的字符串都可以
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0]; // 这里的0对应上面的index这个字符串
同时，对于对象也是可以对应的：
interface StringArray {
name: string;
age: number;
isMan?: boolean;
[name: string]: string | number | boolean; // 这里的数据类型必须包括上面写的所有数据类型,undefined可以不用写
}
let myObj: StringArray;
myObj = {
name: '张三',
age: 18,
time: '12:00',
};
类类型
感觉可以不用写，不写也不会报错
implements：是关键词
接口描述了类的公共部分，而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。
interface ClockInterface {
currentTime: Date;
}
class Clock implements ClockInterface {
currentTime: Date;
constructor(h: number, m: number) { }
}
8472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
