TS学习随笔

佚名 / 2024-02-21 / 原文

1，ts是什么

TypeScript 是 JavaScript 的超集，这意味着它可以完成 JavaScript 所做的所有事情，而且额外附带了一些能力。
Typed JavaScript at Any Scale. 它强调了 TypeScript 的两个最重要的特性——类型系统、适用于任何规模。

JavaScript 本身是一种动态类型语言，这意味着变量可以改变类型。从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。

使用 TypeScript 的主要原因是就是为了给 JavaScript 添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能改变。

2，TS基础

数据类型

javascript有七种原始数据类型，布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型 BigInt

就是再原始js变量上面增加个类型这是基本类型

let 变量名：数据类型 = 值

let isFlag: boolean = false; //布尔值

let name: string= '景天';

let age: number = 6;

数组

数组也是没有太大区别的，只是加了类型。数组定义后，数组内的数据类型必须和定义数组的时候的类型是一致的，否则会有错误提示，某些情况下不会编译通过。

写法1： let 变量名：数据类型[] = [值1,值2,值3]

写法2： let 变量名： Array<数据类型> = [值1,值2,值3]

 1 // 数组
 2 let lists: number[] = [1, 2, 3, 4, 5] // 如果此处没有写数值类型，而是别的，会直接报错，其他的写法也类似，前面定义了类型后面写的类型不对就会报类似的错误   不能将类型“string”分配给类型“number”。
 3 // console.log(lists, '1, 2, 3, 4, 5')
 4 
 5 let listString: string[] = ['1', '2']
 6 // console.log(listString, "'1', '2'")
 7 let listArray1: Array<number> = [1,2,3,4,5]

let lsitArray2: Array<number | string> = [1, 2, '2']

 8 let listObj: object[] = [
 9   { name: '张三', age: 6 },
10   { name: '李四', age: '9999' }
11 ]
12 // console.log(listObj, '=============')
13 // 这里的any 表示可以是任意类型，(有人说在ts代码中全部写any就成了js)
14 let listany: any[] = [1, '2', false, {}, function () {
15   return false
16 }]
17 // console.log(listany, '=============')
18 // 这里的代码表示可以是多个类型，不一定是单一的。也不需要按照对应的位置，比如说我先写的 number ，数组的索引0就必须是number类型，这是错误的
19 let listSome: (number | string | boolean | Function | object)[] = [1, '2', false, {}, function () {
20   return false
21 }]
22 listSome.push(NaN)
23 // console.log(listSome, '=============')

元组

元组概念在js中是没有的，一个新的概念用于表示一组固定数量的不同类型元素的有序集合。

一种特殊类型的数组，元组，他比常规数组更严格

写法 let 变量名： [类型1，类型2] = [值1，值2]

值1的类型需要与类型1相同，若不同会报错值2也一样需要相同

1 // 元组
2 let listTuple: [boolean, string] = [false, '1']
3 // listTuple.push(true) // 元组说是有长度限制，为什么能push成功，并且不报错，这不就是相当于元组没有长度限制了？？？
4 listTuple.push('12')
5 listTuple[0] = true
6 console.log(listTuple, '=============')

编译后js代码

1 // 元组
2 var listTuple = [false, '1'];
3 // listTuple.push(true) // 元组说是有长度限制，为什么能push成功，并且不报错，这不就是相当于元组没有长度限制了？？？
4 listTuple.push('12');
5 listTuple[0] = true;
6 console.log(listTuple, '=============');

在我看来元组还是数组，所以说数组的方法也能用，如push 并且push类型没有错误，所以说编译时候没有报错

转换成js时候没有元组概念，变成了普通数组，所以说能正常运行

（若是有大佬看到这个问题，麻烦留言一下我理解的是否正确。万分感激）

对象

对象需要用关键字 interface 来定义

interface 定义的对象有几个属性，在 let 时候就需要有几个，否则会报错，

 1 // 对象
 2 interface person {
 3   name: string,
 4   age: number,
 5   sex: string,
 6   weight: number|string, // 这里可以多写类型，同样的在下边就可以多接受一种类型

 7   isGood: boolean,
 8 }
 9 let personOne: person = {
10   name: '景天',
11   age: 24,
12   sex: '男',
13   weight: 150,
14   isGood: true // 如果这里少了某个属性，会报语法错误，意思就是这个对象少了某个属性
15 }
16 // console.log(personOne);
17 
18 interface Animal {
19   name: string,
20   eat(name: string): string;     // 普通函数
21   speak: (name: string) => string;   // 箭头函数
22 }
23 
24 let catAnimal: Animal = {
25   name: '1',
26   eat: function (name: string) {   // 这里就是一个key为eat的函数属性？
27     return name
28   },
29   speak: (name) => name
30 }
31 // catAnimal.eat('banan')
32 // console.log(catAnimal.eat('apple'));
33 // console.log(catAnimal);
34 // console.log(Object.keys(catAnimal));

函数

在ts中函数并没有什么特别得地方，还是类型问题，在形参后边添加上数据类型就可以了。

有一点就是在函数括号后边可以添加返回得数据类型。

 1 let fun = function (v1: number = 2) {
 2   return v1
 3 }
 4 console.log(fun(3));
 5 let foo = (r: number): string => {
 6   return '' + Math.PI * r
 7 }
 8 // console.log(foo(4));
 9 let add = (a: string, b: number, c?: string | number | boolean) => {
10   return `名字叫${a}的人，今年${b}岁了。拥有${c}`
11 }
12 // console.log(add('jack', 23, false));