typescript学习笔记(全)
1.安装
全局安装
npm i -g typescript
局部安装
npm i typescript
初始化
tsc --init
就会在所在目录下创建出一个tsconfig.json的ts配置文件
2.编译
如果是全局安装
tsc index.ts
就会在同目录下编译出一个index.js文件
如果是局部安装
npx tsc index.ts
3.特性
1.静态类型:
编译时会检查变量和类型是否匹配,如果不匹配,编译不会通过
比如
let name:string = '王惊涛'
可以编译通过
let name:number = '王惊涛'
就会编译报错
2.类型推断:
ts会根据值进行类型推断
let name = '王惊涛'
ts编译器就会自动判断这个类型为string
下面的操作,就属于错误操作
let name = '王惊涛'
name = true
3.接口:
通过interface关键字定义接口,例如
interface interface_test_1{name:stringage:numberlove:Function
}
let interface_test_1:interface_test_1 ={ name:'wjt',age:29,love:()=>'game',
}
4.类型别名:
使用type关键字可以定义类型别名,可以定义多个类型,方便重复使用
type result_type = string | boolean
let result1:result_type = '成功'
let result2:result_type = false
5.枚举:
使用enum关键字命令一组常量,提高代码可读性
enum Direction {Up = "UP",Down = "DOWN",Left = "LEFT",Right = "RIGHT"
}let dir: Direction = Direction.Left;
console.log(dir); // 输出: "LEFT"
6.元组:
元组用于定义固定数量和类型的数组。比如2d坐标,固定是两个数字值,代表x和y
let position:[number,number] = [1,1]
7.访问修饰符
在class类中定义了public(公共),private(私有),protected(受保护)修饰符,用于控制属性或方法的可见性,支持更好的封装
class Person {private name: string;protected age: number;public constructor(name: string, age: number) {this.name = name;this.age = age;}
}8.抽象类
使用abstract定义抽象类,抽象类不能直接实例化,需要由子类进行实例化
abstract class Game {abstract desc(): void; // 抽象方法
}class Moba extends Game { // 继承desc() {console.log('moba类型是推塔游戏');}
}let Lol = new Moba(); // 实例化英雄联盟
Lol.desc(); // 调用 desc 方法
9.泛型:
泛型是参数化类型,定义一个类型参数,代表某种固定类型。如下的示例中,T就代表了传入的number
function addNum<T>(value: T): T {return value+1;
}let num = addNum<number>(1);
console.log(num) //210.命名空间:
ts中的导入与导出和ES6模块系统一样,并且还有Namespace命名空间
utils.ts中导出函数
export function addNum(a:number,b:number):number{return a+b
}
app.ts
import {addNum} from './utils.ts'
addNum(1,2)
11.类型守卫:
使用typeof检查类型
function resultFilter(result:string | boolean){if(typeof result === 'string'){console.log('字符串类型)}else{console.log('布尔类型')}
}
12.可选链和空值合并运算符
可选链?.和空值合并运算符??都可以做到代码中应对undfined和null值的处理
let user = { name: "王惊涛", address: { city: "北京" } };
console.log(user?.address?.city); // 如果 address 存在则输出 city，否则返回 undefinedlet value = null;
console.log(value ?? "default"); // 如果 value 为 null 或 undefined，则返回 "default"13.类型兼容器和工具类型
TypeScript 提供了一些工具类型，如 Partial、Pick、Readonly、Record 等，这些类型可以帮助生成新的类型，简化类型定义。
interface Person {name: string;age: number;love: string
}let wjt: Partial<Person> = { name:'王惊涛',age:29 }; // 可选属性4.ts基础类型
归纳
| 类型 | 描述 | 示例 |
|---|---|---|
| string | 文本 | let name:string = ‘王惊涛’ |
| number | 数字类型 | let age:number = 29 let num:number = 2.8 |
| boolean | 布尔值 | let gender:boolean = true |
| array | 相同类型的元素数组 | let arr:string[] = [‘王惊涛’,‘小马’] |
| tuple | 元组,已知类型和固定长度 | let position:[string,number,number] = [‘北京’,1,1] |
| enum | 命名常量 | enum Game{LOL, CF, DNF } let loveGame:Game = Game.LOL |
| any | 任意类型,不限制 | let result:any = true result = ‘王惊涛’ |
| void | 无返回值(一般用于函数) | function play():viod{ console.log(‘打联盟’) } |
| null | 空值 | let empty:null = null |
| undefined | 未定义 | let value:undefined = undefined |
| never | 不会有返回值 | function error():never { throw new Error(‘error’) } |
| object | 非原始类型 | let wjt:object = {name:‘王惊涛’,age:29} |
| union | 联合类型 | let result:string I number = ‘success’ |
| unknow | 不确定类型 | let value:unknow = ‘王惊涛’ |
null 和 undefined 是所有类型的子类型
布尔类型
//布尔值
let bool_1:boolean = false
console.log(bool_1,'bool_1')
数字类型
//数字
let num_1:number = 6 //十进制
let num_2:number = 0xf00d //十六进制
let num_3:number = 0b1010 //二进制
let num_4:number = 0o744 //八进制
console.log(num_1,num_2,num_3,num_4)字符串
//字符串
let str_1:string = '字符串'
let str_2:string = `模板字符串`
console.log(str_1,str_2)数组
let arr_1 : number[] = [1,2,3]
let arr_2 : Array<number> = [2,3,4]
let arr_3 : string[] = ['a','b','c']
let arr_4 : Array<string> = ['b','c','d']
console.log(arr_1,'arr_1')
console.log(arr_2,'arr_2')
console.log(arr_3,'arr_3')
console.log(arr_4,'arr_4')
元组Tuple
let tuple_1:[string,number,boolean] = ['a',1,true]
// tuple_1 = [1,'a',false] //error
tuple_1 = ['b',2,false]
console.log(tuple_1,'tuple_1')
枚举
enum Color{Red="red",Green=2,Blue=3}
let c_1 : Color = Color.Green
console.log(c_1,'c_1')
let colorName : string = Color[2]
console.log(colorName,'colorName')
任意类型
let any_val1 : any = '任意值'
let any_val2 : any = ['1',2,3]
any_val1 = {name:'any_obj'}
any_val2 = null
console.log(any_val1,any_val2)
Void类型
function fn_1():void{console.log('I`m a funciton')
}
let void_val1:void = null
void_val1 = undefined
// void_val1 = '字符串' //error
null和undefined类型
let null_1 : null = null
let undefined_1: undefined = undefined
// null_1 = '哈哈哈' //error
Never类型
function errorFn_1():never{throw new Error('哈哈哈')// return '哈哈哈' error
}
function neverFn_1():never{while (true){}
}
object类型
declare function create(obj:object | null) :void
create({val:111})
create(null)
// create(number) //error
//数组
let arr_1 : number[] = [1,2,3]
let arr_2 : Array<number> = [2,3,4]
let arr_3 : string[] = ['a','b','c']
let arr_4 : Array<string> = ['b','c','d']
console.log(arr_1,'arr_1')
console.log(arr_2,'arr_2')
console.log(arr_3,'arr_3')
console.log(arr_4,'arr_4')//元组Tuple
let tuple_1:[string,number,boolean] = ['a',1,true]
// tuple_1 = [1,'a',false] //error
tuple_1 = ['b',2,false]
console.log(tuple_1,'tuple_1')//枚举
enum Color{Red="red",Green=2,Blue=3}
let c_1 : Color = Color.Green
console.log(c_1,'c_1')
let colorName : string = Color[2]
console.log(colorName,'colorName')//任意类型
let any_val1 : any = '任意值'
let any_val2 : any = ['1',2,3]
any_val1 = {name:'any_obj'}
any_val2 = null
console.log(any_val1,any_val2)//Void类型
function fn_1():void{console.log('I`m a funciton')
}
let void_val1:void = null
void_val1 = undefined
// void_val1 = '字符串' //error// null和undefined类型
let null_1 : null = null
let undefined_1: undefined = undefined
// null_1 = '哈哈哈' //error//Never类型
function errorFn_1():never{throw new Error('哈哈哈')// return '哈哈哈' error
}
function neverFn_1():never{while (true){}
}//object类型
//非原始类型
declare function create(obj:object | null) :void
create({val:111})
create(null)
// create(number) //error//类型断言
let val_dy : any = '要被断言类型的值'
// let length_1 : number = (<string>val_dy).length
let length_1 : number = (val_dy as string).length
let arr_dy :any[] = ['哈哈哈','呵呵呵',(()=>1+'2')()]
let val_2 : string = (<string>arr_dy[2])5.函数
函数定义类型
// function(参数:类型):返回值类型{}
function fun_test_1(num1:number,num2:number):number{return num1+num2
}
console.log(fun_test_1(1,2),'fun_test_1调用')function fun_test_2(name:string,age:number):void{console.log(`我是${name},我今年${age}岁`)
}
fun_test_2('wjt',28)
完整写法
// let 函数名:(参数:类型) => 返回值类型 = 函数体
let fun_test_3:(name:string,age:number) => object = function(name:string,age:number):object{return {name,age}
}
console.log(fun_test_3('wjt',29),'fun_test_3完整写法调用')推断类型
let fun_test_4 = (num:number,str:string)=>{return num+str
}
console.log(fun_test_4(56,'个民族'),'自动推导返回类型')
可选参数
ts中形参必须对应有实参,如果用?,可以让该参数变为可选参数,默认是undefined
// function fun_test_5(name:string,age:number){
// console.log(name,age)
// }
// fun_test_5('wjt') //errorfunction fun_test_5(name:string,age?:number){console.log(name,age,'fun_test_5函数调用')
}
fun_test_5('wjt')
默认参数
function fun_test_6(name:string,age = 28){console.log(name,age,'fun_test_6函数调用')
}
fun_test_6('wjt')
剩余参数
function fun_test_7(firstParam:string,...otherParam:any[]){console.log(firstParam,'第一个参数')console.log(otherParam,'其余参数')
}
fun_test_7('wjt',28,()=>'game',{love:'study'})6.interface(接口)
基础使用
interface interface_test_1{name:stringage:numberlove:Function
}
let interface_test_1:interface_test_1 ={ //属性多了对不上name:'wjt',age:29,love:()=>'game',// work:'coder' //error
}// let interface_test_2:interface_test ={ //error 属性少了对不上
// name:'mashi',
// }
console.log(interface_test_1,'interface_test_1')
可选属性
interface interface_test_2{name:stringwork?:boolean //写不写都行price:number
}
let wjt_1:interface_test_2 = {name:'wjt',work:true,price:24000
}
let mashi_1:interface_test_2 ={name:'mashi',price:10000
}
console.log(wjt_1,'wjt_1')
console.log(mashi_1,'mashi_1')interface person_2{
name?:string
age?:number
}let person_2:object = {name:'wjt',age:'28'} //这里age字符串也没有报错
let getWife =(person_2:person_2):{name:string,age:number}=>{let wife:person_1= {name:'null',age:0,love:'wjt'}if(person_2.name){wife.name = 'mashi'}if(person_2.age){wife.age = 29 }return wife
}
console.log(getWife(person_2))
任意属性名和任意属性值
interface interface_test_3{name:string,age?:number,[propName:string]:any //任意属性名和任意属性值
}
let interface_test_3:interface_test_3= {name:'wjt',work:'coder',love:()=>'game'
}
函数接口
interface interface_fun_1{(obj:object):object
}
interface fun_obj_1{name:stringage:numberwork:string// [propName:string]:any
}
let fun_obj_1:fun_obj_1 = {name:'wjt',age:28,work:'js-coder'
} let interface_fun_1:interface_fun_1 = (obj)=>{return Object.assign({val:1},obj)
}
interface_fun_1(fun_obj_1)
数组接口
interface interface_obj_arr_1{[index:number]:objectlength:number
}
let obj_arr_1 :interface_obj_arr_1 = [{name:'wjt'},{name:'xm'}
]
console.log(obj_arr_1,'obj_arr_1')
类接口
interface interface_class_1{class_fun_1:Functionclass_var_1:stringclass_var_2:number
}
class Class_1 implements interface_class_1{constructor(){}class_fun_1 : ()=>{}class_var_1:'字符串'class_var_2:0}
let class_shili_1 = new Class_1()
console.log(class_shili_1,'class_shili_1')
继承接口
interface extends_1{name:string
}
interface extends_2 extends extends_1{age:number
}
interface extends_3 extends extends_1,extends_2{love:Function
}
let extends_var_1 : extends_1 = {name:'wjt'}
let extends_var_2 : extends_2 = {name:'wjt',age:28}
let extends_var_3 : extends_3 = {name:'wjt',age:28,love:()=>'game'}
混合类型(函数对象)
interface interface_mix_1{(start:number):stringperson_name:stringage:numberlove:Function
}
function interface_mix_fun():interface_mix_1{let obj_fun = <interface_mix_1>function(start:number){console.log(start,'传入了值')}obj_fun.person_name = 'wjt'obj_fun.age = 28obj_fun.love = ()=>{console.log('打游戏')}return obj_fun
}
let obj_fun_1 = interface_mix_fun()
obj_fun_1(1)
console.log(obj_fun_1,'函数对象')
console.log(obj_fun_1.person_name,'函数对象名字')
console.log(obj_fun_1.age,'函数对象年龄')
console.log(obj_fun_1.love,'函数对象调用love方法')
接口继承类
class Class_2{name:string
}
interface interfaceAndClass extends Class_2{age:number
}
let info:interfaceAndClass = {name:'wjt',age:28}
console.log(info,'info')
7.class(类)
修饰符public
public代表默认公开,可以在任何地方被访问
class Class_1{public person_name:stringpublic constructor(name:string){this.person_name = name}public love(val){console.log(`我喜欢${val}`)}
}
let class_var_1 = new Class_1('wjt1')
console.log(class_var_1,'class_var_1')
console.log(class_var_1.person_name,'class_var_1的person_name名称')
修饰符private
private代表变量私有,只能被其定义的类所访问
class Class_2{private person_name:stringconstructor(name:string){this.person_name = name}
}
let class_var_2 = new Class_2('wjt2')
console.log(class_var_2,'class_var_2')
// console.log(class_var_2.person_name) //error
修饰符protected
protected代表受保护,只可以被自身和子类所访问
class Class_3{protected person_name:stringconstructor(name:string){this.person_name = name}
}
class Class_4 extends Class_3{private self_var:stringconstructor(name:string,self_var:string){super(name)this.self_var = self_var}public love(val){return '我喜欢'+val}
}
let class_var_4 = new Class_4('wjt4','自定义数据')
console.log(class_var_4,'class_var_4')
// console.log(class_var_4.person_name) error
// console.log(class_var_4.self_var) error
console.log(class_var_4.love('打游戏'))
readonly只读
class Class_5{readonly person_name:stringage:numberconstructor(name:string,age:number){this.person_name = namethis.age = age}
}
let class_var_5 = new Class_5('wjt5',28)
console.log(class_var_5,'class_var_5')
class_var_5.age = 29
// class_var_5.person_name = 'wjt' //error
类当接口使用
把类当interface一样去使用
class Class_10{person_name:stringage:number
}interface interfaceWithClass extends Class_10{love:Function
}let person_wjt:interfaceWithClass = {person_name:'wjt',age:28,love:()=>'game'}
console.log(person_wjt,'person_wjt')
8.泛型
允许在定义函数、类、接口等时使用占位符来表示类型，而不是具体的类型。
基础用法:泛型函数
function genericity_fun1<T>(name:T):T{return name
}
调用
// 写法1
let result_1 = genericity_fun1<string>('wjt')
//写法2:自动推导类型
let result_2 = genericity_fun1('wjt')
约定俗称的一些标识符
T 一般代表Type(类型)
function fun<T>(arg: T): T {return arg;
}
K ,V一般代表Key(键)和Value(值)
interface KeyValueObj<K, V> {key: K;value: V;
}
E 一般标识数组元素的泛型类型参数
function numArr<E>(arr: E[]): void {arr.forEach(item => console.log(item));
}
R 一般代表函数返回值的泛型类型参数
function hasResultFun<R>(value: R): R {return value;
}
泛型接口
// 基本语法
interface Person<T, U> {name: T;age: U;
}// 使用泛型接口
let wjt: Person<string, number> = { name: "王惊涛", second: 29 };
console.log(wjt);
泛型类
class Genericity_Class<T>{initVal:TaddFun:(x:T,y:T) => T
}//传入数字类型
let number_result_1 = new Genericity_Class<number>()
number_result_1.initVal = 0
number_result_1.addFun = function(x,y){return x+y}
console.log(number_result_1.addFun(1,2),'number_result_1.addFun')//传入字符串类型
let string_result_1 = new Genericity_Class<string>()
string_result_1.initVal = '初始化字符'
string_result_1.addFun = function(x,y){return x+y}
console.log(string_result_1.addFun('我是','字符串'))
泛型约束
使用T extends interfaceXXX进行约束
interface genericity_constraint1{length:number
}
function genericity_constraint2<T extends genericity_constraint1>(arr:T):T{console.log(arr.length,'genericity_constraint2的length')return arr
}
genericity_constraint2(['wjt','mashi'])
泛型默认值
function defaultValue<T = string>(arg: T): T {return arg;
}// 使用带默认值的泛型函数
let result1 = defaultValue("王惊涛"); // 推断为 string 类型
let result2 = defaultValue(29); // 推断为 number 类型
9.联合类型与交叉类型
联合类型
使用|连接两种类型: 类型1 | 类型2,该变量可设置为这两种类型
let age:number | string = '29'
age = 29
函数参数也可以这样设置
const getAge = (age:number | string): number | string=>{return age
}
数组也是可以的
let arr:number[]|string[] = [1,2,3]
arr = ['1','2','3']
交叉类型
使用&连接两种类型,可以将这两种类型合并
//交叉类型
interface prop1{name:stringage:number
}
interface prop2{love:()=>string
}const function2 = (personInfo:prop1 & prop2)=>{console.log(personInfo)
}
function2({name:'wjt',age:29,love:()=>'jscoder'})
10.类型推导与类型断言
类型推导
//默认推导为number类型
let age = 18//默认推导为字符串类型
let name = '王惊涛'//默认推导为布尔类型
let gander = true//函数返回值类型推导
function desc(name:string,age:number){return `我是${name},今年${age}岁` //返回值推断为字符串
}
let wjtDesc = desc(name,age) //类型为字符串
类型断言
当编辑器无法断定一个变量的类型,但是开发者知道,就可以手动指定一个变量的类型,有两种写法
let name = '王惊涛';// 写法1: 尖括号语法: <类型>变量 (不推荐)
let nameLength1: number = (<string>name).length;// 写法2: as语法: 变量 as 类型 (推荐)
let nameLength2: number = (name as string).length;// 定义接口
interface Person {name: string;age: number;
}// 动态类型
let wjt: any = { name, age: 29 };// 开发者可以断言 wjt 类型为 Person 类型，wjt_copy 也就是 Person 类型
let wjt_copy: Person = wjt as Person;
对比
| 特性 | 类型推导 | 类型断言 |
|---|---|---|
| 触发方式 | 由编译器自动推断 | 由开发者手动指定 |
| 使用场景 | 编译器可以准确推断类型时 | 编译器无法推断类型或需要覆盖推断时 |
| 安全性 | 类型安全，编译器会验证 | 存在风险，开发者需确保断言类型正确 |
| 语法 | 无需显式语法 | 使用 <Type> 或 as Type |
11.类型别名
type可以定义类型别名,功能还是很强大的
基础类型
不过这个意义一般不大
type stringType = string
let name:stringType = '王惊涛'
联合类型
设置了固定的值,这个变量的值智只能从设置的值里拿,如果赋值一个没有设置的值,会报错
type genderType = "男" | "女"
let gender:genderType = "太监" //error,不好意思,大清之后无太监
对象类型
type Person = {name:stringage:numbergender:boolean
}let wjt:Person = {name:'王惊涛',age:29,gender:true}
函数类型
type addNumType = (x:number,y:number) => numberlet addNum :addNumType = (x,y)=>x+y
let num = addNum(1,1)
元组类型
type Position = [number,number]
let position:Position = [1,1]
type和interface的区别
虽然都可以实现类型定义
type Person1{name:stringage:numberhas:{xxx:stringyyy:string}
}interface Person2{name:stringage:numberhas:{xxx:stringyyy:string}
}
不过interface可以实现继承和扩展,而Type做不到
interface Man extends Person {nanFun:Function
}