typescript学习笔记

变量声明

1. 与js相同，使用var、let或const等; 思考：所有变量声明的方式；

2. 声明变量指定类型(任意类型都可)，这样的变量赋值时只能使用指定类型的值，以达到强类型语言变量的特点及其优点；

//string
var names:string = 'sw'
//number
var age:number = 23;
//bollean
let flag:boolean = true;
flag = 23;//编译出错

基础类型

注：这里的基础是指普通的、常规的、内置的的意思；不是JS里面所说的基础类型和引用类型。

一、布尔值

最基本的数据类型，只有简单的true/false两个值，在JS和TS里叫做 Boolean。

let isLogin: boolean = false;
// 编译通过
// 后面约定，未强调编译错误的代码片段，默认为编译通过

let isLogin2: boolean = new Boolean(1);
//编译报错
//使用构造函数 Boolean 创造的对象不是布尔值

二、字符串

使用 string表示文本数据类型。 和JS一样，可以使用双引号（ "）、单引号（'）和反引号(`)表示字符串。总之，和JS的玩法一样。

let myName: string = 'karen';
let myAge: number = 25;

// 模板字符串
let str: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

三、数组

TS像JS一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。

let score:number[] = [1,20, parseInt('50')];
let fruit:Array<string|number> = ['apple', 'banana', 'pear', 20];
let arr1: number[] = [1, 1, 2, 3, 5];//正确
let arr2: number[] = [1, '1', 2, 3, 5];//错误
let arr3: number[] = [1, 1, 2, 3, 5];
arr3.push('8');//错误

let arr4: Array<number> = [1, 1, 2, 3, 5];//正确
let arr5: Array<string> = ["hello","h5"];//正确

四、元组Tuple

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。

//1.默认值
let tom: [string, number] = ['Tom', 25];
//2.通过下标赋值
let tom: [string, number] = ['', 0];
tom[0] = 'Tom';
tom[1] = 25;
//通过下标获取元组的元素并进行对应的操作
tom[0].slice(1);
tom[1].toFixed(2);
//3.越界操作
let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);//报错,当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型

//解构赋值
const lilei: [string, number] = ["Lilei", 23];
console.log(lilei);
const [myname, myage]: [string, number] = lilei;
console.log(myname, myage);

五、枚举

enum类型是对JS标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。

枚举类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射，也可以手动的指定成员的数值；

//性别 一般是存储为数字的
enum Gender {Secret, Male, Female};
console.log(Gender.Male);

//一周的每天
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days.Sun, Days.Mon, Days.Tue, Days.Sat);

console.log(Days["Sun"] === 0); // true
console.log(Days["Sat"] === 6); // true
//根据编号得到元素名
console.log(Days[0] === "Sun"); // true
console.log(Days[6] === "Sat"); // true

//商品的状态  可以手动设置初识值  或 每个都设置具体的值
enum orderStatus {Car=-1, Order, Payed, Deliver, Receive, Comment, Return};
console.log(orderStatus.Payed, orderStatus.Comment)

六、Any

有时需要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

七、Void

void，无效的，表示没有任何类型。 当一个函数没有返回值时，其返回值类型是 void；

function warnUser(): void {
    console.log("This is my warning message");
}

八、Null 和 Undefined

undefined和null两者各自有自己的类型undefined和null。 和 void相似，用处不大：

let a: undefined = undefined;
let b: null = null;
b=a  //undefined类型的数据不能赋值给null类型的变量
a = b;//null类型的数据不能赋值给undefined类型的变量
let c: number = 200;
a=c //数字字符串布尔值等等类型的数据不能赋值给undefined类型的变量
b = c;//数字字符串布尔值等等类型的数据不能赋值给null类型的变量
c = a;//undefined的数据不能赋值给数字字符串布尔值等等类型类型的变量
c = b;//null的数据不能赋值给数字字符串布尔值等等类型类型的变量

九、Never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

十、Object

object表示非原始类型，也就是引用类型，是除number，string，boolean，symbol，null或undefined之外的类型，可以使用"对象", "数组对象"、string、number等为其赋值，null和undefined不行的。 之所以Object变量可以接收任何对象，是因为Object是所有类的父类。

let a:Object = [1, 2, 3]
console.log(a);
a = {id:1, name:'小白'}
console.log(a); 
a = '{id:1, name:"小白"}'
console.log(typeof a); 

类型断言

有些时候，我们需要做一些“自己比编译器更清楚的知道自己在做什么”，这个时候就用到断言，告诉编译器：没错，就是这样的，就是要这么干。编译器也就假设：嗯，这个程序员已经进行了相关检查，不会有事的。

类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误。

语法: 值 as 类型 或者 <类型>值

类型断言有两种形式。 其一是“尖括号”语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

另一个为as语法：

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

接口

TS的核心原则之一就是对值所具有的结构进行类型检查。TS里面接口的作用就是为这些类型命名 和 为你的代码 或 第三方代码定义契约。

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了

interface SquareConfig {
  color?: string;
  width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
  let newSquare = {color: "white", area: 100};
  if (config.color) {
    newSquare.color = config.color;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"})