赞
踩
Typed JavaScript at Any Scale
添加了类型系统的JavaScript,适用于任何规模的项目
Ts特点:
JavaScript的超集,用于解决大型项目的代码复杂性
强类型,支持静态和动态类型
可以在编译期间发现并纠正错误
不允许改变变量的数据类型
Js特点:
一种脚本语言,用于创建动态网页
动态弱类型语言
只能在运行时发现错误
变量可以被赋予不同类型的值
图表说明:
就跟前几年,jQuery时代快结束时,你不会vue或者react一样,根本没有就业的机会
如今别说react,连vue的默认版本都是vue3了 vue3和typescript是绑在一起的,再过两年,除了老项目,新项目就是清一色的Ts了
npm create vite
1.1Project name 项目名称
1.2选择Vue
1.3选择自定义
1.4自定义选项
1.5安装所有的包
说明:需要axios可以用下列命令安装
npm i axios -S
1.6运行项目
npm run dev
1.数据类型
- <script setup lang="ts">
- let num:number = 456;
- let msg:string = 'I love typescript'
- let flag:boolean = true
- let un:undefined = undefined
- let nu:null = null
- // 函数执行不返回数据 void
- function say():void{
- alert("你好")
- }
- let count:any = "abc"//少用,不建议用
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <p>num:{{ num }}</p>
- <p>msg:{{ msg }}</p>
- <p>flag:{{ flag }}</p>
- <p>un:{{ un }}</p>
- <p>nu:{{ nu }}</p>
- <button @click="say()">say</button>
- <p>count:{{ count }}</p>
- </main>
- </template>
2.数据类型与元祖
- <script setup lang="ts">
- // string类型的数组
- let arr:string[]=["abc","def","lover"]
- // let arrlist:number[]=[1,2,3]
- // 定义一个数组期待值类型为number
- let list:Array<number> = [123,789]
- list.push(123)
- arr.push("type")
- // let strlist:Array<string> = ["文丁响","王志悦"]
- // 定义一个元祖
- let tup:[string,number] = ["lover",123,]
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <p>{{ arr }}</p>
- <p>{{ list }}</p>
- <p>{{ tup }}</p>
- <!-- <p>{{ strlist }}</p> -->
- <!-- <p>{{ arrlist }}</p> -->
- </main>
- </template>
3.函数
- <script setup lang="ts">
- function add(x:number,y:number):number{
- alert(x+y);
- return x+y;
- }
- let add2 = (x:number,y:number):number =>{
- alert(x*2+y*2);
- return x+y;
- }
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <button @click="add(5,9)">add</button>
- <br>
- <button @click="add2(3,4)">add2</button>
- </main>
- </template>
4.1接口interface类型
- <script setup lang="ts">
- // 接口 定义对象 通常首字母大写
- interface Person {
- name:string
- age:number|string
- readonly id:number //readonly只读
- job?:string //可有可无
- }
- interface Student extends Person {
- major:string
- }
- let p1:Person = {
- name:"wen",
- age:18,
- id:3
- }
- let p2:Person = {
- name:"小文",
- age:"28岁",
- id:4,
- job:"teacher"
- }
- let p3:Student = {
- name:"wzy",
- age:22,
- id:4,
- job:"student",
- major:"人工智能",
- }
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <p>{{ p1 }}</p>
- <p>{{ p2 }}</p>
- <p>{{ p3 }}</p>
- </main>
- </template>
4.2接口 interface类型
- //描述函数类型
- <script setup lang="ts">
- // 定义函数
- type Add1 = (n1:number,n2:number) =>number
- // interface定义函数
- interface Add2 {
- (n1:number,n2:number):number
- }
- const addtype:Add1 = (n1,n2) =>{
- console.log(n1,n2);
- return n1+n2;
- }
-
- addtype(4,5)
- const addInter:Add2 = (n1,n2) =>n1*2+n2;
- addInter(2,3);
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习-type</h1>
- </main>
- </template>
4.3接口interface类型
- //定义不确定的属性
- interface RandKey{
- [propName:string]:string
- }
- const obj:RandKey = {
- n:"nihi",
- b:"你好"
- }
5.内置类型
- <script setup lang="ts">
- let d:Date = new Date();
- let reg:RegExp = /^1\d{10}/
- let err:Error = new Error('错误人类')
- if(reg.test("1359885974")){
- throw(err)
- }
- // 对象
- var obj:object = {
- name:"xiaohai",
- age:18
- }
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <p>{{ d }}</p>
- <p>{{ reg.test("13598859747") }}</p>
- <p> {{ obj }} </p>
- </main>
- </template>
6.类型别名type
- <script setup lang="ts">
- // 定义arrItem类型 字符串或者数字
- type arrItem = string | number;
- // 定义arr数组 值类型为arrItem
- const arr: arrItem[] = [1, "a", 2, "b"]
- // 定义Person类型
- type Person = { name: string }
- // 定义学生类型 Person 与 major 联合
- type Student = Person & { marjor: string }
- // 定义老师类型 Person 与 teach联合
- type Teacher = Person & { teach: string }
- // 定义一个元祖类型,先学老师
- type StudentAndTeach = [Student, Teacher]
- // 定义ST类型 可以是学也可以是老师
- type ST = Student | Teacher;
- // 定义list数组 内容可以是学生 可以是老师
- var list: ST[] = [
- { name: "悦悦", marjor: "生气大王" },
- { name: "文丁响", teach: "H5" },
- { name: "悦悦", marjor: "生气大王" }
- ]
-
- var temp:StudentAndTeach=[
- { name: "悦悦", marjor: "生气大王" },
- { name: "悦悦", teach: "生气大王" },
- ]
- </script>
-
- <template>
- <main>
- <h1>TypeScript学习</h1>
- <p>{{ arr }}</p>
- <p>{{ list }}</p>
- <p>{{ temp }}</p>
- </main>
- </template>
7.字面量
- type ButtonSize = 'mini' |'small'|'normal'
- type Sex = '男'|'女'
1.写法
- interface Person{
- name:string
- age:number
- }
-
- type Person = {
- name:string
- age:number
- }
2.相同:都定义一个对象或函数,都可以继承
- type addType = (num1:number,num2:number)=>number
-
- interface addType{
- (num1:number,num2:number):number
- }
- const add:AddType = (num1,num2)=>num1+num2
3.不同
interface接口是Ts设计出来用定义对象类型的,
type 是类型别名,用于给各个类型定义别名,让TS更简洁,清晰
-type 可以声明基本类型,联合类型与交叉类型,元祖,interface不行
-interface 可以合并重复声明,type不行
平时开发时候,一般使用组合或者加载类型使用type
一般用于extends 或implements的用interface
定义对象与函数看心情
4.interface 继承type ,type也可以继承interface
- interface Person {
- name:string
- }
- interface Student extends Person{
- grade:number
- }
-
- type Person = {
- name:String
- }
- Type Student = Person&{grade:number}
1.泛型的概念
泛型是指在定义函数,接口,或类的时候,不预先指定具体的类型,而是使用的时候再指定类型
泛型中的T就像一个占位符号,或者一个变量,在使用的时候可以把定义类像参数一样传入,它可以原封不动的输出
泛型在成员之间提供有意义的约束:成员(函数的参数,返回值,类的实例,成员,类的方法)
泛型是一种类型的泛指
2.泛型的好处
1 函数的类可以轻松支持多种类型增强程序的扩展性
2. 不必写冗长的联合类型,增强代码的可读性
3. 灵控制类型直接的约束
3.传入什么类型,返回什么类型
- function print(arg:string|num):string|number{
- console.log(arg);
- return arg;
- }
4.泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出。
- function print<T>(arg:T):T{
- console.log(arg);
- return arg
- }
5.处理多个参数
- function swap<T,U>(arg:[T,U]):[U,T]{
- console.log('arg',arg);
- return [arg[1],arg[0]]
- }
6.定义类型与推断
- 使用的时候、
- print<string>("hello")
- 定义类型与推断
- print("hello")
7.泛型与异步
- interface UserInfo{
- name:strig
- age:number
- }
- fucntion request<T>(url:string):Promise<T>{
- return fetch(url).then(res=>res.json())
- }
- request<UserInfo>("user/info").then(res=>{
- console.log(res)
-
- })
8.1约束泛型
- function printLength<T>(arg:T):T{
- console.log(arg.length)
- return arg;
- }
- 不确定T是否有Length
-
- interface Ilength{
- length:number
- }
- function printLength<T extends Ilength>(arg:T):T{
- console.log(arg.length)
- return arg;
- }
8.2约束泛型-类
- class Stack<T>{
- private data:T[] = []
- push(item:T){
- return this.data.push(item)
- }
- pop():T|undefined{
- return this.data.pop()
- }
- }
-
- var s1 = new Stack<number>()
- var s2 = new Stack<string>()
8.3约束泛型-接口
- //使用泛型,可以对interface进行改造,让interface更灵活
- interface Ikeyvalue<T,U>{
- key:T
- value:U
- }
- const k1:Ikeyvalue<number,string>={
- key:18,value:'line'
- }
- const k2:IKeyValue<string,number> = {key:'lin',value:18}
9.泛型定义数组
- const arr:number[] = [1,2,3]
- cosnt arr:Array<number> = [1,4,5]
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。