引言
这是本人跟着教程 哔哩哔哩up(小满zs)ts教程 所做的记录
起步安装 npm install typescript -g
运行tsc 文件名
nodejs 环境执行ts
npm i @types/node --save-dev （node环境支持的依赖必装）
npm i ts-node --g
基础类型
- 字符串
let f:string = "帅逼"
let sring:sring = `我是大${
f}`
- 数字类型
let length:number = 18;
console.log(`我真的${
length}`);
- 布尔类型
使用构造函数创造的boolean不是布尔值，而是布尔值对象
直接使用布尔构造函数没有问题
let boolean:boolean = true;
let createBoolean:boolean = new Boolean(1) // 在代码中会报错
let boolean2:boolean = Boolean(1); //这就没有问题
- 空类型
js中没有空值的概念，在ts中可以用void来表示没有任何返回值的函数。
void类型的用法，主要是用在我们不希望调用者关心函数返回值的情况下，比如通常的异步回调函数。
void可以定义undefined 不能用来定义null类型
//1.void类型的用法，主要是用在我们不希望调用者关心函数返回值的情况下，比如通常的异步回调函数。
function voidFn():void{
console.log("Test void")
}
//2.void可以定义undefined 不能用来定义null类型
let u:void = undefined;
let res:void = null // 会报错
- null 和undefined
let u:undefined = undefined;
let n:null = null
null 和undefined 不能赋值给其他类型的变量
let unde:undefined = undefined;
let str:string = "1"
str=unde; //会报错
任意类型
any类型 和unknown 顶级类型
any类型
- 在没有强制限定那种类型，随时切换类型都可以 可以用any声明。
- 我们对any类型任何操作都不需要检查类型。
- 声明变量的时候没有指定变量类型，就会默认为any类型
声明变量的时候使用any就失去了ts类型检测的作用
//1. 在没有强制限定那种类型，随时切换类型都可以 可以用any声明。
let any:any = 123;
any = "any"; //不会报错
// 2.声明变量的时候没有指定变量类型 就会默认为any类型；
let han;
han = "帅逼";
han = 18;
han = true;
//弊端如果使用any 就失去了 TS类型检测的作用
//我真不要脸
unkown 类型
在ts3.0引入了unkown类型 也就是top type
- unknown类型不能赋值给其他类型
- unknown 可赋值对象只有unknown 和any
let value:unknown;
value = true;
value = 42;
value = "hello world"
value = []
value = true
value = {
}
value = null
value = undefined;
vlaue = Symbol("type")
//1. unknown类型不能赋值给其他类型
let name:unknown = "lili";
let name2:string = names //会报错
//2. unknown 可赋值对象只有unknown 和any
let bbb:unknown = "123";
let aaa:any = bbb;
any 和unknown的区别
- unknown类型不能赋值给其他类型，any类型可以赋值给任何一个。
- 如果用any声明一个对象a 调用一个a没有定义的b属性 不会报错，而 用unknown是不能调用属性和方法的。
let a:any{
b:1};
a.b //不会报错
let a: unknown {
b:1}
a.b //会报错
接口和对象类型
在typescript中，我们定义对象要用interface接口，我的理解是使用interface来定义一种约束，让数据结构满足约束的格式。
- 使用接口约束的时候不能多一个属性也不能少一个属性，必须跟接口保持一致。
- 是否选用的属性 在属性的后面 跟上 ？操作符。
interface Person {
b:string,
a:string
}
// 这样写是会报错的 因为我们在person定义了a,跟b但是对象里面缺少b属性
// 使用接口约束的时候不能多一个属性也不能少一个属性，必须跟接口保持一致
const person:Person = {
a:"213"
}
重名的interface 可以合并
interface A {
name:string
}
interface A {
age:number
}
let a :A = {
name:"xx",age:20}
//继承
interface A {
name:string
}
interface B extends A{
age:number
}
let obj:B = {
age:18,
name:"string"
}
// 是否选用的属性 在属性的后面 跟上 ？操作符。
interface Person{
b?:string,
a:string
}
const person:Person = {
a:"18"
// 这个实例 不用b属性也不会报错 因为他是可选的。
}
任意属性[propName:string]
一旦定义了任意属性，那么确定属性和可选属性的类型必须是它的类型的子集。
// 在这个例子当中我们看到接口中并没有定义C但是并没有报错
// 但是 把 c 的值 改为 非字符串类型的就会报错
interface Person {
b?:string,
a:string,
[propName:string]:any;
}
const person:Person = {
a:"213",
c:"123"
}
只读属性readonly
只读属性是不允许赋值的只能读取。
interface Person {
b?:string,
readonly a: string,
[propName:string]:any;
}
const person:Person = {
a: "213",
c:"string"
}
person.a = 123 //这里会报错 因为 readonly 只读不能更改
添加函数
interface Person {
b?:string,
readonly a: string,
[propName:string]:any;
cb():void
}
const person:Person = {
a: "string",
c: "123",
cb:()=>{
console.log(123)
}
}
数组的类型
- 类型
// 类型加中括号
let arr:number[] = [1,2,3]
let arr1:number[] = [1,2,3,"1"] //会报错
// 向数组中push 不同类型的 也会报错
arr.push("string") // 会报错。
let arr:number[] = [1,2,3] // 数字类型的数组
let arr2:string[] = ["1","2"]; // 字符串类型的数组
数组泛型
规则Array<类型>
let arr:Array<number> = [1,2,3,4,5]
用接口表示数组
一般用来描述类数组。
interface NumberArray {
[index:number]:number;
//表示索引类型是数字，值类型也是数字。
}
let fibonacci:NumberArray= [1,2,3,4,5];
多维数组
let data:number[][] = [[1,2],[3,4]];
arguments类数组
function Arr(...args:any):void{
console.log(arguments)
let arr:number[] = arguments
}
Arr(111,222,333)
function Arr(...args:any): void {
console.log(arguments)
//ts内置对象IArguments 定义
let arr:IArguments = arguments
}
Arr(111, 222, 333)
// 其中 IArguments 是TypeScript 中定义好了的类型，它实际上就是
interface IArguments {
[index:number]:any;
length:number;
callee:Function;
}
any在数组中的应用
一个常见的例子数组中可以存在任意类型
let list : any[ ] = ["test",1,[],{
a:1}];
函数扩展
函数的类型
注意，参数不能多传，也不能少传，必须按照约定的类型来。
const fn = (name:string,age:number):string = >{
return name + age
}
fn("张三",18)
函数的可选参数？
通过？ 来表示该参数为可选参数
const fn = (name:string,age?:number):string=>{
return name + age
}
fn("张三1")
函数参数的默认值
const fn = (name:string= "我是默认值"):string =>{
return name
}
fn()
接口定义函数
//定义参数 num 和num2 后面定义的返回值的类型
interface Add{
(num:number,num2:number):number
}
const fn:Add = (num:number,num2:number):number =>{
return num + num2;
}
fn(5,5)
interface User{
name:string;
age:number
}
function getUserInfo(user:User):User{
return user
}
定义剩余参数
const fn = (array:number[],...items:any[]):any[]=>{
console.log(array,items)
return items
}
let a:number[] = [1,2,3];
fn(a,"4","5")
函数重载
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
如果参数类型不同，则参数类型应设置为 any。
参数数量不同你可以将不同的参数设置为可选。
function fn(params:number):void
function fu(params:string,params2:number):void
function fn(params:any,params2?:any):void{
console.log(params)
console.log(params2)
}