TypeScrippt知识

jr2319

已于 2022-10-28 20:03:23 修改

阅读量1.9k

点赞数

文章标签： javascript 前端 typescript

于 2022-10-28 19:51:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51040108/article/details/127577795

版权

本文介绍了TypeScript作为JavaScript超集的特点，强调了其提供的类型系统和ES6支持，可以在编译阶段发现错误。详细讲解了TypeScript的安装、编译过程以及基础语法，包括数据类型、任意值、类型推论、数组类型、函数类型、接口、枚举、泛型和类等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

7、interface 接口名指定属性和属性的类型

一、JavaScript是什么

是浏览器脚本编程语言，可以运行在浏览器端
组成：BOM,DOM,Ecmascript
Ecmascript是浏览器脚本语言的标准，ES6是标准的版本

二、TypeScript是什么

是JavaScript的超集，提供了类型系统和对ES6的支持，代码开源github 可以在编译阶段就发现大部分错误，比在运行时候出错好 scss -> css typescript -> JavaScript

类型检测

数据类型：决定能做什么操作、存储单元的大小 number string boolean

在运行前知道相应类型，才能进行操作
let num:number = true

类型检测：编译时实现 typescript -> 编译 -> JavaScript ->运行

三、typescript使用

1、后缀名为 .ts

let num:number = 100

2、安装

npm install -g typescript

3、编译

tsc 文件名.ts

四、typescript基础语法

1、数据类型

原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 ES10 中的新类型BigInt。

ts中使用原始类型定义变量

let 变量名:数据类型
let count:number = 100
let name:string = '张三'
let isDone:boolean = false
let u: undefined
let n: null

2、任意值

任意值（Any）用来表示允许赋值为任意类型

let a:any = 100   ->  var a = 100

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型：

let b //:any
b = 'hello'
b = 100  //100将hello替换掉

3、类型推论

会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

联合类型

表示取值可以为多种类型中的一种

let age:string|number =23  
age = true //错误

4、数组类型

let 数组名:类型[]

let arr:number[1,2,3]
let brr:number[1,2,'3'] //数组类型是number，不能是'3'
let crr:Array<number> = [1,2,3]

5、函数类型

                              //返回值也是number类型
function sum(x:number,y:number):number{
    return x + y
}
sum(10,20)

无返回值函数用void表示没有任何返回值的函数

function sum(x:number):void{
    console.log(x)
}
sum(10)

6、参数个数

少于或多余参数个数是不被允许的

可选参数

可选参写在后面，且可选参可传可不传

                    //可选参写在后面，且可选参可传可不穿
function sum(x:number,y?:string):void{
    console.log(x,y)
}
sum(10,'hello')

接口

7、interface 接口名指定属性和属性的类型

作用：作为对象类型

interface person{ //定义类型
    name:string, //定义属性
    age:number
}
let m:person={ //定义属性值
    name: '人类'
    age:20
}
 

//第二种写法
import type{Ref} from 'vue'
interface IPerson{ //定义类型
    name:string, //定义属性
    age:number
}
const info:Ref<Array<IPerson>>=ref([])

8、声明函数

xx.d.ts 文件中，声明文件用于使用第三方库的时候

declare var $:(selector:string)=>any;

9、枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。

const green = 0
const red = 1
const yellow = 2
enum Light({
    green,  //0
    red,  //1
    yellow='黄灯'  //2
})
console.log(Light.green)  //0
console.log(Light.yellow)  //黄灯

10、泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

//泛型函数
function sum<T,E>(x:T,y:E):T{
    return x
}
sum<number,string>(10,20)//T=number

11、泛型约束

//约束 T 是具有length属性
interface ILength{
    length:number
}
function fun1<T extends ILength<number>>(num:T):void{
    console.log(num.length)
}
fun1<string>('100')

12、泛型类

class Point<T> {//表示坐标
    x:T
    y:T
    constructor(x:T,y:T){
        this.x = x
        this.y = y
    }
}
new Point<number>(123.98,23.45)
new Point<string>('东经120度','北纬180')

13、类

//类与修饰
class Student{
    private name:string  //姓名
    private age:number  //年龄
    public score:number  //成绩
    constructor(name:string,age:number,score:number){
        this.name = name
        this.age = age
        this.score = score
    }
    public say(){
        console.log(this.name+'说话')
    }
}

let stu = new Student('jack',18,98)
stu.say()
stu.name='rose'
stu.say()