TS学习笔记（1）

标签：string TS 笔记 number 学习 let 类型 报错

TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。

TS是出现是为了面对JS这个弱类型语言，无法是编译的阶段就发现问题 TS的出现可以改变这个现象

在编译阶段就进行类型检查，提早发现错误。

TS的作用是如果你的代码写的同声明的类型不一样，或者你没有按照规定的要求传参等，就会给你一个不按预期执行的警告，会对代码进行报错，像不像JAVA 我一开始写JAVA的时候页面经常是这边红一篇 那边红一篇 但是写JS到不会这样 通常出现的话也是我的语法写的有错误。但是TS不同于JAVA会让直接编译不通过，它的主要工作是转译。

我们写TS的时候 会写.ts后缀名的文件 这里写TS代码 但是最终这个文件他会转译成JS代码

他并没有把一个语言变成另一个语言 TS的本质还是JS 你可以理解为换一个方法写JS。

现如今的vue和react 都开始全面的拥抱和支持TS

大势所趋 现在这个东西不学都不行了

其实很多的并不知道强类型到底是什么

我刚刚开始学计算机的时候 就是接触C语言的时候声明一个变量 

int a 
a = 12 这样就是对的
a = 1.2 这样就错了 会报错

但是js里面没有那么严格

var a = 10
a = 'abc'
consloe.log(a) // 'abc'

这里就是和上面一样 a 只能是字符串类型的 而一开始就提示错误就是为了把罪恶扼杀在摇篮里

JS的八种内置类型

• 字符串（string）
• 数字（number）
• 布尔值（boolean）
• 未定义（undefined）
• 空值（null）
• 对象（object）
• 大整数（bigInt，ES6 新增）
• 符号（symbol，ES6 新增）

对照ts一一对应

let name: string = "bob";
let age: number = 37;
let isDone: boolean = false;
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let bigLiteral: bigint = 100n;
let sym: symbol = Symbol("me"); 

与此同时 TS还增加的两个新的类型

1.any

any可以表示任意的类型，一个变量设置类型为any后相当于该变量关闭了类型检查

与此同时 我们平时在TS中随便写一个比如 let a

这个没有被定义类型的a其实也有一个默认类型 就是any 谁都可以给他赋值

在使用ts的适合尽可能避免使用any类型

 

let d
d = 10
d = 'abc'
d = 'true'

 

根本不会报错

2.unknown 用英语的本意来理解就是未知的意思 在js中也差不多一个意义

unknown的本质是一个安全的any

用法其实和any有些像

你比如

 

let e : unknown

e = 123
e = 'abc'
e = true

 

但是any 和unknown有一个很大的区别

任何类型的值可以赋值给any，同时any类型的值也可以赋值给任何类型。unknown 任何类型的值都可以赋值给它，但它只能赋值给unknown和any

 

let e : unknown

e = 123
e = 'abc'
e = true
c = e   //会报错

 

因此如何我们要对使用unknown进行操作 那么就要学着去缩小类型

这样可以不报错 

if(typeof e === "boolean")
{
  c = e
}

 

同时还可以使用类型断言的办法进行缩小类型

 

// 类型断言 告诉e就是布尔值 这样就不会报错
// 可以告诉解析器变量的实际类型
c = e as boolean
c = <string>e
// 语法 变量 as 类型
// <类型>变量

 

let boom :{name:string,age:number}

boom = { name:'孙悟空',age:18}
boom = {}如果是空的也会报错

 

属性名后面加一个?表示可选属性 不然就是必选

 

下面这样会报错

let boom :{name:string,age?:number}

boom = { name:'孙悟空',age:18}

 

[propName: string]: any 表示可以多余任意类型的属性

let come:{name:string,[propName:string]:any};
come ={name:'猪八戒',sex:18,gender:'男'};

//如果是string则必须接字符串
let come:{name:string,[propName:string]:string};
come ={name:'猪八戒',sex:18,gender:'男'};

 

propName同理 这里是定义的名字 如果是string的话也必须使用string 使用其他的会报错

Function函数

设置函数结构的类型声明

