一. JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

二. Ts定义简单数据类型

变量名 : 类型 ---冒号后方为数据类型
类型为固定不可赋值其他类型

1.定义字符串类型

let str: string = "北京"  //北京
str = 123  //报错

2.定义数字类型

let num: number = 100  //100
num = '这是一段文字' //报错

2.定义布尔值类型

let flag: boolean = true //true
flag = 10 //报错

2.联合类型

多个类型使用( )括号包裹,使用 | 进行分割,括号内类型为该变量可赋值类型

let union : (string | number | boolean) = '联合类型'  //联合类型
union = 123  //123
union = false  //false

任意类型定义any类型,可以赋值任意数据类型,不建议使用

let arbitrarily: any
arbitrarily = 123
arbitrarily = 'str'
arbitrarily = false
arbitrarily = []

其他类型,如undefined、symbol等使用方法同上

三. Ts复杂数据类型

1. 对象类型

对象中定义的键值对类型必须对应定义类型,否则报错

let obj : { str: string; num: number } = { str: '这是一段文字', num: 88 }  
obj = { str:'文字', age:24 }  //报错

如果相同类型规则我们使用起来需要重复写出相同类型,此时就可以先定义后再调用 (图二为解决方案)

let obj : { str: string; num: number } = { str: '这是一段文字', num: 88 }  
let obj1 : { str: string; num: number } = { str: '这也是一段文字', num: 35 }

定义接口

interface User {
    name: string,
    id: number
}
let obj : User = { name: "张三", id: 18 }
let obj1 : User = { name: "李四", id: 36 }

对象内定义复杂数据类型

interface varied {
       arr: (string | number)[],
       form:{num : number; flag: boolean}
}
let obj2: varied = { arr: ['文字', 100], form: { num: 9,flag: true } }

2. 数组类型

// 规定为数字类型数组
//第一种方式
let nums: number[] = [1, 2, 3]  
//第二种方式
let nums1: Array<number>= [1, 2, 3]

3. 联合类型

let num2: (string | number)[] = ['str', 100, ' eve', 'cont']
let arr = [1, 'str', 'cont', 99]
let arr1 = ['字', '符', 666, '串']

4. 接口

使用type定义接口,可直接调用

type arrType = (string | number)[]
let newArr: arrType = [123, 'str','cont']
let newArr2: arrType = [666, '张三','李四']

使用interface定义接口, 需要通过implements调用

interface objType {
    name: string;
    age: number;
    address: string;
    run(a: number): string
}
class obj1 implements objType {
    name: '张三';
    age: 32;
    address: '上海';
    run(a) {
        return  '文字' + a
    }
}
class obj2 implements objType {
    name: '李四';
    age: 28;
    address: '北京';
    run(a) {
        return  '文字' + a
    }
}

5. 方法

数据类型后面为返回值类型,void为无参

//箭头函数
let fn = (num: number, str: string): number => {
    return num * 6
}
//普通函数
function fn1(num1: number, num2: number): number {
    return num1 + num2
}
//可选参数
let fn3 = (num?: number, arr?: string[]): void => {
    return
}

6.枚举

TypeScript 在 ES 原有类型基础上加入枚举类型，使得在 TypeScript 中也可以给一组数值赋予名字，这样对开发者比较友好，可以理解枚举就是一个字典。枚举类型使用enum来定义：

①. 数字枚举

enum Nums {
    top = 1,
    bottom = 2,
    left = 3,
    right = 4
}

上面定义的枚举类型的Nums，它有4个值，TypeScript会为它们每个值分配编号，默认从0开始，在使用时，就可以使用名字而不需要记数字和名称的对应关系了:

console.log(Nums.top);  // 1
console.log(Nums.left);  // 3

可以对一个字段指定一个索引值，那他后面没有指定索引值的就会依次加一：

enum Nums {
    top = 8,
    bottom ,
    left ,
    right
}
console.log(Nums.bottom); //9
console.log(Nums.left); //10
console.log(Nums.right); //11

除此之外，还可以给每个字段指定不连续的任意索引值：

enum Nums {
    top = 8,
    bottom = 32,
    left = 66,
    right = 93
}

②. 字符串枚举

TypeScript 将定义值是字符串字面量的枚举称为字符串枚举，字符串枚举值要求每个字段的值都必须是字符串字面量，或者是该枚举值中另一个字符串枚举成员：

// 使用字符串字面量 
enum Message { 
Error = "Sorry, error",
Success = "Hoho, success" 
}
console.log(Message.Error); // 'Sorry, error' 
// 使用枚举值中其他枚举成员 
enum Message { 
Error = "error message", 
ServerError = Error, ClientError = Error 
} 
console.log(Message.Error); // 'error message' 
console.log(Message.ServerError); // 'error message'

TS简单数据类型与复杂数据类型