TypeScript学习：初学
安装等配置指令
安装TypeScript
npm i typescript -g
检查版本
tsc -v npx tsc -v
运行ts文件及js文件
npx tsc 文件名.ts node 文件名.js
安装ts-node脚手架
npm i ts-node -g
检查脚手架版本
npx ts-node -v
初始化ts状态
npx tsc -- init
使用脚手架运行ts文件
npx ts-node 文件名.ts
语法
类型注解
let 变量名:类型名 = 值
let age = 18->let age:number = 18
只能赋值相同类型
age = '张三' 报错：类型错误
其他基本数据类型
let name:name = '张三'
let isfalse:boolean = false
let un:undefined = undefined
数组写法
let arr:number[] = [1,2,3]
let arr:(string | number)[] = [1,2,3,'4']
let arr:Array<number | string> = [1,2,3,'4']
类型别名
type CustomPerson = Array<number | string | boolean>
let arr:CostomPerson = [1,'2',true]
函数类型
function add(a:number,b:number):number{
return a+b;
}
add(1,2)return '1' 报错：因为要求返回的数据是number类型
add('1',2) 报错：因为要求传入的数据是number类型
键勾函数
const add = (a:number,b:number):number =>{
return a+b
}可通过类型别名来同时指定
type CustomAdd = (a:number,b:number)=>number;
const add:CustomAdd = (number1,number2)=>{
return number1+number2
}void类型
void函数在不需要返回值的时候使用
function sayHi(str:string):void{
consolr.log(str)
}可选参数
参数前加"?"表示可选参数
我不知道传入的参数，就把要求传入的参数改为可以传可以不传
必选参数不可以放在可选参数的后面
function createPerson(name:string,age?:number):void{
console.log(`名字是${name},年龄为${age}`)
}
createPerson('张三')对象类型
let person :{
name:string
age:number
sayHi(str:string):void
}={
name : '张三',
age : 18,
sayHi(str){
console.log(`${str}`)
}
}
person.sayHi('hello')类型别名适用
type CostomPerson = {
name:string,
age:number,
sayHi(str:string):void
}
let person:CostomPerson = {
name : '张三',
age : 18,
sayHi(str){
console.log(`${str}`)
}
}
person.sayHi('hello')键勾函数适用
type CostomPerson = {
name:string,
age:number,
sayHi:(str:string)=>void
}
let person:CostomPerson = {
name : '张三',
age : 18,
sayHi(str){
console.log(`${str}`)
}
}
person.sayHi('hello')可选参数适用
type CostomPerson = {
name:string,
age:number,
hobby?:Array<string>,
sayHi(str:string):void
}
let person:CostomPerson = {
name : '张三',
age : 18,
sayHi(str){
console.log(`${str}`)
}
}
person.sayHi('hello')接口
interface关键字来声明接口
interface CustomPerson {
name:string
age:number
}
let person:CustomPerson = {
name : '张三',
age : 18
}继承
// 继承 继承另一个类型的所有属性
interface CustomPerson1 extends CustomPerson{
songs : string
}
let star:CustomPerson1 = {
name : 'aaa',
age : 19,
songs : '凤凰传奇'
}元组
let position : [number,string] = [1,'1']
// 类型推论，根据值反推出类型
let age = 18
// age = '111'字面量类型
当类型别名被固定定义时，输入别的值就会报错
{
let str = 'hello'
const str1 = 'hello'
// 贪吃蛇游戏
type fangxiang = 'down' | 'up' | 'left' | 'right'
function move (driection:fangxiang){
console.log(driection)
}
move('down')
// move('aaa')
}泛型
传入什么数据类型 返回什么数据类型
注册泛型函数，在变量名后加<type>，type为类型名
function fn<type> (value:type):type{
return value
}调用
声明什么类型，就要用到什么类型
let res = fn<number>(10)
let res = fn<string>('a')
一般能推断的函数类型，简化即可
let res = fn(2)
其他属性调用无效
泛型函数的类型变量 Type 可以代表多个类型，这导致无法访问任何属性
console.log(value.length) 报错：因为不认识length属性
添加约束
添加一个接口，使length属性可以被继承到定义的函数中
interface havelength {
length : number
}
function fn1<type extends havelength> (value:type):type{
console.log(value.length)
return value
}在调用时，只用有length属性的，在调用时才不会报错
像数字无length属性的，就会报错
let res4 = fn1(2) 报错：因为数字无length属性
let res5 = fn1('abc')
let res6 = fn1([1,2,3,4,5])
多个类型变量
在传入一个对象与其对象之中的子属性时，一般情况下不能正常使用
这需要我们添加一个约束，让key的值始终在obj里面
function getValue<Type,Key extends keyof Type>(obj:Type,key:Key){
return obj[key]
}
getValue({name:'zs',age:18},'name')在未限制对象之前，如果引用的第一个参数不符合条件，反而会在第二个参数报错，那么我们就要对第一个参数也进行约束
// 继承js中object属性，使第一个参数满足object
function getValue1<Type extends object,Key extends keyof Type>(obj:Type,key:Key){
return obj[key]
}
// 这样在引入时就会报第一个参数的错误
// getValue1('aaa','b')泛型接口
但我们在定义了一个固定类型的接口是，泛用性太差，因此我们就需要使用泛型接口在进行泛用
未运用泛型
// 定义了一个接口
interface MyArray100 {
length : number
push(value:number):number
pop():number
reverse():number[]
}
const arr100:MyArray100 = {
length:10,
push(n:number){
return 11
},
pop(){
return 10
},
reverse(){
return [1,2,3]
}
}
arr100.push(10)运用泛型
// 定义一个存所有值的泛型接口
interface MyArray<Type> {
length : number
// 返回新的数组长度，所以不用改返回的number类型
push(value:Type):number
pop():Type
reverse():Type[]
}
// 存数字
// 声明传入的类型
const arr:MyArray<number> = {
length:10,
push(n:number){
return 11
},
pop(){
return 10
},
reverse(){
return [1,2,3]
}
}
arr.push(10)
// 存字符串
// 存布尔值
泛型工具类型
type Person = {
name : string,
age : number
hobby : string[]
}可选
type p = Partial<Person>
只读
type p = Readonly<Person>
单个属性构造
type pickPerson = Pick<Person,'name' | 'age'>
索引签名类型
type Obj = {
[key : string] :number
}
let test : Obj = {
x : 111,
y : 222
}
type Person = {
[k : string] : string | number
}
let zs : Person = {
name : 'zs',
address : 'aaa',
email : 'aaa',
age : 18
}