语法：(形参：类型，形参：类型...) =>返回值

函数的声明

 

function sum(x: number, y: number): number {
    return x + y;
}

 

函数表达式

 

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
}; 

 

使用的参数要和声明的符合

 

// 符合就不报错
let data : (a:number,b:number) =>number;
data = function(n1,n2):number
{
    return n1 + n2
}

不符合则报错

多了一个n3报错

let data : (a:number,b:number) =>number;
data = function(n1,n2,n3):number
{
    return n1 + n2
}

 

同样可以使用可选参数 ？ 使用的?就不是必须需要的参数了

 

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

 

利用...符号填入多个参数

 

function buildName(firstName:string,...items:any)
{
  return firstName + items
}
let acc  = buildName('Tom','Jerry',123)

 

TS对于他们也一样会和基本数据类型一样

元素类型[]
let list:number[] = [1,2,3]
array<元素类型>
let list:Array<number> = [1,2,3]
只有符号写的类型的数组元素才不会报错

 

TS可以定义指定成员对象的数组

 interface MyArr
{
    name:string
    age:number
}
let arr1:MyArr[] = [{name:'兔兔',age:18},{age:18,name:'囡囡'}]

 

TS可以定义联合类似的数组 上面的都往往一个数组就规定死了 只有一种类型要不是string 要不是number

let arr2:(number | string)[]
 arr2= [1,2,3,4,5,'1','2']

除了数组

TS还有元组这个新的概念

Tuple元组 这个东西是js中是没有的

我是这里理解元组的 一个被严格限制的数组

元素是可以去限制数组的个数和数组的类型 他特别适合来实现多值的返回

 

let x:[string,number]
x = ['hello',10] //true
x = ['hello'] //false
x = [10,'hello'] //false

 

从这里我们可以知道 Tuple元组里面对于数组 已经是把每一个元素的类型 以及到底要几个元素给严格限制了

与此同时 元组也支持解构赋值访问元素

 

let employee:[number,string] = [1,'abc']
let [id,username] = employee
console.log(`id:${id}`);
console.log(`username:${username}`);

 

以上代码运行之后得到如下效果

id:1

username : abc

元组中有些元素也是可选的

let optionalTuple :[string,boolean?]
optionalTuple = ["abc",true]
optionalTuple = ['acc']

 

如上图中的 在布尔后面挂了一个？

下面的optionalTuple就不一定要完全按照元组规定的来了 布尔值可填可不填

Void表示没有任何类型，和其他类型是平等关系，不能直接赋值

let a: void; 
let b: number = a; // Error

你只能为它赋予null和undefined（在strictNullChecks未指定为true时）。声明一个void类型的变量没有什么大用，我们一般也只有在函数没有返回值时去声明。

值得注意的是，方法没有返回值将得到undefined，但是我们需要定义成void类型，而不是undefined类型。否则将报错:

 

// 这里会报错
function fun(): undefined { 
    console.log("this is TypeScript");
  };
  fun(); 

never 表示没有而且永远没有返回结果，没有值，通常用于返回错误的结果

// 异常
function err(msg: string): never { // OK
  throw new Error(msg); 
}

 

还有一种情况是陷入的死循环

 

function err1(msg:string):never
{
    while(true) {}
}

 

Enum枚举类型

枚举是一个被命名的整型常数的集合，枚举在日常生活中很常见，例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就是一个枚举

枚举是一种数据结构，使用枚举我们可以定义一些带名字的常量，清晰地表达意图或创建一组有区别的用例。 TS支持数字的和基于字符串的枚举

 

enum Gender
{
    Male,
    Female,
}

let i : {name:string,gender:Gender}
i = {
    name:"孙悟空",
    gender:Gender.Male
}
console.log(i.gender === Gender.Male);

 

枚举成员会被赋值为从 0 开始递增的数字，我们可以像访问对象属性一样访问枚举成员：

console.log(Gender.Male) 0
console.log(Gender.Female)1

 

标签：string,TS,笔记,number,学习,let,类型,报错
From： https://www.cnblogs.com/tomxiao/p/16586588.html