typescript学习
1.安装typescript
npm install -g typescript
2.webstrom中怎么自动运行typescript
参考https://blog.csdn.net/qq_36255237/article/details/98055686
3.基础类型
见教程
https://www.tslang.cn/docs/handbook/basic-types.html
主要不一样的是定义的时候
比如布尔类型
//javascript
let isDone = false
//typescript
let isDone: boolean = false;
-
数组
第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型，Array<元素类型>：
let list: Array = [1, 2, 3];
注意：数组里面的类型只能是前面定义的类型，比如定义为number数组中就不能出现string类型
-
元组Tuple
元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。
// 定义一个元组string和number类型
let x: [string, number];
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
//顺序不能错当访问一个越界的元素，会使用联合类型替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型-
枚举enum
enum类型是对JavaScript标准数据类型的一个补充
enum Color {Red, Green, Blue}
let c: Color = Color.Green; //c为1
//手动指定成员的数值
enum Color {Red = 1, Green, Blue} //从1开始编号而不是0
let c: Color = Color.Green; // c为2
//全部手动赋值
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green; //c为2
//枚举类型提供的一个便利是你可以由枚举的值得到它的名字
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
console.log(colorName); // 显示'Green'因为上面代码里它的值是2
-
any
当不知道定义的变量的类型时可以定义为any
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean当你只知道一部分数据的类型时，any类型也是有用的。
let list: any[] = [1, true, "free"];
list[1] = 100;-
void
主要是当一个函数没有返回值的时候，定义的返回类型
function warnUser(): void {
console.log("This is my warning message");
}-
object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。
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-
类型断言
通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。 类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。
一是“尖括号”语法：
let someValue: any = "this is a string";
let strLength: number = (someValue).length; 另一个为as语法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;4.接口
对值所具有的结构进行类型检查
- 简单示例
//定义一个接口，LabelledValue 代表了有一个 label属性且类型为string的对象
interface LabelledValue {
label: string;
}
//接收的对象必须拥有一个label属性且类型为string
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);// 打印内容Size 10 Object- 可选属性
接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。
可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。
//color属性和width属性都是可选的，可以传值或者不传值
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): {color: string; area: number} {
let newSquare = {color: "white", area: 100}; //默认color：white，area：100
//如果color有传值，color就是传来的值
if (config.color) {
newSquare.color = config.color;
}
//如果width有传值，area 就是width*width
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
let mySquare = createSquare({color: "black"});
console.log(mySquare) // 打印内容：{color:'black',area: 100}
let mySquare1 = createSquare({width: 20});
console.log(mySquare1) // 打印内容：{color:'white',area: 400}
- 只读属性
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:
interface Point {
readonly x: number;
readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
//赋值后， x和y再也不能被改变了。
p1.x = 5; // error!- 额外的属性检查
- 函数类型
接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。
为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。
// 括号里是传过来的参数的定义，最后返回值是一个boolean类型
interface SearchFunc {
(source: string, subString: string): boolean;
}
//像使用其它接口一样使用这个函数类型的接口，作用是判断有后面的字符串是否在前面字符串中存在
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
let result = source.search(subString);
return result > -1;
}
//最后返回的是布尔类型，存在就是true不存在就是false
console.log(mySearch('1234565555','555'))- 可索引的类型
与使用接口描述函数类型差不多，我们也可以描述那些能够“通过索引得到”的类型，比如a[10]或ageMap["daniel"]。 可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。 让我们看一个例子：
//这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。
interface StringArray {
[index: number]: string;
}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];
console.log(myStr)// Bob- 类类型
- 继承接口
- 混合类型
- 接口继承类