|
|
TypeScript学习
| JavaScript | TypeScript | | 动态语言 | 具有静态语言的特点 | | 编译性语言运行时报错 | 编译期间报错 | | 若类型语言，没有类型 | 强类型语言，类似于java，c++等，定义时指明类型 | | 不支持模块、接口、泛型 | 支持模块、接口、泛型 | | 基本数据类型和引用数据类型 | 更多的基本数据类型和引用数据类型，如any，never，enum等 | | 在浏览器中直接执行 | 编译为js后才能在浏览器进行执行。 |
Ts的安装与配置
npm install -g typescript #安装ts
tsc --init #生成ts的配置文件。初次更改配置文件tsconfig.json
...
"rootDir": "./src", #编写代码的目录
...
"outDir": "./dist", #编译后的目录
...创建ts文件
console.log('hello world');对创建得ts文件进行编译
tsc ts文件名 #对所有ts结尾的文件要想在html中执行，需要向进行编译将其转化成js文件
tsc --outFile 转成的目标js文件 需要转换成的ts文件
# 在终端执行ts文件
npm install -g @types/node
ts-node ts文件Ts中的数据类型：
ts的基本类型
// 声明一个变量，同时指定得其类型为number
let a: number;
a = 10;
a = 20;
// a = 'nihao'; //当再次指定a为字符串得时候会报错。
// 声明一个变量为字符串，并直接指定为一个值
let b: string = 'hello';
// 声明一个变量为布尔类型
let c: boolean = true;
// 首次指定一个变量得名称，首次赋值，ts会自动检测，并指定默认得值
let d = 11111;
let a:null = null;
let qq: undefined = undefined;
let qq: symbol = Symbol();
// 在创建函数的时候指定类型，并且指定函数的返回值类型，防止在调用该函数的时候出现错误。
function sum(e:number, f: number): number{
const newLocal = e + f;
return newLocal;
}
let text = sum(1,4)
console.log(text);
// 创建字符串的类型
let mytest:string = "万丽霞"
// 定义模板字符串
let mystr: string = `Hello, I love you ${mytest}.`
console.log(mystr);
// 创建一个空值函数
function allterName(): void {
alert('text');
}
// 创建一个空值的变量
let mynull: void = null;
// 创建一个任意类型的变量,可以为变量赋值不同类型的值
let mytext01: any = '万丽霞';
mytext01 = 20;
console.log(mytext01);TS任意值
任意值（Any）用来表示允许赋值为任意类型。
如果是普通类型，在赋值过程中改变类型是不被允许的。
// 创建一个任意类型的变量
let myAnying: any = 'server'
// 将原来的字符类型改为数值型
myAnying = 3
console.log(myAnying)
// 在任意值上访问任何属性都是允许的
// 查看指定变量的任意属性
console.log(myAnying.myname)
console.log(myAnying.myName.firstName)
// 在任意值上访问该变量所有的方法
myAnying.setName('text')
myAnying.setName('text').sayHello();
myAnying.myName.setFirstName('cat');类型推断：如果没有明确的类型指定，那么TypeScript会依照类型推论的规则进行判断出一个类型。
如果初始化时没有赋值则TypeScript会依照类型将其推论为一个任意值的类型。
// 当没有指定类型，但是初始化的时候赋值，typeScript会将其类型解析为number的类型，
// 如果再次赋予其他类型的值则会报错
let mytext = 3;
// 如果没有指定类型，在初始化的时候且没有赋值，typescript会将其该解析为any类型。
let myceshi;
myceshi = '33'
myceshi = "text"联合类型
// 创建一个联合类型,有字符类型、数值类型和布尔类型。
// 创建的联合类型可以给该变量赋予多个不同类型的值
let mysss: string|number|boolean ;
// 当给一个变量赋值的时候typescript会自定推断为师什么类型。
// 如果下面调用的方法和推断的类型不一致则会报错
mysss = 'text'
console.log(mysss.length)
mysss = 10;
console.log(mysss.toString())
mysss = true
// 当不确定一个变量的类型的时候，调用该变量的方法时候应当使用两个联合类型的共有方法。
function getlenth(res: string | number ): string {
return res.toString()
}类型别名
类型别名(自定义类型)：为任意类型起别名。
使用场景：当统一类型(复杂)被多次使用时，可以通过类别名，讲话该类型的使用。
// 创建一个组合类型的别名
type MyArrayOne = (number|string)[]
let arr1:MyArrayOne = [1,'a',2,3,'c']
console.log(arr1)
接口
在面向对象的语言中，接口是一个比较重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。
typeScript的核心原则之一是对值所具有的机构进行检查。他又时被称作“鸭式变形法”或“结构性字类化”。在typescript中，接口作用是为了这些类型命名和你的代码或第三方代码定义契约。
// 创建一个接口的类型
// 里面定义了变量的属性
interface Person {
// 创建了一个只读属性，该属性在一次接口中赋值之后不能再次赋值
readonly id: number;
name: string;
age: number;
// 创建一个非必须调用得属性变量，需要就使用不需要就不使用(可选属性)
// 想调用就调用，不想调用就不调用
home?: string;
// 创建一个任意属性
[propName: string]: any;
}
// 根据接口的类型进行调用
// 在定义的接口中的属性重新赋值，属性不能多写也不能少写。
let tom: Person = {
id:1,
name: 'cui',
age: 22,
// 调用任意属性
aa:'www',
}
// 当对只读属性重新赋值得时候会直接报错
// tom.id = 2
// 创建类型别名
type MyPerson = {
name: string,
age: number,
sayHi(): void
}
// 调用类型别名
let persons:MyPerson = {
name: 'Wan',
age: 30,
sayHi() {}
}
console.log(persons)接口继承
如果两个接口之间有心痛的属性和方法，可以将公共的属性和方法抽离出来，通过继承来实现复用。
// 创建接口
interface Point2D {x:number; y:number}
// Point3D继承Point2D接口中的属性，同时写自己已有的属性
interface Point3D extends Point2D {z: number}
// 调用Point3D的接口
let p3: Point3D = {
x:1,
y:2,
z:3
}
console.log(p3)数组
存放多个元素的集合
// 创建一个全是数字的数组（方法一）
let temp: number[] = [1,2,3]
// 创建一个字符串类型的数组（方法二）
let str: Array<string> = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
console.log(str)
// 给数组中添加元素，添加的元素也是数字
temp.push(4)
console.log(temp)
// 创建个任意类型的数组,里面可以添加任意类型的元素
let temps: any[] = [1,2,3,&#39;aa&#39;,true]
console.log(temps)元组
场景：在地图中，使用经纬度坐标来标记位置信息。
可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型。
使用number[]的缺点：不严谨，因为该类型的数组中可以出现任意多个数字。
更好的方式：元组（Tuple）。
元组类型是另一种类型的数组，它确切的知道包含多少元元素，以及特定索引对应的类型。
// 使用元组类型
// 创建一个元组
let position: [number,number] = [222.12345,223.2555]
console.log(position) |
|
发表于 2022-11-27 18:53:15